skipping images in a javascript

[Jenniness]

Hi all,

Currently i am finishing my website, ordinarysundays.com, http://www.ordinarysundays.com

For the multi-level menu i have used a free script from dynamicdrive.com ( so actually i am a real noob in scripts). In firefox the site looks tight and clean, but when i review it in Explorer or Safari, behind the items:
collection// iwantobuy// aboutos you'll see the 'missing-gif' spots.
These three items are the items which will fold out.

My intention was to skip those gifs, so i haven't uploaded them on the server.

In the javascript i tried to adjusted some values, like deleting the name of the gif, or setting the 1 into 0 after the img scr string. But the missing-gif spots remain, and also the 0 turns back in a 1, when its uploaded again.

Following is the adjustedl jscript of the used menu:
or check url to see original menu working:

[Broken Link Removed]

----

/*********************
//* jQuery Multi Level CSS Menu (horizontal)- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//* Menu instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
//* Last modified: Sept 6th, 08'. Usage Terms: http://www.dynamicdrive.com/style/csslibrary/tos/
*********************/

//Specify full URL to down and right arrow images (25 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass'], right:['rightarrowclass']}

var jquerycssmenu={

fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
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? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[0]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimens ions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
$targetul.css({left:menuleft+"px"}).fadeIn(jqueryc ssmenu.fadesettings.overduration)
},
function(e){
$(this).children("ul:eq(0)").fadeOut(jquerycssmenu .fadesettings.outduration)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}

//build menu with ID="myjquerymenu" on page:
jquerycssmenu.buildmenu("myjquerymenu", arrowimages)

----

I really have no clue how to fix it, so i hope somebody can help out!!

Thanks so much in advance,


Jenny

Ordinary Sundays

[jscheuer1]

Easiest thing would be to use a 1 pixel transparent gif:

http://home.comcast.net/~jscheuer1/s...parent_1px.gif

Right click and choose 'Save As'. Put it in the same folder as your page.

Then set it up in the script here:

//Specify full URL to down and right arrow images (25 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass'], right:['rightarrowclass']}

Like so:

//Specify full URL to down and right arrow images (25 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['transparent_1px.gif'], right:['transparent_1px.gif']}

[Jenniness]

Dear John,

Thank you for your quick reply!! I downloaded the 1by1 gif, and indeed changed into:

//Specify full URL to down and right arrow images (25 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['transparent_1px.gif'], right:['transparent_1px.gif']}

so indeed now the missing gifs are gone, but in IE the drop down's are gone??


In Chrome, in Safari, Firefox, it seems to work fine...

[jscheuer1]

That change didn't cause that problem. Put things back they way they were, you will still have that problem in IE. There is some error in how you have things laid out, or perhaps a bug in the script, perhaps due to a change you made to it other than what we just did, that is triggering an error in the jQuery script. I can 'fix' that in jQuery, but then you would have to use a local uncompressed and non-standard version. Perhaps the best thing would be to revert to the original script, but I don't have that. If you don't either, the next best thing would be to update to the latest version of the script:

http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/

However, if it is a problem with your markup, that still might not fix it. But at least it will give me a template to follow to see what's wrong.

Before you go making any changes though, make a backup copy of everything you have so far.

[Jenniness]

John,

Thanks so much for helping out, happily i got myself the page bookmarked here:

http://www.dynamicdrive.com/style/cs...rizontal_blue/

This is the original code:

----

/*********************
//* jQuery Multi Level CSS Menu (horizontal)- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//* Menu instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
//* Last modified: Sept 6th, 08'. Usage Terms: http://www.dynamicdrive.com/style/csslibrary/tos/
*********************/

//Specify full URL to down and right arrow images (25 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'arrow-down.gif', 25], right:['rightarrowclass', 'arrow-right.gif']}

var jquerycssmenu={

fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
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? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
$targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration)
},
function(e){
$(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}

//build menu with ID="myjquerymenu" on page:
jquerycssmenu.buildmenu("myjquerymenu", arrowimages)


----

Since integrating a multilevel-menu is already my top-notch achievement, i am like afraid to screw up by mis-integrating the scripts you provided me, must i then re-adjust all my codes to keep it horizontally laid out??

with other words: how to specify to make sure it's horizontally based?

[jscheuer1]

Good thing! Apparently it's changes you made to jquerycssmenu.js including, but not limited to, the arrowimages object. Replace the entire contents of your jquerycssmenu.js file with this:

/*********************
//* jQuery Multi Level CSS Menu (horizontal)- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//* Menu instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
//* Last modified: Sept 6th, 08'. Usage Terms: http://www.dynamicdrive.com/style/csslibrary/tos/
*********************/

//Specify full URL to down and right arrow images (25 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'transparent_1px.gif', 0], right:['rightarrowclass', 'transparent_1px.gif']}

var jquerycssmenu={

fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
	jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			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? this._dimensions.h+"px" : 0})
			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
				'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
				+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
				+ '" style="border:0;" />'
			)
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
					var menuleft=this.istopheader? 0 : this._dimensions.w
					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
					$targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration)
				},
				function(e){
					$(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
				}
			) //end hover
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
	}) //end document.ready
}
}

//build menu with ID="myjquerymenu" on page:
jquerycssmenu.buildmenu("myjquerymenu", arrowimages)

[Jenniness]

John!!

It's working!!!

Thank you soo much!!

My great appreciation and respect is for you!!!

http://www.ordinarysundays.com

Jenny

ps, sorry for forgetting to use the codetags, have a been a little nervous lately..