Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    javascript and opacity

    Hey all, I found this code but don't fully understand it. Can anyone take a brief moment to explain what is occuring in the clearMenu, setOpacity and fadeMenu functions:
    Code:
    // configuration variables
    var timeout   = 250; // milliseconds
    var fadeSpeed = 500;  // milliseconds
    var useFade   = true;
    
    // timers array
    var timers = new Array();
    
    // state array -- by id, value = active, false = inactive
    var state = new Array();
    
    // lastOpacity: used to prevent multiple timers from making the fade flicker
    var lastOpacity = new Array();
    
    // MSIE has its own way of setting opacity, so we have to detect it
    // all the other major browsers support the standard DOM opacity property
    var msie = false;
    if( navigator.appName == "Microsoft Internet Explorer" ) msie = true;
    
    // entry point: set element to visible and clear its timers
    function setMenu( id )
    {
        var e = document.getElementById(id); //When the user rolls over one of horizontal menu items, the setMenu method is called and we pass in as an argument, the id of the associated ul element, which we then set its visibility attribute to visible.
        e.style.visibility = "visible";
        state[id] = true;
        setOpacity( id, 1 );
        if(timers[id]) {
            clearTimeout(timers[id]);
            timers[id] = undefined;
         }
    }
    
    // set element to hidden and reset its opacity
    // typically called by a timer
    // may be used as an entry point to bypass timers and fades
    function hideMenu( id )
    {
        var e = document.getElementById(id);
        state[id] = false;
        e.style.visibility = "hidden";
        if(useFade) setOpacity( id, 1 );
    }
    
    // entry point: hide the menu using fade (if enabled)
    function clearMenu( id )
    {
        if(useFade) timers[id] = setTimeout( 'fadeMenu( "' + id + '" )', timeout );
        else timers[id] = setTimeout( 'hideMenu( "' + id + '" )', timeout );
    }
    
    // set the opacity
    // special support for MSIE
    function setOpacity( id, value )
    {
        var e = document.getElementById(id);
    
        if(state[id]) value = 1;    // menu fade was interrupted
        else if(lastOpacity[id] && (lastOpacity[id] < value)) value = lastOpacity[id];  // prevents flicker if multiple timers set
        
        if(msie) e.style.filter = 'alpha(opacity=' + value * 100 + ')'; // MS Internet Explorer
        else e.style.opacity = (value);     // Everyone else (standard DOM)
    
        if( value == 0 ) hideMenu( id );    // when all faded, reset the menu state
        lastOpacity[id] = value;
    }
    
    // fade a menu
    // typically called by a timer
    function fadeMenu ( id )
    {
        var start = 0;
        var end = 0;
        var s = Math.round( fadeSpeed / 25 );   // fade in 25ms increments
        var timer = 0;
        var i;
    
        state[id] = false;
    
        for( i = s; i >= 0 ; i-- ) {
            setTimeout( "setOpacity('" + id + "'," + ( i / s ) + ")", timer++ * fadeSpeed / s )
        }
    }
    Thanks for any response.

  • #2
    New Coder
    Join Date
    May 2010
    Posts
    20
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi,

    ClearMenu - This function is hiding the menu if it there with some fadding effects.
    SetOpacity -The function is giving fadding effects to menu using opacity property of css.
    FadeMenu - This function is calling fadding effects for menu on given time through setOpacity function.

    Thanks
    --

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    More detailed explanation ... see my comments start with //##

    hope it makes more sense to you now

    Code:
    //## this functions closes the menu
    function clearMenu( id )
    {
        //## this checks if it needs to fade the menu out if so it will run the 'fadeMenu' function in 'timeout' milliseconds :p
        if(useFade) timers[id] = setTimeout( 'fadeMenu( "' + id + '" )', timeout );
        //##otherwise if it does not need to fade the menu out, it will simply hide the menu (close it), it will do this by running the function 'hideMenu' in 'timeout' amount of milliseconds
        else timers[id] = setTimeout( 'hideMenu( "' + id + '" )', timeout );
    }
    
    // set the opacity
    // special support for MSIE
    //## this function sets the opacity, or the transperancy of an item, the 'value' is a value betwen 0 & 100% where 0% is fully transperant, and 100% is not transperant at all. It uses this function to fade it out. It will slowly change the opacity from 100% to 0%. Hence to fade the item, it will run this function many times
    function setOpacity( id, value )
    {
        //## This simply gets the element that it needs to change the opacity off that has an ID of 'id'
        var e = document.getElementById(id);
    
        //## this simply sees if the opacity or the fading action was interupted, if so, it will simply make the item visible or set it to have no transperancy, here it is important to note that 1=100%
        if(state[id]) value = 1;    // menu fade was interrupted
        //## otherwise, it will see if the the function has jumped the gun so to speak. Sometimes things go wrong and functions are called in the wrong order :p. It will make sure that the fading is happening in order. So it compares the last opacity set with the current one. If it the previous opacity value is smaller than the current one, it will simply ignore the current one and use the previous opacity.
        else if(lastOpacity[id] && (lastOpacity[id] < value)) value = lastOpacity[id];  // prevents flicker if multiple timers set
        
        //## IE transperancy/opacity works different from Firefox/Chrome... so it just sets the opacity here depending on the browser... IE (Internet Explorer) is represented via 'msie'
        if(msie) e.style.filter = 'alpha(opacity=' + value * 100 + ')'; // MS Internet Explorer
        else e.style.opacity = (value);     // Everyone else (standard DOM)
    
        //##if the item is fully transperant, it will simply just hide or close the menu as no more fading is required
        if( value == 0 ) hideMenu( id );    // when all faded, reset the menu state
    
        //## stores the last opacity value to compare with the next one
        lastOpacity[id] = value;
    }
    
    // fade a menu
    // typically called by a timer
    //## this function fades the menu
    function fadeMenu ( id )
    {
        //##here a few variables are set
        var start = 0;
        var end = 0;
        var s = Math.round( fadeSpeed / 25 );   // fade in 25ms increments
        var timer = 0;
        var i;
    
        //## we light a flare saying the the fading process has started. This is to check if the fading process is interupted
        state[id] = false;
    
        //## here a loop is run, this loop is a loop where the function starts with full opacity, reduces everytime it runs through the loop until it gets to zero
        for( i = s; i >= 0 ; i-- ) {
            //## the opacity function is executed, and to avoid it from happing to fast it is set to run in "time++*fadespeed/s" miliseconds. This milisecondes is an exponetial formula so to speak that will run slower and slower the closer the opacity gets to 0%
            setTimeout( "setOpacity('" + id + "'," + ( i / s ) + ")", timer++ * fadeSpeed / s )
        }
    }

  • Users who have thanked xaltednet for this post:

    johnmerlino (05-14-2010)

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Thanks. It seems that the start and end variables are never used. I copied the entire javascript file in the initial post and the only other reference to it is in the html:
    Code:
    <li><a href="products.html" onMouseOver="setMenu('menuSubOne')" onMouseOut="clearMenu('menuSubOne')">About Us</a></li>
    Do you see any purpose for the start and end variables?

    Also, why do we concatenate strings to the id in the fadeMenu function:

    setTimeout( 'fadeMenu( "' + id + '" )', timeout );

    Thanks for any response.
    Last edited by johnmerlino; 05-14-2010 at 02:42 PM.


  •  

    Tags for this Thread

    Posting Permissions

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