Adding a menu using php call which uses js

[LD]

I have a menu which uses js to make some sub-items hidden and show when the mouse rolls over. It works as a stand alone when I display in the browser:

http://www.lusciousdelights.com/menunavrev.php

But when I try adding to a page with this code:

 <?php include("/home/luscious/public_html/menunavrev.php") ?>

the script does not seem to work:

http://www.lusciousdelights.com/linklist/amateurt.php

Is there some way I can make this work?

Thanks!

[Nymph]

Just a guess, but maybe if you used the full URL in the menunavrev.php to the js, and css ?

[LD]

Originally Posted by Nymph

Just a guess, but maybe if you used the full URL in the menunavrev.php to the js, and css ?

That's it!! Thanks

[Nymph]

I"m glad it worked for ya sweetie

[flowersgone]

Hi,

I noticed that you are nowing using the new menus throughout the site and not just on the test page: http://www.lusciousdelights.com/linklist/amateurt.php. When I look at the pages the menu appears to go down past its bounding box and there is sometimes no space between the menu and the ad below.

I was able to hack a test fix into a downloaded copy of one of your pages that might give you some insight into the problem and lead you towards a fix. I changed

<div class="menunav">

to read

<div class="menunav" style="padding-bottom: 5em">

and after reloading the bounding box looked better. You might try this on the test page mentioned above. While inline styles are often not regarded as good coding, if you find that the hack works I could easily provide you with some more stylistically appropriate coding.

Best of luck,
fg

[LD]

Originally Posted by flowersgone

You might try this on the test page mentioned above. While inline styles are often not regarded as good coding, if you find that the hack works I could easily provide you with some more stylistically appropriate coding.

Best of luck,
fg

Thanks for your help. What I did was put a margin at the bottom of the div using a css rule for the class "menunav" which looks ok in IE, but not FF. Ugh...I might try your suggestion and see what happens.

[flowersgone]

Originally Posted by LD

I ... put a margin at the bottom of the div using a css rule for the class "menunav" which looks ok in IE, but not FF.

It now looks better on my systems on IE7, IE8, FF, and Safari but there is still a small overflow by the menu at the bottom on all of them. I think I have come up with a reasonably simple and reliable solution to the problem.

First replace:

<div class="menunav">

with

<div class="menunav" id="menunav_id">

and then a bit further down the page replace

<script type="text/javascript"> 
<!--
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

with

<script type=text/javascript>
<!--
if (! menunav_retry) { // test for safari happiness
	document.getElementById('menunav_id').style.height =
		(document.getElementById('menunav1').clientHeight +5) + 'px';
	menunav_retry = 1;
}
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

This seemed to work nicely for me on all browsers mentioned above except IE7 which I didn't have a chance to test.

If this works for you, you can also remove the height specification from the .menunav css rule.

HTH,
fg

[LD]

Thanks! haven't had a chance to play around with yet, maybe this weekend.

[flowersgone]

Actually - just noticed, for this to work you actually need to change

height: 755px;

to

height: auto;

in the .menunav css rule of dl_stylelusciousr.css or remove that specification completely.

[flowersgone]

Originally Posted by LD

Thanks! haven't had a chance to play around with yet, maybe this weekend.

I can see from a more careful look at your pages that LD did give it a try and am sorry to see that you had to give up. You now have <div id="menunav_id"> where you had <div id="menunav1"> and that should probably be switched back. When the fix works properly it looks like the image here: http://development.toosxxx4.com/imag..._after_fix.jpg.

Getting it to work cross browser was trickier than I thought though. At one point I had something that seemed to work for IE8 and FF3 and then got into some trouble adjusting it for Safari. I have now tested a revised version on IE7, IE8, FF3, Safari 5 and Chrome, including FF with JavaScript disabled. I must admit that there was a bit of tweaking for nearly every browser I tested. Anyway the html and css changes are as described above with <div class="menunav" id="menunav_id"> and height: auto for ".menunav". The new JavaScript code is not that lengthy, still replaces the same bit of code, and is included below. It is a bit complicated and the browsers were picky and I will understand if LD stays with something simpler for now.

The code assumes that menunav1 has been switched back in for the div tag. If anyone has any questions please send me a pm and I thank everyone for their patience.

<script type=text/javascript>
<!--
var h = document.getElementById('menunav1').clientHeight;
if (h > 100 && h < 1000) { // test for IE7 and chrome / safari
	var nav_n = document.getElementById('menunav_id');
	h = (h + 5) + 'px';
	if (nav_n.style.height==undefined)  // more safari
		nav_n.clientHeight = h;
	else
		nav_n.style.height = h;
}
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

My apologies to LD for any time lost,
fg