Page 1 of 2

jQuery nav not responding

Posted: Fri Mar 11, 2011 6:45 am
by cesarcesar
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.

Code: Select all

			
<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>

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 10:16 am
by pickle
I think it's your $.each() I believe that will iterate through each DOM element in the page. You need to change that $.each() to $('some jquery selector').each().

Some advice:
Don't use eval() - it's inherintly insecure, and there should be absolutely no need for it.
Don't use Javascript to build the page - have all your subnavigation built in html, but hidden. Use Javascript to do the stuff that needs to be done dynamically - showing, hiding, and positioning stuff.

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 1:57 pm
by cesarcesar
Don't use eval() - it's inherintly insecure, and there should be absolutely no need for it.
How do i get around the evals? In the line

Code: Select all

$.each(eval(nav), function(mainNav, mainNavobject) {
the variable "nav" is equal to the string "Products" but if i just use "nav" it breaks. How do i get the function to see it as a string equivalent like eval() make it?
You need to change that $.each() to $('some jquery selector').each().
Still learning jQuery, can you expand your suggestion.
Don't use Javascript to build the page - have all your subnavigation built in html, but hidden. Use Javascript to do the stuff that needs to be done dynamically - showing, hiding, and positioning stuff.
I have to build the nav dynamically... for now. Maybe it will help if i remove the arrays and $each() function from jQuery and do it will regular JS. Think that will help?

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 2:05 pm
by cesarcesar
How do i get around the evals?
ok ok googled.... http://javascript.about.com/library/bleval.htm

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 2:16 pm
by pickle
First off - I was wrong. $.each() can be used exactly how you're using it. I've only every seen it used to iterate over a jQuery object, not a generic collection.

If you can't put this stuff in html code (is there a good reason why not?), then your best bet is to put Shredders, Records_Storage,...etc into one object which you can then reference in your $.each()

Code: Select all

var subitems = {
  Shredders :[
    Deskside: '',
    Professional:'',
    etc
  ],
  Records_Storage:[],
  etc
};

$.each(subitems[nav],function(mainNav,mainNavobject){
...
}

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 2:42 pm
by cesarcesar
ok where am i going wrong.. doesnt work..

Code: Select all

var ProductsNav = {

	Shredders : [
		Deskside: '',
		Professional: '',
		Commercial: '',
		Government_Approved: '',
		Supplies: ''
	],

	Records_Storage : [
		Storage_Drawers: '', 
		Storage_Boxes: '',
		Earth_Series: '',
		Classroom_Organization: '',
		Moving_Boxes: '',
		Magazine_Holders: '',
		Sorters: ''
	]

};

				
$.each(ProductsNav,function(mainNav,mainNavobject){

	alert(mainNav);

}

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 2:53 pm
by pickle
what's not working? alert(mainNav) should be alerting 'Shredders' and 'Records_Storage'.

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 2:59 pm
by cesarcesar
results a blank page. no alerts

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 3:02 pm
by cesarcesar
ahhh!! was missing the }); at the end of the each..

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 3:22 pm
by cesarcesar
if I wanted to get a list of all subcategories of shredders, how do i go about doing this? Should it be something liek this?

Code: Select all

	var nav = "Workspace_Organization";
	$.each(ProductsNav[nav], function(subNav, subNavobject) {

		alert(subNav);
	});

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 3:28 pm
by cesarcesar
nevermind it works. yeah!

So this should be easier on the browser vs my previous version? obviously its lots less reiterations of the foreach

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 3:36 pm
by pickle
Ya, it should be better.

Also, when posting code, use [syntax] ([syntax=javascript],[syntax=html][syntax=php],etc)tags, not [code] tags. [syntax] tags have highlighting - much easier to read.

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 4:19 pm
by cesarcesar
How do i get around using the eval in this case? I have tried window[nav]

Code: Select all

	var Solutions_Center = {

		Identity_and_Document_Security: '',
		Workspace_Comfort_and_Ergonomic: '',
		Organization_and_Records_Storage: ''

	};

	// Loop thorugh main level cats
	var nav = "Solutions_Center";
	$.each(eval(nav),function(property, value){

		alert(property);

	});

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 4:39 pm
by pickle
window[nav] would only work if that variable was declared in the window scope. Since you declared that variable in a function, it's in that function's scope, not the window's

As far as avoiding eval() in that particular situation, I'm not sure you can. That's why I suggested putting all your different sub nav objects in a main object - so you can reference them with that object syntax.

Re: jQuery nav not responding

Posted: Fri Mar 11, 2011 4:47 pm
by cesarcesar
Maybe im not toally getting what your suggesting. Below is what i have. can you make suggestions.

Code: Select all

	var Products = {

		Shredders : {
			Deskside: '',
			Professional: '',
			Commercial: '',
			Government_Approved: '',
			Supplies: ''
		},

		Records_Storage : {
			Storage_Drawers: '', 
			Storage_Boxes: '',
			Earth_Series: '',
			Classroom_Organization: '',
			Moving_Boxes: '',
			Magazine_Holders: '',
			Sorters: ''
		}

	};

	var Solutions_Center = {

		Identity_and_Document_Security: '',
		Workspace_Comfort_and_Ergonomic: '',
		Organization_and_Records_Storage: ''

	};