www.webdeveloper.com
Results 1 to 4 of 4

Thread: Adding START and STOP to a script

  1. #1
    Join Date
    Nov 2008
    Posts
    2

    Adding START and STOP to a script

    Hi

    I want to adapt a snowfall script from Peter Gehrig but I'm stuck on how to do it.

    the code is :

    Code:
    <script> 
    // CREDITS: // Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved. 
    // Distributed by http://www.hypergurl.com // Permission given to use the script 
    on webpages provided that this notice remains as is. // Set the number of snowflakes 
    (more than 30 - 40 not recommended) var snowmax=35 // Set the colors for the snow. 
    Add as many colors as you like var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD") 
    // Set the fonts, that create the snowflakes. Add as many fonts as you like var 
    snowtype=new Array("Arial Black","Arial Narrow","Times","Comic 
    Sans MS") // Set the letter that creates your snowflake (recommended:*) var 
    snowletter="*" // Set the speed of sinking (recommended values range 
    from 0.3 to 2) var sinkspeed=0.6 // Set the maximal-size of your snowflaxes var 
    snowmaxsize=22 // Set the minimal-size of your snowflaxes var snowminsize=8 // 
    Set the snowing-zone // Set 1 for all-over-snowing, set 2 for left-side-snowing 
    // Set 3 for center-snowing, set 4 for right-side-snowing var snowingzone=3 /////////////////////////////////////////////////////////////////////////// 
    // CONFIGURATION ENDS HERE /////////////////////////////////////////////////////////////////////////// 
    // Do not edit below this line var snow=new Array() var marginbottom var marginright 
    var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new 
    Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) 
    var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) 
    var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random()) 
    return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.clientHeight 
    marginright = document.body.clientWidth } else if (ns6) { marginbottom = window.innerHeight 
    marginright = window.innerWidth } var snowsizerange=snowmaxsize-snowminsize for 
    (i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] 
    = 0.03 + Math.random()/10; snow[i]=document.getElementById("s"+i) snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)] 
    snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size 
    snow[i].style.color=snowcolor[randommaker(snowcolor.length)] snow[i].sink=sinkspeed*snow[i].size/5 
    if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) 
    {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} 
    if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} 
    snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx 
    snow[i].style.top=snow[i].posy } movesnow() } function movesnow() { for (i=0;i<=snowmax;i++) 
    { crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]); 
    snow[i].style.top=snow[i].posy if (snow[i].posy>=marginbottom-2*snow[i].size 
    || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){ if (snowingzone==1) 
    {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} 
    if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} 
    if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} 
    snow[i].posy=0 } } var timer=setTimeout("movesnow()",50) } for (i=0;i<=snowmax;i++) 
    { document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>") 
    } if (browserok) { window.onload=initsnow } </script>
    OK, I've moved the initsnow() call from the script and put it in a onclick event of a hyperlink:

    <a onclick=initsnow()>START</a>

    And that's fine, but I want to add a STOP option also. so how can I set an onclick event or something similar to stop the script.

    I have considered having the STOP link just re-load the page but its a bit messy.

    Looking forward to all your wonderful and ingenious ideas and suggestions!

  2. #2
    Join Date
    Apr 2008
    Location
    UK
    Posts
    76
    Unfortunately, that script seems to have broke when copied and pasted over here, hence all the comments and variable declarations mix horribly, and i'm not about to scroll through that wall of text to make it work

    However, "timer = setTimeout()" jumped out at me from that wall of text, so maybe try "<a onclick='clearTimeout(timer)'>Stop</a>".

    Ill have another look if I can have an easy-to-copy version of the script

  3. #3
    Join Date
    Apr 2008
    Location
    UK
    Posts
    76
    K, I managed to find the script on the internet and have modified it to stop / start....

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script>
    // CREDITS:
    // Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
    // Distributed by http://www.hypergurl.com
    // Permission given to use the script provided that this notice remains as is.
    
    // Set the number of snowflakes (more than 30 - 40 not recommended)
    var snowmax=35
    
    // Set the colors for the snow. Add as many colors as you like
    var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")
    
    // Set the fonts, that create the snowflakes. Add as many fonts as you like
    var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
    
    // Set the letter that creates your snowflake (recommended:*)
    var snowletter="*"
    
    // Set the speed of sinking (recommended values range from 0.3 to 2)
    var sinkspeed=0.6
    
    // Set the maximal-size of your snowflaxes
    var snowmaxsize=22
    
    // Set the minimal-size of your snowflaxes
    var snowminsize=8
    
    // Set the snowing-zone
    // Set 1 for all-over-snowing, set 2 for left-side-snowing 
    // Set 3 for center-snowing, set 4 for right-side-snowing
    var snowingzone=1
    
    ///////////////////////////////////////////////////////////////////////////
    // CONFIGURATION ENDS HERE
    ///////////////////////////////////////////////////////////////////////////
    
    
    // Do not edit below this line
    var snow=new Array()
    var marginbottom
    var marginright
    var timer
    var i_snow=0
    var x_mv=new Array();
    var crds=new Array();
    var lftrght=new Array();
    var browserinfos=navigator.userAgent 
    var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
    var ns6=document.getElementById&&!document.all
    var opera=browserinfos.match(/Opera/)  
    var browserok=ie5||ns6||opera
    
    function disableSnow() {
    	clearTimeout(timer);
    	
    	for(var i=0;i<snow.length;i++) {
    		document.body.removeChild(document.getElementById("s"+i));
    	}
    }
    
    function randommaker(range) {		
    	rand=Math.floor(range*Math.random())
        return rand
    }
    
    function initsnow() {
    	for (var i=0;i<=snowmax;i++) {
    		document.body.innerHTML += "<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>";
    	}
    	
    	if (ie5 || opera) {
    		marginbottom = document.body.clientHeight
    		marginright = document.body.clientWidth
    	}
    	else if (ns6) {
    		marginbottom = window.innerHeight
    		marginright = window.innerWidth
    	}
    	var snowsizerange=snowmaxsize-snowminsize
    	for (i=0;i<=snowmax;i++) {
    		crds[i] = 0;                      
        	lftrght[i] = Math.random()*15;         
        	x_mv[i] = 0.03 + Math.random()/10;
    		snow[i]=document.getElementById("s"+i)
    		snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
    		snow[i].size=randommaker(snowsizerange)+snowminsize
    		snow[i].style.fontSize=snow[i].size
    		snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
    		snow[i].sink=sinkspeed*snow[i].size/5
    		if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
    		if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
    		if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
    		if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
    		snow[i].posy=randommaker(6*marginbottom-marginbottom-6*snow[i].size)
    		snow[i].style.left=snow[i].posx
    		snow[i].style.top=snow[i].posy
    	}
    	movesnow()
    }
    
    function movesnow() {
    	for (i=0;i<=snowmax;i++) {
    		crds[i] += x_mv[i];
    		snow[i].posy+=snow[i].sink
    		snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
    		snow[i].style.top=snow[i].posy
    		
    		if (snow[i].posy>=marginbottom-6*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
    			if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
    			if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
    			if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
    			if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
    			snow[i].posy=0
    		}
    	}
    	timer=setTimeout("movesnow()",50)
    }
    
    if (browserok) {
    	window.onload=initsnow
    }
    </script>
    </head>
    
    <body>
    <p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p>
    <input type="button" onclick="disableSnow();"/>
    <input type="button" onclick="initsnow();"/>
    </body>
    </html>
    works for me.

    The changes are as follows....

    • Changed "var timer=setTimeout(...)" to just timer=setTimeout : we don't want this timeout to use the global variable defined so we can clear it with clearTimeout();
    • Moved the part of the script that adds the snow flakes to init, so the snowflakes can be added back again after the user stops the snowflakes
    • Created the function disableSnow(), which clears the timeout, and removes all snowflakes from the screen.

  4. #4
    Join Date
    Nov 2008
    Posts
    2
    Hi CuppyTea

    Thanks for that - just used it and it works a treat.

    Marry Christmas

    Vat

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles