Need to know what script make this work. Help Please

JavaScript
1

I need to know what script can be used to change the following objects when Trick Button is clicked. The items are to be random and i already have a list i just don’t know how to make them appear random. I know this works because a buddy made a page similar but won’t tell me how he did it… All the help is great. I think I have been reading articles all night so far I’m beat.

</head>
<body>

<div id=“blackboard”>
<div id=“stance”>Regular</div>
<div id=“flip”>360 shov-it</div>
<div id=“direction”>Backside</div>
<div id=“grind”>Boardslide</div>
<div id=“ender”>Laser flip</div>
<div id=“trick_button” onClick=“location.reload(true);”></div>

2

In the page first put only this:

<div id=“blackboard”>
</div>
<div id=“trick_button” onClick=“location.reload(true);”></div>

You can use something like <body onload=“showRandomDivs()”> to invoke a javascript function when the page loads. In showRandomDivs() function you have to randomly add child elements to the ‘blackboard’ div using DOM appendChild() method. You can get more details here: http://w3schools.com/jsref/dom_obj_all.asp

3

Ok so how would i put this together. I kinda understand but I’m new to css this unfortunately looks greek to me :confused: And thank you for replying.

4

You can do it this way as well:

Here’s a fiddle to try it out: http://jsfiddle.net/bhuVH/


<!DOCTYPE html>
<html>
	<body>
		<button id="randomTrickButton">Randomize Tricks</button>
		<div id="blackboard"></div>
		<script>
			// From http://stackoverflow.com/questions/962802/is-it-correct-to-use-javascript-array-sort-method-for-shuffling/962890#962890
			function shuffle(array) {
				var tmp, current, top = array.length;

				if(top) while(--top) {
					current = Math.floor(Math.random() * (top + 1));
					tmp = array[current];
					array[current] = array[top];
					array[top] = tmp;
				}
				return array;
			}
			
			var trickArray = [], 
				i,
				bBoard = document.getElementById('blackboard'),
				trickBtn = document.getElementById('randomTrickButton');

			trickArray.push({id:'stance', txt:'Regular'});
			trickArray.push({id:'flip',txt: '360 shov-it'});
			trickArray.push({id:'direction',txt:'Backside'});
			
			// EventListener for non-IE browsers
			trickBtn.addEventListener(
				'click', 
				function(e) {
					bBoard.innerHTML = '';
					trickArray = shuffle(trickArray);
					for( i = 0; i < trickArray.length; i++ ) {
						var t = trickArray[i];
						bBoard.innerHTML += '<div id="' + t.id + '">' + t.txt + '</div>';						
					}
				}, 
				false
			);
		</script>
	</body>
</html>
5

Now I like the one that posted but will have to use that for something else.

Here is an example of what I’m looking at.

I need the left words to be stationary and the right words to be random.

Example of random amounts.
Stance: Nollie, Regular
Flip: Shov-it, Impossible, Bigspin,
Direction: Backside, Frontside,
Grind/Slide: 50-50, Feeble Grind, N
Ender: Heelflip, Bigflip, Bigspin, Kickflip,

I will say I’m playing with that thing you posted it helps allot more than trying to get Dreamweaver to work in demo. I hate the fact i know only so little or basic of just html and nothing of css or java.

6

picture awaiting approval… can you use imageshack or similar and post the link?

if I remember correctly, a nollie isn’t a stance…

7


http://imageshack.us/photo/my-images/685/screenshot20111023at815.png/

Well its more Fingerboarding than Skateboarding so its a little differ. lol Thanks for your help so far.

8

The above example would have to be tweaked but you can use similar code to make this happen.