SitePoint Sponsor

User Tag List

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

    Changing divs opacity gradually

    Hey guys, I have written this script:

    PHP Code:
    function fade() {

        var 
    div;
        var 
    zero "0.";

        
    div document.getElementById('featurebutton1');
        
        for (
    counter 99counter 1counter--) {
                
            
    div.style.opacity zero+counter;

        }
        

    This fades my div to the desired level, but I want it to do it a lot slower, any idea how I can pause it or something afer each iteration in the loop?

    I did try useing a self built pause function but it just paused at the start and then faded quickly.

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

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For that you need to use setTimeout() or setInterval() to call the function repeatedly instead of using a conventional for loop or while loop.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code doesn't work in IE6. There are some cross browser differences for opacity:

    IE6--> filter: alpha(opacity=50);
    range 0-100.

    FF1.0.7---> opacity: .8;
    range 0.0-1.0

    The basic setup for delaying the execution of a function when you want to execute the function over and over again until some condition is met is to call a setTimeout() inside the function. The setTimeout() will be called when a condition is still true, and then the setTimeout() will call the surrounding function again. When the conditon is no longer true, no more setTimeout()'s will be called and the function will not execute anymore.

    There can be some tricky issues when calling a setTimeout(), so if you encounter some problems when using one, don't tear your hair out too long; post your code and describe the problem.

    Code:
    function fade() 
    {
    
    	var div = document.getElementById('featurebutton1');
    	var startOpacity = 1.0;
    	var targetOpacity = .3;
    	
    	if(div.style.opacity != undefined) //FF1.0.7--opacity: .9;
    	{
    		var actualOpacity = parseFloat(div.style.opacity) || startOpacity;
    		/* Or, instead of the above line:
    		var actualOpacity = parseFloat(div.style.opacity);
    		if( isNaN(actualOpacity) ) //if there is no inline style attribute that specifies opacity
    		{
    			actualOpacity = startOpacity;
    		}
    		*/
    		
    		if( actualOpacity > targetOpacity)
    		{
    			div.style.opacity =  actualOpacity - .02; //fade it
    			setTimeout(fade, 50);  //call this function again in 50 milliseconds
    		}
    	}
    	else if(div.style.filter != undefined)  //IE6-- filter: alpha(opacity = 50);
    	{
    		//A layout style is required for filter style to work:
    		div.style.width = "100%";
    		
    		var actualOpacity;
    		if(div.style.filter=="") 	
    		{
    			actualOpacity = startOpacity * 100;
    		}
    		else
    		{
    			//get the number out of the string, e.g. 'alpha(opacity = 50)'
    			actualOpacity = div.style.filter.match(/\d+/)[0]; 
    		}
    		
    		if( actualOpacity > targetOpacity * 100)
    		{
    			div.style.filter =  "alpha(opacity=" + (actualOpacity - 2) + ")";
    			setTimeout(fade, 50);
    		}
    	}
    } 
    
    window.onload=function()
    {
    	fade();
    };
    Last edited by 7stud; Jan 18, 2007 at 06:00.

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the posts, I know that it doesnt work in IE yet, I wanted to get the bulk of the work done in Mozilla the get the IE stuffs sorted. Im gonna go and play with he setTimeout and so on ill post back when "uh i mean if" i have some problems
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  5. #5
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <body>
    
    <image id="img1" src="http://i2.sitepoint.com/graphics/encoding-sm.jpg" style="opacity:1;filter:alpha(opacity=100);"/>
    
    
    <script language="javascript" type="text/javascript">
    var FOImg1 = setInterval( "fadeOut('img1')", 100 );
    function fadeOut( id, int_id )
    {
    var image = document.getElementById( id );
    if( image.style.opacity > 0 )
    {
    var currOp = image.style.opacity;
    image.style.opacity = currOp - .1;
    image.style.filter = 'alpha(opacity=' + ( ( currOp - .1 ) * 100 ) + ')';
    } else { clearInterval( FOImg1 ) }
    }
    </script>
    Last edited by muazzez; Jan 23, 2007 at 13:43.

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

    Hi again, i have changed the script to meet my needs and its working great, so thanks. I'm trying to get it to fade in again straight after it has faded out but I keep crashing my browser because im getting it stuck in a nastly loop i think. Any chance you could show me some code to get on the right tracks?
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    The problem is coming up with an ending condition that will terminate the calling of setTimeout(). If you write something like this:
    Code:
    if( actualOpacity > targetOpacity * 100)
    {
    	div.style.filter =  "alpha(opacity=" + (actualOpacity - 2) + ")";
    	setTimeout(fade, 50);
    }
    else if(actualOpacity <= startingOpacity * 100)
    {
    	//increase opacity
    }
    then you will get stuck in an infinite loop. In fact, as soon as you increase the opacity once, it will then be above the targetOpacity, so the next time the function is called it will go down the first branch of the if statement and reduce the opacity. The user will see a button slowly fading out, then bumping up slightly in opacity, then becoming slightly more transparent....back and forth forever.

    So you need to set a flag to indicate when it's time to increase the opacity--and the if statement has to check for that flag. setTimeout() executes at global scope(= it can only see variables outside of function definitions), so you can define a flag variable in the global scope:
    Code:
    var reverseFade = "no";  //the function should fade out for now
    function fade()
    {
    
    }
    Then once the fade out effect has completed, you set the reverseFade flag to "yes":
    Code:
    if( reverseFade == "no" && actualOpacity > targetOpacity * 100)
    {
    	div.style.filter =  "alpha(opacity=" + (actualOpacity - 2) + ")";
    	setTimeout(fade, 50);
    }
    else 
    {
    	reverseFade= "yes";
    }
    After you set the reverseFade to "yes", the condition in the if statement will prevent the fade out effect from executing anymore.

    Next, you need to write the code to reverse the fade when the reverseFade flag is set to "yes":
    Code:
    if ( reverseFade=="yes" && actualOpacity < (startOpacity*100) )
    {
    	div.style.filter =  "alpha(opacity=" + (actualOpacity + 2) + ")";
    	setTimeout(fade, 50);
    
    }
    However, the first line there requires a slight alteration to the original code. This line in the original code:
    Code:
    actualOpacity = div.style.filter.match(/\d+/)[0];
    now creates a problem. match() returns a string, so actualOpacity is a string. That creates problems in this line:
    Code:
    div.style.filter =  "alpha(opacity=" + (actualOpacity + 2) + ")";
    If you try to do this:
    Code:
    div.style.filter = .... "30" + 2....;
    js converts the 2 to a string and you get "302"--not 32. It wasn't a problem in the original code because subtraction was involved:
    Code:
    div.style.filter = ....."100" - 2 ...;
    You can't subtract two strings in js, so coverting the 2 to a string wouldn't make sense. So js converts "100" to 100 and peforms the subtraction. On the other hand, when js sees: "100" + 2 that could mean you want to add two strings or perform arithmetic. js has to pick one, and it assumes you want to add two strings and hence converts 2 to "2" to produce "1002".

    So the line in the original code should be changed to:
    Code:
    actualOpacity = parseInt(div.style.filter.match(/\d+/)[0]);
    That way actualOpacity will be a number which you can use in arithmetic addition.
    Last edited by 7stud; Jan 18, 2007 at 19:50.

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, thanks ever so much for the code and in depth explanation, I understand fully . Im going to play around now and get it fading up, Thanks again
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so this is working really well now, and its doing what I want it to. I do have one small glitch that I'd like to try and get sorted out. If you click on one of the divs (i have 3) and then click another while the other function is still running it kinda stops the script and doesnt allow it to work again until you refresh. I think the problem might be that for each div I have a different function specified i.e fade1() fade2() fade3(). But i dont know.

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

  10. #10
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) This is a lesson in why defining global variables is bad:
    Code:
    var reverseFade = "no";  //the function should fade out for now
    function fade()
    {
    
    }
    What is happening is that the fade() function is reading and changing the value of that variable. If you click on three buttons, then all the button's fade() functions are reading and changing that variable at the same time, which messes things up. You could define three different reverseFade variables to work with three different fade() functions, but you should be able to write one function for all the elements.

    The first step is to move reverseFade inside fade(). But if you do this:
    Code:
    function fade() 
    {
    	var div = document.getElementById('featurebutton1');
    
    	var reverseFade = "no";
    	...
    }
    then every time a setTimeout() calls fade(), reverseFade will be set to "no". As a result, reverseFade will never be "yes", which is necessary to fade the div back into view. So you need to do something like this:
    Code:
    if(!reverseFade) reverseFade = "no";
    However that won't work either because reverseFade gets destroyed every time the function ends since it's a local variable, so reverseFade will once again always be set to "no". The solution is to attach a made up property to the div itself:
    Code:
    function fade() 
    {
    	var div = document.getElementById('featurebutton1');
    	
    	if(!div.reverseFade) div.reverseFade = "no";
    	...
    }
    In js, you can make up a property for any object, e.g the div element, and attach it to the object. The first time the function is called, the div won't have a property called reverseFade, and the code then creates the property and sets it to "no".

    2) Next, to make the function more general, you can specify the element's id as a function parameter:
    Code:
    function fade(elmtID) 
    {
    	var div = document.getElementById(elmtID);
    	
    	if(!div.reverseFade) div.reverseFade = "no";
    	....
    That way, you can call the fade() function on any element.

    3) The code I posted previously references reverseFade everywhere rather than div.reverseFade, so add this line:
    Code:
    function fade(elmtID) 
    {
    	var div = document.getElementById(elmtID);
    	
    	if(!div.reverseFade) div.reverseFade = "no";
    
    	var reverseFade = div.reverseFade;
    	....
    4) Then you have to tweak the if statements a little bit:
    Code:
    if( reverseFade == "no" && actualOpacity > targetOpacity * 100)  //if fade out should continue
    {
    	div.style.filter =  "alpha(opacity=" + (actualOpacity - 2) + ")";
    	
    	setTimeout("fade('" + elmtID +"')", 50);//first arg should look like "fade('featurebutton1')"
    }
    else if(reverseFade == "no" && actualOpacity <= targetOpacity * 100) //if fade out just finished
    {
    	reverseFade= "yes";  //allows entry into the block below to continue setTimeout()'s
    	div.reverseFade = "yes";  //changes the div's property so that it can be read next time
    }
    
     if ( reverseFade=="yes" && actualOpacity < (startOpacity*100) ) //if fade in should continue
    {
    	div.style.filter =  "alpha(opacity=" + (actualOpacity + 2) + ")";
    	setTimeout("fade('" + elmtID + "')", 50);  
    
    }
    else //effect is over; reset so that element can be clicked again
    	div.reverseFade = "no";  
    }
    One line that's worth examining a little closer is this one:
    Code:
    setTimeout("fade('" + elmtID +"')", 50);
    You might initially try this:
    Code:
    setTimeout("fade(elmtID)", 50);
    However, the setTimeout() executes at global scope, which means it can only see variables that are declared outside any function definition. Since there is no variable called elmtID that is declared outside any function definitions, that will produce an error because elmtID is undefined.

    But if you write it like this:
    Code:
    setTimeout("fade('" + elmtID +"')", 50);
    js first has to stitch together the string before it can execute that line. In order to stitch together the string, js has to grab the value of elmtID now. And elmtID is currently defined--it was passed as an argument to fade(). So, js first forms the string to produce "fade('featurebutton1')", and then the code is converted to:
    Code:
    setTimeout("fade('featurebutton1')", 50);
    As you can see there are no variables in the setTimeout(). So the setTimeout() doesn't have to look for any variables in the global scope when it executes.

  11. #11
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heh, I just use MooTools - it's a lot easier

  12. #12
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Goodness me. If you ever write a book, let me know cause I want to buy it Are you a teacher or something, you seem to have the knack for doing it. I'm going to go and play with my code and see what happens. I've added quite a few other bits as well to fade some text and fade other boxes out as a different one is clicked.

    Is there any limit to how many elements you can specify in a function i.e

    HTML Code:
    fade(div1, div2, heading, content1)
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  13. #13
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I have built my function and its doing what I need it do, the problem I'm having is that it throws errors when I try and assign a variable from the function saying that "div" has no element. Heres the code im using (only the fire fox part):

    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, 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, 50);
    			hide1.display = "block";
    			hide2.display = "none";
    			hide3.display = "none";
    			
    		}
    		
    		if (unfade == "yes" && headingactualOpacity < startOpacity) {
    		
    			heading.style.opacity = headingactualOpacity + .01;
    			setTimeout(fade, 100);
    			
    		}
    		
    	}
    Im calling the function with this line:

    HTML Code:
    <div id="featurebutton1" onClick="javascript:fade('featurebutton1', 'featurebutton2','featurebutton3', 'heading1', 'hide1', 'hide2', 'hide3');"><a href="#"><img src="../images/box2.jpg" alt="Mail Order"></a></div>
    Just to explain what they are supposed to do, in order:

    1) Div to fade
    2) Div to fadeout if this div is clicked on
    3) Second Div to fadeout if this div is clicked on
    4) Heading to fade in when this is clicked
    5) Content to display when this div is clicked
    6) Content to hide when this div is clicked
    7) Second lot of Content to hide when this div is clicked

    I have checked the names of the ids im passing to the function and they are correct but im stiull getting a "div" (or whatever hideid1 ect) has no properties. Any more ideas

    btw, thanks for your continued help
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  14. #14
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) What do you think this does:
    Code:
    onClick="javascript:fade(....)"
    2)
    it throws errors when I try and assign a variable from the function saying that "div" has no element.
    What line? Don't post questions about errors without posting the error and an indication in your code where the error is occurring, e.g.
    Code:
    var div = document.getElementById(divid1) //***ERROR***

  15. #15
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah the onclick javascript I just forgot to take out, I saw it in another function ive used and didnt know if it would make any difference so i tried it in there. The errors im getting are pointing to each on of the variables im assigning within the function at the start.

    HTML Code:
    var div = document.getElementById(divid1);
    var div2 = document.getElementById(divid2);
    var div3 = document.getElementById(divid3);	
    
    var heading = document.getElementById(headingid);
    
    var hide1 = document.getElementById(hideid1).style;
    var hide2 = document.getElementById(hideid2).style;
    var hide3 = document.getElementById(hideid3).style;
    These ones, but if insert static values into them rather than getting them form the function(here) part its works ok. Any ideas?
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  16. #16
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can we see the html just in case?

    Dave

  17. #17
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    setTimeout(fade, 50);
    You aren't sending any arguments to the fade() function. Remember that whole discussion in my previous post about the setTimout() line of code?
    One line that's worth examining a little closer is this one:
    Code:
    setTimeout("fade('" + elmtID +"')", 50);
    You might initially try this:
    Code:
    setTimeout("fade(elmtID)", 50);
    However, the setTimeout() executes at global scope, which means it can only see variables that are declared outside any function definition. Since there is no variable called elmtID that is declared outside any function definitions, that will produce an error because elmtID is undefined.

    But if you write it like this:
    Code:
    setTimeout("fade('" + elmtID +"')", 50);
    js first has to stitch together the string before it can execute that line. In order to stitch together the string, js has to grab the value of elmtID now. And elmtID is currently defined--it was passed as an argument to fade(). So, js first forms the string to produce "fade('featurebutton1')", and then the code is converted to:
    Code:
    setTimeout("fade('featurebutton1')", 50);
    As you can see there are no variables in the setTimeout(). So the setTimeout() doesn't have to look for any variables in the global scope when it executes.

  18. #18
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh im with you but I didnt think it needed it as it was erroring at the start of the script but now I think about the logic its using the function within the setTimeout function. Ok ill try again on monday.

    Thanks 7stud I really appreciate it
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  19. #19
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You make your first call to fade() here:
    Code:
    fade('featurebutton1', 'featurebutton2','featurebutton3', 'heading1', 'hide1', 'hide2', 'hide3'
    Inside fade() is the code:
    Code:
    setTimeout(fade, 50);
    That says, "Please execute the fade function for me in 50 milliseconds", which means in 50 milliseconds js does this:
    Code:
    fade();

  20. #20
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it , ill add that in on monday and let you know how it goes
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  21. #21
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hiya 7Stud or anyone else who looks

    I have made the changes and declared the function properly in each setTimeout and its working really well now, the only problem I have is that you can only run through each click once. So i have 3 buttons and you click 1, then 2 then 3 then the script stops working, now I presume this is because we have declared a variable to yes and therefore it stops but im not sure. Any ideas? Thanks for the continued efforts Heres the code I have:

    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);
    			
    		}
    		
    	}
    	else if(div.style.filter != undefined)  //IE6-- filter: alpha(opacity = 50);
    	{
    		//A layout style is required for filter style to work:
    		div.style.width = "100px";
    		
    		var actualOpacity;
    		if(div.style.filter=="") 	
    		{
    			actualOpacity = startOpacity * 100;
    		}
    		else
    		{
    			//get the number out of the string, e.g. 'alpha(opacity = 50)'
    			actualOpacity = parseInt(div.style.filter.match(/\d+/)[0]);
    
    		}
    		
    		if(unfade == "no" && actualOpacity > targetOpacity * 100)
    		{
    			div.style.filter =  "alpha(opacity=" + (actualOpacity - 2) + ")";
    			div2.style.filter =  "alpha(opacity=" + (startOpacity) + ")";
    			div3.style.filter =  "alpha(opacity=" + (startOpacity) + ")";
    			
    			setTimeout(fade, 50);
    		}else{
    		
    			unfade = "yes";
    			
    		}
    		
    		if (unfade == "yes" && actualOpacity < midOpacity) {
    		
    			div.style.filter =  "alpha(opacity=" + (actualOpacity + 2) + ")";
    			setTimeout(fade, 50);
    			hide1.display = "block";
    			hide2.display = "none";
    			hide3.display = "none";
    			
    		}
    	}
    } 
    "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
  •