SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resetting Variables in a Fading script

    Hey guys I have some code that I have been playing with and changing here there and everywhere with the help of sitepoint people The code works as it should but the problem im having is that im setting some variables to yes after a certain action has been performed then doing a check to see if its yes or no, when I get to the end of my script I need to reset the variable to no but I cant seem to get it to work correctly. Here is my code:

    HTML Code:
    function fade(divid1, divid2, divid3, headingid, hideid1, hideid2, hideid3) 
    {
    
    	var div = document.getElementById(divid1);
    	var div2 = document.getElementById(divid2);
    	var div3 = document.getElementById(divid3);
    	
    	if (!div.unfade) div.unfade = "no";
    	var unfade = div.unfade;
    	
    	var heading = document.getElementById(headingid);
    	
    	var hide1 = document.getElementById(hideid1).style;
    	var hide2 = document.getElementById(hideid2).style;
    	var hide3 = document.getElementById(hideid3).style;
    
    	var startOpacity = 1.0;
    	var targetOpacity = .1;
    	var midOpacity = .4;
    	
    	if(div.style.opacity != undefined) //FF1.0.7--opacity: .9;
    	{
    		var actualOpacity = parseFloat(div.style.opacity) || startOpacity;
    		var headingactualOpacity = parseFloat(heading.style.opacity) || startOpacity;
    		
    		if(unfade == "no" && actualOpacity > targetOpacity)
    		{
    			div.style.opacity =  actualOpacity - .02; //fade it
    			heading.style.opacity = headingactualOpacity - .02;
    			div2.style.opacity =  startOpacity; //fade it
    			div3.style.opacity =  startOpacity; //fade it
    			
    			setTimeout("fade('" + divid1 + "', '" + divid2 + "', '" + divid3 + "', '" + headingid + "', '" + hideid1 + "', '" + hideid2 + "', '" + hideid3 + "')", 50);  //call this function again in 50 milliseconds
    
    		}else{
    		
    			unfade = "yes";
    			div.unfade = "yes";
    			
    		}
    		
    		if (unfade == "yes" && actualOpacity < midOpacity) {
    		
    			div.style.opacity = actualOpacity + .02; //fade it
    			setTimeout("fade('" + divid1 + "', '" + divid2 + "', '" + divid3 + "', '" + headingid + "', '" + hideid1 + "', '" + hideid2 + "', '" + hideid3 + "')", 50);
    			hide1.display = "block";
    			hide2.display = "none";
    			hide3.display = "none";
    			
    		}
    		
    		if (unfade == "yes" && headingactualOpacity < startOpacity) {
    		
    			heading.style.opacity = headingactualOpacity + .01;
    			setTimeout("fade('" + divid1 + "', '" + divid2 + "', '" + divid3 + "', '" + headingid + "', '" + hideid1 + "', '" + hideid2 + "', '" + hideid3 + "')", 100);
    			
    		}
    		
    	}
    
    }
    I have tried adding div.unfade = "no" to the last if statement after the setTimeout but this does not work. Any ideas?

    Thanks in advance
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about a quick statement at the end like this?:
    Code:
    unfade = (unfade === "yes") ? "no":"yes";

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ill give it a go, but the problem is that the script will call the function on the setTimeout() and get to the end and I think it will cause an infinite loop, ill give it a go when i get to work tomorrow though
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well ive just tried that and it had no effect so i changes it from unfade to div.unfade and to crashed the browser.
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  5. #5
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alrighty - there were a couple of issues with your script:
    1. The settimeout function allows the remainder of your fade function to run
    2. This causes some of the other settimeouts to trigger at odd times
    3. Which causes some flickering...
    4. And there's no predictable way to reset the unfade var

    Anyway, I've rewritten some things. This has only been 'slightly' tested (I just made sure things worked in firefox) and it's not the "only" or "best" way to do things - it's just what I came up with.

    here you go. You can paste this into an empty file, save it as html and run it to see
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Testing</title>
    <style type="text/css">
    div {
    	width:10em;
    	height:10em;
    	float:left;
    	margin-right:1em;
    }
    </style>
    <script type="text/javascript">
    function $(arg) {
    	return document.getElementById(arg);
    }
    
    var divArgs = {};
    var timer = null;
    
    function fade(d1,d2,d3,h1,h2,h3,hd) {
    	divArgs = {
    			d1:$(d1).style,
    			d2:$(d2).style,
    			d3:$(d3).style,
    			h1:$(h1).style,
    			h2:$(h2).style,
    			h3:$(h3).style,
    			hd:$(hd).style,
    			unfade:false
    		};
    	timer = window.setInterval("showHide()",50);
    }
    
    function showHide() {	
    	var startOpacity = 1.0, targetOpacity = .1, midOpacity = .4;
    	var d = divArgs; //convenience
    	var dActual = parseFloat(d.d1.opacity) || startOpacity;
    	var hActual = parseFloat(d.hd.opacity) || startOpacity;
    	if(!d.unfade && dActual > targetOpacity) {
    		d.d1.opacity =  dActual - .02; //fade it
    		d.hd.opacity = hActual - .02;
    		d.d2.opacity =  startOpacity; //this doesn't do anything - why is it here?
    		d.d3.opacity =  startOpacity; //this either...
    	} else {
    		d.unfade = true;
    	}
    	if (d.unfade && (dActual < midOpacity || hActual < startOpacity)) {
    		d.d1.opacity = (dActual < midOpacity) ? dActual + .02 : dActual; //make it reappear
    		d.hd.opacity = (hActual < startOpacity) ? hActual + .01 : hActual;
    		d.h1.display = "block";
    		d.h2.display = "none";
    		d.h3.display = "none";	
    	} else if (d.unfade && dActual >= midOpacity && hActual >= startOpacity) {
    		window.clearInterval(timer);
    		d.unfade = false;
    	}
    }
    window.onload = function() {
    	$('activate').onclick = function() {
    		fade("d1","d2","d3","h1","h2","h3","hd");
    	};
    };
    </script>
    </head>
    <body>
    <div id="d1" style="background-color:#f00;">Div 1</div>
    <div id="d2" style="background-color:#0f0;">Div 2</div>
    <div id="d3" style="background-color:#00f;">Div 3</div>
    <div id="h1" style="background-color:#c00;">Hide 1</div>
    <div id="h2" style="background-color:#0c0;">Hide 2</div>
    <div id="h3" style="background-color:#00c;">Hide 3</div>
    <div id="hd" style="background-color:#a00;">Heading</div>
    <div style="clear:both;"><button type="button" id="activate">Start Fade</button></div>
    </body>
    </html>
    The major differences are the use of the setInterval method of the window object and the use of a 'divArgs' object to hold variables (it was too much of a pain to pass all that data with the settimeout functions).

    I feel like this is more efficient for a couple of reasons:
    1. There are fewer document lookups when the script runs
    2. You don't have to worry about passing data to the settimeout function


    Give it a shot - I hope this does what you're looking for.

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your time in re-writing the script, if I could rec you I would I have it working now using the original code but instead of having the function run when the user clicks on a button, the button is a link that passes some variables and then I do a body onload.

    Thanks for the time
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"


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
  •