1 Replies - 366 Views - Last Post: 04 December 2012 - 07:22 AM

#1 alex71385  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 74
  • Joined: 27-October 09

Navigation menu not expanding

Posted 03 December 2012 - 07:07 PM

good evening,
Can someone please assist me in figuring this out? The page address is http://casadecruz.hostei.com/ and on hover over, it's supposed to expand out to show links in sub menu but nothing is happening. Not sure if it's CSS or Java issue. This is the java code:
var dacamenu={

arrowimages: {down:['downarrowclass', 'http://casadecruz.hostei.com/down.gif', 23], right:['rightarrowclass', 'http://casadecruz.hostei.com/right.gif']},
transition: {overtime:300, outtime:300}, 
shadow: {enable:true, offsetx:5, offsety:5}, 
showhidedelay: {showdelay: 100, hidedelay: 200}, 

detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, 
detectie6: document.all && !window.XMLHttpRequest,
css3support: window.msPerformance || (!document.all && document.querySelector), 
ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, 

getajaxmenu:function($, setting){ 
	var $menucontainer=$('#'+setting.contentsource[0]) 
	$menucontainer.html("Loading Menu...")
	$.ajax({
		url: setting.contentsource[1], 
		async: true,
		error:function(ajaxrequest){
			$menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
		},
		success:function(content){
			$menucontainer.html(content)
			dacamenu.buildmenu($, setting)
		}
	})
},


buildmenu:function($, setting){
	var smoothmenu=dacamenu
	var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL
	$mainmenu.parent().get(0).className=setting.classname || "dacamenu"
	var $headers=$mainmenu.find("ul").parent()
	$headers.hover(
		function(e){
			$(this).children('a:eq(0)').addClass('selected')
		},
		function(e){
			$(this).children('a:eq(0)').removeClass('selected')
		}
	)
	$headers.each(function(i){ 
		var $curobj=$(this).css({zIndex: 100-i}) 
		var $subul=$(this).find('ul:eq(0)').css({display:'block'})
		$subul.data('timers', {})
		this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
		this.istopheader=$curobj.parents("ul").length==1? true : false /
		$subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
		$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( 
			'<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
			+'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
			+ '" style="border:0;" />'
		)
		if (smoothmenu.shadow.enable && !smoothmenu.css3support){ 
			this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} 
			if (this.istopheader)
				$parentshadow=$(document.body)
			else{
				var $parentLi=$curobj.parents("li:eq(0)")
				$parentshadow=$parentLi.get(0).$shadow
			}
			this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'})  
		}
		$curobj.hover(
			function(e){
				var $targetul=$subul 
				var header=$curobj.get(0) 
				clearTimeout($targetul.data('timers').hidetimer)
				$targetul.data('timers').showtimer=setTimeout(function(){
					header._offsets={left:$curobj.offset().left, top:$curobj.offset().top}
					var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w
					menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).width())? (header.istopheader && setting.orientation!='v'? -header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) : menuleft 
					if ($targetul.queue().length<=1){ 
						$targetul.css({left:menuleft+"px", width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, dacamenu.transition.overtime)
						if (smoothmenu.shadow.enable && !smoothmenu.css3support){
							var shadowleft=header.istopheader? $targetul.offset().left+dacamenu.shadow.offsetx : menuleft
							var shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : header._shadowoffset.y
							if (!header.istopheader && dacamenu.detectwebkit){ 
								header.$shadow.css({opacity:1})
							}
							header.$shadow.css({overflow:'', width:header._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'}, dacamenu.transition.overtime)
						}
					}
				}, dacamenu.showhidedelay.showdelay)
			},
			function(e){
				var $targetul=$subul
				var header=$curobj.get(0)
				clearTimeout($targetul.data('timers').showtimer)
				$targetul.data('timers').hidetimer=setTimeout(function(){
					$targetul.animate({height:'hide', opacity:'hide'}, dacamenu.transition.outtime)
					if (smoothmenu.shadow.enable && !smoothmenu.css3support){
						if (dacamenu.detectwebkit){ 
							header.$shadow.children('div:eq(0)').css({opacity:0})
						}
						header.$shadow.css({overflow:'hidden'}).animate({height:0}, dacamenu.transition.outtime)
					}
				}, dacamenu.showhidedelay.hidedelay)
			}
		) 
	}) 
	if (smoothmenu.shadow.enable && smoothmenu.css3support){ 
		var $toplevelul=$('#'+setting.mainmenuid+' ul li ul')
		var css3shadow=parseInt(smoothmenu.shadow.offsetx)+"px "+parseInt(smoothmenu.shadow.offsety)+"px 5px #aaa" 
		var shadowprop=["boxShadow", "MozBoxShadow", "WebkitBoxShadow", "MsBoxShadow"] 
		for (var i=0; i<shadowprop.length; i++){
			$toplevelul.css(shadowprop[i], css3shadow)
		}
	}
	$mainmenu.find("ul").css({display:'none', visibility:'visible'})
},

init:function(setting){
	if (typeof setting.customtheme=="object" && setting.customtheme.length==2){ 
		var mainmenuid='#'+setting.mainmenuid
		var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+', '+mainmenuid
		document.write('<style type="text/css">\n'
			+mainselector+' ul li a {background:'+setting.customtheme[0]+';}\n'
			+mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n'
		+'</style>')
	}
	this.shadow.enable=(document.all && !window.XMLHttpRequest)? false : this.shadow.enable 
	jQuery(document).ready(function($){ 
		if (typeof setting.contentsource=="object"){ 
			dacamenu.getajaxmenu($, setting)
		}
		else{ 
			dacamenu.buildmenu($, setting)
		}
	})
}

}


The arrow images aren't working for some reason either. Thank you!

Is This A Good Question/Topic? 0
  • +

Replies To: Navigation menu not expanding

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Navigation menu not expanding

Posted 04 December 2012 - 07:22 AM

Hello there,

First of all this seems to be a jQuery issue rather than a Javascript issue (we have a jQuery sub forum you can use for jQuery specific things).

Now, judging by the code you posted and a brief scan over the site you linked, I don't think you fully understand jQuery and what it is/performs. To start with, you do not need to pass $ around between all your functions, if you have jQuery referenced correctly, it will be a global variable.

The next thing I noticed is you seem to be storing and/or calling your own values using the $, this is wrong if you are using jQuery. If you are trying to call an element from your page, use jQuery selectors which you can read up on here (http://api.jquery.com/category/selectors/).

To answer your question, your error lies on the third line of the buildmenu function being that the jQuery/variable selector is invalid. Read what I have put above, make changes where required and it should fix that particular flaw in the code.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1