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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Mootools: hide, show Div contents

    Okay, So i have a nice menu which shows and hides divs to change the page content.
    however If I click on a multiple menu items quickly, I get a stacking up of divs, or multiple divs showing themselves in the window.
    I'm trying to implement a kind of delay so an effect must take place only when the one proceeding it has finished. But its probing very tricky.
    Here is the source of it so far.

    Code:
    var showFunction = function(e) {
    	$$('.hidden').setStyles({
    		'visibility': 'hidden',
    		'opacity': 0
    	
    	});
    	this.start({'visibility': 'visible','opacity': 1 });
    
    }
    
    
    var contentHome = $('Content-Home');
     var contentAbout = $('Content-About');
     var contentContact= $('Content-Contact');
     
     contentHome = new Fx.Morph(contentHome, { link: 'chain' });
     contentAbout = new Fx.Morph(contentAbout, {link: 'chain' });
     contentContact = new Fx.Morph(contentContact, {link: 'chain' });
     
     $('Home').addEvent('click', showFunction.bind(contentHome));
     $('About').addEvent('click', showFunction.bind(contentAbout));
     $('Contact').addEvent('click', showFunction.bind(contentContact));

  • #2
    New Coder
    Join Date
    Aug 2009
    Location
    London, England
    Posts
    21
    Thanks
    0
    Thanked 3 Times in 3 Posts
    the Fx class supports cancel:

    http://mootools.net/docs/core/Fx/Fx#Fx:cancel

    hence you can stop the instances of all morphs like:

    contentHome.cancel();
    contentAbout.cancel();
    // etc.

    better yet, record which one is running into a globa variable by passing reference to the Fx instance to some var like

    PHP Code:
    var runningAnimation falseshowFunction = function() {
        if (
    runningAnimation// may need to tweak this for the first run instance.
             
    runningAnimation.cancel();

        
    // this is not optimal on a menu with mouseover when rapid movement can cause cpu lag. 
        // cache the $$(".hidden") into a variable so it does not traverse dom all the time. 
        // another thing, if .hidden is all div, use "div.hidden" as selector. 
        // if all hidden are children of a layer called "mainContent", use in _global scope_ 
        // var hid = $("mainContent").getElements("div.hidden"); ... hid.setStyles( ... );
        
    $$('.hidden').setStyles({
            
    'visibility''hidden',
            
    'opacity'0
        
    });

        
    this.start({'visibility''visible','opacity'});

        
    runningAnimation this// store last running animation so it can be stopped.
    }; 
    to do a delay is also possible - check reference = function.delay(ms, scope); and $clear(reference); - you can clear effect if mouse did not stay on top long enough etc.

    good luck
    Last edited by Dimitar; 08-28-2009 at 11:58 PM.

  • Users who have thanked Dimitar for this post:

    Sugz (09-21-2009)


  •  

    Posting Permissions

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