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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts

    how to preload navbar?

    Hi, my nav it s a nice drop down menu using mootools. My problem is that after u hover on a main item it takes awhile for the drop down to fully load. What would alleviate this problem? a preloader? im using the altest version of mootools btw


    here is the site. www.kumarafoundation.com


    Javascript
    Code:
    /*
    Script: dropMenu.js
    	Drop menu going Nth levels
    
    License:
    	MIT-style license.
    
    Author:
    	Copyright (c) 2008 Chris Esler, <http://www.chrisesler.com/mootools>
    
    */
    // Also known as IE fix
    var TridentFix = new Class({
    	tridentFix: function(item){
    		item.addEvents({
    			'mouseover':function(){
    				this.addClass('iehover');
    			},
    			'mouseout':function(){
    				this.removeClass('iehover');
    			}
    		});
    	}
    });
    
    
    var DropMenu = new Class({
    	Implements: [Options,TridentFix],
    	/* 
    		don't know about options yet
    		but set it up anyways just in case 
    	*/
    	options: {
    		mode: 'horizontal'
    	},
    	menu: null,
    	initialize: function(menu,options){
    		if(options) this.setOptions(options);
    	
    		this.menu = $(menu);
    		
    		// grab all of the menus children - LI's in this case
    		var children = this.menu.getChildren();
    		
    		// loop through children
    		children.each(function(item,index){
    			// declare some variables 
    			var fChild, list;
    			
    			/* 
    				fChild = first child - which should be an A tag
    				list = submenu UL
    			*/
    			fChild = item.getFirst();
    			list = fChild.getNext('ul');
    			
    			// check if IE, if so apply fix
    			if(Browser.Engine.trident) this.tridentFix(item);
    			
    			// if there is a sub menu UL
    			if(list){
    				item.mel = list; // pel = parent element
    				list.pel = item; // mel = menu element
    				new SubMenu(list); // hook up the subMenu
    			}
    		},this); // binding loop to this object for trident fix
    
    	}	
    });
    
    
    
    var SubMenu = new Class({
    	Implements: [Options,TridentFix],
    	/* 
    		don't know about options yet
    		but set it up anyways just in case 
    	*/
    	options: {
    		mode: 'vertical'
    	},
    	menu: null, // storage for menu object
    	depth: 0, // storage for current menu depth
    	initialize: function(el,depth,options){
    		if(options) this.setOptions(options); // set options
    		if(depth) this.depth = depth;// set depth
    		
    		this.menu = el; //attach menu to object
    		
    		if(this.depth == 0)	this.menu.addClass('submenu'); // class for first level
    		if(this.depth >= 1)	this.menu.addClass('sub_submenu'); // class for deeper levels - in case :P
    		
    		this.menu.fade('hide'); // set menu to hid
    
    		/*
    			hook up menu's parent with event
    			to trigger menu
    		*/
    		this.menu.pel.addEvents(this.parentEvents); 
    		
    		// get menu's child elements
    		var children = this.menu.getChildren();
    			
    		// loop through children
    		children.each(function(item,index){
    			// declare some variables 
    			var fChild, list;
    			
    			/* 
    				fChild = first child - which should be an A tag
    				list = submenu UL
    			*/
    			fChild = item.getFirst();
    			list = fChild.getNext('ul');
    			
    			// check if IE, if so apply fix
    			if(Browser.Engine.trident) this.tridentFix(item);
    			
    			// if the menu item has a sub_submenu
    			if(list){
    				/*
    					create marker for menu item
    					that has a sub_submenu
    					this is to show persistence and 
    					where you are in the menu tree
    				*/
    				var count = new Element('span').set('html','\&raquo;').addClass('counter');
    				
    				item.adopt(count); // stuff it inside li
    				count.fade('hide'); // hide it
    
    				item.mel = list; // mel = menu element
    				item.count = count; // attach count accessor to menu item
    				list.pel = item; // pel = parent element
    				
    				// create new subMenu with depth incremented
    				new SubMenu(list,this.depth+1);
    			}
    		},this); //bound to this for trident fix
    	},
    	// menu parent mouse events
    	parentEvents: {
    		'mouseover': function(){
    			/*
    				if it has a count accesor
    				then fade it in 
    			*/
    			if(this.count) this.count.fade('in');
    			
    			// fade in menu
    			this.mel.fade('in');		
    		},
    		'mouseout': function(){
    			/*
    				if it has a count accesor
    				then fade it out 
    			*/
    			if(this.count) this.count.fade('out');
    			
    			// fade out menu
    			this.mel.fade('out');
    		}
    	}
    });

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    It fades in but that's the only thing I see that looks like delay though I'm using a T connection so that might be why

  • #3
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    Same here, only delay is the fade-in.
    Other thing [in FF3], when you go to the last position of the menu [on the right], the drop-down submenu gets cut off - well, not cut off, but you can't see it all unless you use that horizontal scrollbar that appears at the bottom of containing DIV [you can't use it anyway, since menu works onmouseover].

    Find your style declaration for #wrapper DIV and change overflow:auto to overflow:visible, should help.

  • Users who have thanked freedom_razor for this post:

    l Squid l (03-13-2009)

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Thanks it fixed! Now can i make it fade in faster? This site will aslo be viewed in India, their internet may not be as fast.

  • #5
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    Fading speed has nothing to do at all with internet connection speed. It only depends on the scripts you use, when they work, they're already fully downloaded on your PC [or your users'].

    Anyway, in a file mootools-1.2.1-core-nc.js, line 3098, look for this:
    Code:
    duration: 500,
    and change it to 100 for example. Makes that fading too fast to see.

  • Users who have thanked freedom_razor for this post:

    l Squid l (03-18-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
    •