Problem with background image using anylinkmenu.js

[guy67400]

Script: AnyLink JS Drop Down Menu v2.3
http://www.dynamicdrive.com/dynamici...pmenuindex.htm

I want to create a dropdown menu on navigation bar, just under a banner on an html page. Around the page , there is a background image, that displays left & right of the content of my webpages- i'm using css
body {background: url(images/background.jpg) top center;}

Everything was fine until I implemented the drop down menu using "AnyLink JS Drop Down Menu v2.0". Now, with the dropdownmenu working correctly, at the bottom of each page, the background image is displayed with a hight of 6/7 text lines.
This effect happens as soon as the script is launched - if I put <!-- --> to the html line <script type="text/javascript" src="../doc_commun/scripts/anylinkmenu.js"></script>, the background image finishes right at the same height than the content of the web pages. (of course dropdown effect is not working anymore)


Any hint to improve this ?

Thanks

Guy

[Beverleyh]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

Please post a link to the page on your site that contains the problematic script so we can check it out.

You're asking us to work blind at the moment so until you can provide us with the information above, I'm afraid we can't offer any real help.

[jscheuer1]

If I understand the question, perhaps editing the script to place the created content at the beginning, rather than at the end of the body will help. Using a text only editor like NotePad, find this function in the anylinkmenu.js file (around line #154:

addDiv:function(divid, divclass, inlinestyle){
	var el=document.createElement("div")
	if (divid)
		el.id=divid
	el.className=divclass
	if (inlinestyle!="" && typeof el.style.cssText=="string")
		el.style.cssText=inlinestyle
	else if (inlinestyle!="")
		el.setAttribute('style', inlinestyle)
	document.body.appendChild(el)
	return el
},

Change the highlighted line as shown:

addDiv:function(divid, divclass, inlinestyle){
	var el=document.createElement("div")
	if (divid)
		el.id=divid
	el.className=divclass
	if (inlinestyle!="" && typeof el.style.cssText=="string")
		el.style.cssText=inlinestyle
	else if (inlinestyle!="")
		el.setAttribute('style', inlinestyle)
	document.body.insertBefore(el, document.body.firstChild)
	return el
},

Save and use that version.

The browser cache may need to be cleared and/or the page refreshed to see changes.

But this might create the same undesirable effect, only this time at the top of the page. If it does, it's probably due to the markup and/or styles of the page and we would have to have a link to that page to figure it out.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[guy67400]

background size problem.zipSorry for not following the guidelines of "proper posting format". I updated my post to include link to the script I use.

John, thank you for your reply.
I changed the script as per your suggestion, and the undesirable effect is at the top of the page as you suspected.

I uploaded the folder "background size problem.zip" with related files (.css, dropdown content, html page called "index.html", background image) so that you can see the problem
The background image should finish right under the page bottom with text "Nous contacter CGU Recevoir la lettre d'information" but it is 3/4 lines longer

Thank you for your time spend on this matter

Regards

Guy

[jscheuer1]

OK, you're missing styles from the demo page:

<link rel="stylesheet" type="text/css" href="anylinkmenu.css" />

Place that tag in the head of the page after the scripts, and download the css file from the demo page, put it in the same folder as the page.

If you don't want to see the shadows - Using a text only editor like NotePad, change them (at the end of the css file) like so:

/* ######### class for shadow DIV ######### */


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: transparent;
visibility: hidden;
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

Oh, and there was a gap at the bottom even without the scripts, so it's hard to tell. But there was less of a gap without them, and the same less of a gap when the styles were added and the scripts included. I think having the other images missing might (probably does*) account for the remaining gap. If not, it's nothing to do with the menu, as I say, there is a gap there even without the menu's scripts.


*further testing seems to show this is the case

[guy67400]

You are right that I did'nt want the shadow effect on the drop down menus & I removed the .css class (too fast it seems!)

Using your hint = put back the shadow class with transparent background in the existing .css file solve the bottom page - background alignment effect on the full website

Thank you for your help on this matter

Guy
(This is my french given name)