Slot machine like random link choser

By sun-tzu on Sep 29th, 2011 10:51 am

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);

8 Months 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.

Taywin

Posting Virtuoso

1,727 posts since Apr 2010

Reputation Points: 229

Solved Threads: 239

This article has been dead for over three months

You