jQuery nav not responding

Discussion in 'jQuery' started by cesarcesar, Mar 11, 2011.

  1. #1
    I'm building a navigation that is built heavily on jQuery. I have it working as needed except that when mousing over links to quickly it spikes the processor and the navigation hangs. By hangs i mean it stops working and even the links will not show rollover states. I thought it was just a matter of adding a stop() but this changed nothing. Any ideas?

    Here it is online http://sb.cesarvillaca.com/nav/nav.html

    The code is below.

    			
    <div id="ProductsNav-ov" style="display:none;"></div>
    
    <div id="main-nav">
    
    <ul>
    	<li class="mainnav-click" id="ProductsNav">PRODUCTS</li>
    </ul>
    
    <script type="text/javascript">
    <!--
    $(function() {
    
    	$('.mainnav-click').mouseenter(function() { 
    		//alert($(this).attr('id'));
    		buildNav($(this).attr('id'));
    	});
    
    });
    
    function buildNav(nav,sub){
    
    	//alert(nav);
    
    	var Shredders = new Array({
    		Deskside: '',
    		Professional: '',
    		Commercial: '',
    		Government_Approved: '',
    		Supplies: ''
    	});
    
    	var Records_Storage = new Array({
    		Storage_Drawers: '', 
    		Storage_Boxes: '',
    		Earth_Series: '',
    		Classroom_Organization: '',
    		Moving_Boxes: '',
    		Magazine_Holders: '',
    		Sorters: ''
    	});
    
    	var Workspace_Ergonomics = new Array({
    		Keyboard_Trays_and_Drawers: '', 
    		Palm_and_Wrist_Supports: '',
    		Monitor_Supports: '',
    		Back_Supports: '',
    		Foot_Supports: '',
    		Copyholders: '',
    		Monitor_Filters: '',
    		Machine_Stands: ''
    	});
    
    	var Workspace_Organization = new Array({
    		Desk_Organizers: '', 
    		Cubicle_Organizers: '',
    		Literature_Organizers: '',
    		Mail_Carts: ''
    	});
    
    	var Computer_Accessories = new Array({
    		Keyboards_and_Mice: '', 
    		Mouse_Pads: '',
    		Cleaning_Supplies: '',
    		Power_Protection: '',
    		Keyguards: ''
    	});
    
    	var CD_DVD_Products = new Array({
    		Jewel_Cases_and_Inserts: '', 
    		Desktop: ''
    	});
    
    	var Binding_Machines = new Array({
    		Plastic_Comb: '', 
    		Wire: '',
    		Thermal: '',
    		Supplies: ''
    	});
    
    	var Laminating_Machines = new Array({
    		Personal: '', 
    		General_Office: '',
    		Supplies: ''
    	});
    
    	var Cutters_and_Trimmers  = new Array({
    		Cutters: '',
    		Rotary_Trimmers: '',
    		Supplies: ''
    	});
    
    	var Mobile_Accessories  = new Array({
    		Mobile_Accessories: ''
    	});
    
    	var Refurbished_Shredders  = new Array({
    		Refurbished_Shredders: ''
    	});
    
    	var Where_To_Buy  = new Array({
    		Where_To_Buy: ''
    	});
    
    	var ProductsNav = {
    		"Shredders": Shredders, 
    		"Records_Storage": Records_Storage, 
    		"Workspace_Ergonomics": Workspace_Ergonomics, 
    		"Workspace_Organization": Workspace_Organization, 
    		"Computer_Accessories": Computer_Accessories, 
    		"CD_DVD_Products": CD_DVD_Products, 
    		"Binding_Machines": Binding_Machines, 
    		"Laminating_Machines": Laminating_Machines, 
    		"Cutters_and_Trimmers": Cutters_and_Trimmers, 
    		"Mobile_Accessories": Mobile_Accessories, 
    		"Refurbished_Shredders": Refurbished_Shredders, 
    		"Where_To_Buy": Where_To_Buy 
    	};
    	
    	if (sub==undefined) {
    	
    		var navPOP='';
    		navPOP+=
    
    		'<div id="drop-down-container">'+
    			'<div id="mainnav-title-ov">'+
    				'<div class="sprite main-nav-left lfloat"></div>'+
    				'<div class="main-nav-center auto-width">PRODUCTS</div>'+
    				'<div class="sprite main-nav-right lfloat"></div>'+
    				'<br class="clear">'+
    			'</div>'+
    			'<div id="drop-down" class="auto-width">'+
    				'<div id="mainnav-container" class="dots">'+
    					'<ul id="mainnav">';
    
    					var navname = "";
    					$.each(eval(nav), function(mainNav, mainNavobject) {
    
    						$.each(mainNavobject, function(i, subNavobject) {
    
    							$.each(subNavobject, function(property, value) {
    
    								if (navname != mainNav) {
    
    									navname = mainNav;
    																							
    									navPOP+= '<li><a href="' + value + '" class="subnav-click" id="' + mainNav + '">'+str_replace("_"," ",mainNav)+'</a></li>';
    								
    								}
    
    							});
    
    						});
    
    					});
    
    					navPOP+= 
    
    					'</ul>'+
    				'</div>'+
    				'<div id="drop-down-sub"></div>'+
    				'<br class="clear">'+
    			'</div>'+
    		'</div>';
    
    		var whatmenu = nav+'-ov';
    
    		$('#'+whatmenu).html(navPOP);
    		$('#mainnav-container').removeClass('dots');
    
    		$('#'+whatmenu).position({ my: "left top", at: "left top"});
    
    		$('#'+whatmenu).show();
    
    	}else{
    		
    		//$("#drop-down-sub").stop();
    
    		$('#drop-down-sub').empty();
    
    		var navPOPsub='';
    		navPOPsub+= '<ul id="subnav">';
    
    		$.each(eval(nav), function(mainNav, subNavobject) {
    
    			$.each(subNavobject, function(property, value) {
    
    				navPOPsub+= '<li><a href="' + value + '">'+str_replace("_"," ",property)+'</a></li>';
    
    			});
    
    		});
    
    		navPOPsub+= '</ul>';
    
    		$('#mainnav-container').addClass('dots');
    		$('#drop-down-sub').html(navPOPsub);
    		$('#drop-down-sub').show();
    	}
    
    	$('.subnav-click').mouseover(function() { 
    		buildNav($(this).attr('id'),1);
    	});
    
    	$('#drop-down-container').mouseleave(function() { 
    		$('#ProductsNav-ov').hide();
    	});
    
    }
    //-->
    </script>
    
    </div>
    
    </div>
    
    Code (markup):
     
    cesarcesar, Mar 11, 2011 IP