Slot machine like random link choser

13 Years Ago sun-tzu 0 700 Views

I just made this code today for a site I'm working on and figured people may try to improve it.

To use:

$("#randomize").randomize();

<!DOCTYPE HTML>
<html>
<head>
<title>Random Pick Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>

<script type="text/javascript" src="randomize.jQuery.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#randomize").randomize({
	direction: 'topToBottom',
	evenBG: '#FFF',
	evenFG: '#000',
	oddBG: '#AAA',
	oddFG: '#444'
});
});
</script>

</head>
<body>

<div id="randomize">
<span><a href="#1">Child 1</a></span>
<span><a href="#2">Child 2</a></span>
<span><a href="#3">Child 3</a></span>
<span><a href="#4">Child 4</a></span>
<span><a href="#5">Child 5</a></span>
<span><a href="#6">Child 6</a></span>
<span><a href="#7">Child 7</a></span>
<span><a href="#8">Child 8</a></span>
<span><a href="#9">Child 9</a></span>
<span><a href="#10">Child 10</a></span>
</div>



</body>
</html>

/* style.css */

#container {
border: 1px solid #AAA;
box-shadow:1px 0px 3px #444;
width:150px;
height:180px;
white-space:normal;
overflow:hidden;
}
}
#randomize {
padding:10px;
margin:0;
padding:0;
}
#randomize span {
list-style:none;
margin:0;
padding:5px 2px;
display:block;
font-weight:bold;
font-size:22px;
width:auto
}
#randomize span a {
color:inherit;
text-decoration:inherit;
}
.startBtn {
border: 1px solid #AAA;
width: 152px;
box-shadow: 1px 1px 3px #444;
margin: 0px;
padding: 2px;
}

/*
randomize.jQuery.js

Code by Chris Watson
Business site: http://www.wattzup.com
Blog: http://www.iknowtec.com
Twitter: @cwatsonknowstec

Realeased under the GNU General Public License http://www.gnu.org/licenses/gpl.html
*/

(function($){
 $.fn.randomize = function(options) {

  var defaults = {
   oddBG: '#000',
   oddFG: '#fff',
   evenBG: '#fff',
   evenFG: '#000',
   startButtonClass: 'startBtn',
   startButtonTxt: 'Start',
   direction: 'bottomToTop',
   containerID: 'container',
   styleSheet: 'style.css',
  };
  var options = $.extend(defaults, options);
  
  if (this.length > 1){
        this.each(function() { $(this).myPlugin(options) });
        return this;
    }

	obj = $(this);
	
	// Build the necessary elements
	
	obj.wrap('<div id="'+ options.containerID +'">');
	$('#' + options.containerID).after('<button class="' + options.startButtonClass + '" >' + options.startButtonTxt + '</button>');
	
	//Set CSS styles
	obj.find('span').filter(':odd').css({ 'backgroundColor':options.oddBG,'color':options.oddFG });
	obj.find('span').filter(':even').css({ 'backgroundColor':options.evenBG,'color':options.evenFG });
	
	
	$('head').append('<link rel="stylesheet" href="' + options.styleSheet + '" type="text/css" />');
	
	setVars = function() {
	speed = Math.floor(Math.random() * (100 - 50 + 1) + 50);
	timeout = Math.floor(Math.random() * (7000 - 2000 + 1) + 2000);
	}
	

	$('.' + options.startButtonClass).click(function() {
	setVars();
	startFunct();
	});


	loopFunct = function() {
	if (options.direction == 'bottomToTop') {
	obj.find('span:first-child').appendTo($(obj));
	}
	else if (options.direction == 'topToBottom') {
	obj.find('span:last-child').prependTo($(obj));
	}
	}

	startFunct = function() {
	looping = setInterval("loopFunct()",speed);
	setTimeout("stopFunct()",timeout);
	$('.'+options.startButtonClass).hide();
	}

	stopFunct = function() {
	clearInterval(looping);
	resultFunct();
	$('.'+options.startButtonClass).show();
	}

	resultFunct = function() {
	if (obj.find('span:nth-child(3) a').length > 0) {
	window.location = obj.find('span:nth-child(3) a').attr('href');
	}
	else {
	alert('No Link...');
	}
	}

 };
})(jQuery);

Taywin 312 Posting Virtuoso

13 Years Ago

Just a quick question.

In line 48 and 49, why do you need to do the arithmetic on the multiplied values? Both values in these lines are constant.

/*
Line 48...
Math.floor(Math.random() * (100 - 50 + 1) + 50);
  the same as
Math.floor(Math.random() * 51 + 50);
  the same as
Math.floor(Math.random() * 51) + 50;
*/

PS: Not sure about the purpose of this post. Do you want people to make comments for improvement, or do you want to leave it on the forum so other people who may be interested in would pick it up for their own purpose?

PSS: I am sorry that the sample I posted here is too much. It is just to show how it could be displayed.

Edited 13 Years Ago by Taywin because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.