SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Need to know what script make this work. Help Please.....

    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. #2
    SitePoint Member diginetwork's Avatar
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so how would i put this together. I kinda understand but I'm new to css this unfortunately looks greek to me And thank you for replying.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can do it this way as well:

    Here's a fiddle to try it out: http://jsfiddle.net/bhuVH/
    HTML Code:
    <!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. #5
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Screen Shot 2011-10-23 at 8.15.17 PM.png

    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. #6
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    picture awaiting approval.. can you use imageshack or similar and post the link?

    if I remember correctly, a nollie isn't a stance....

  7. #7
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    http://imageshack.us/photo/my-images...1023at815.png/

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

  8. #8
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ahillworks View Post
    I need the left words to be stationary and the right words to be random.
    The above example would have to be tweaked but you can use similar code to make this happen.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •