Javascript Menu inside div WILL NOT WORK RIGHT [Archive]

sparticuz13

07-17-2007, 05:16 PM

Ok so Im trying to get a js based menu to work inside of a div layer. Here is why I need it in a div. I built the site in Photshop and sliced it in image ready with CSS not tables output.

On the left hand side is a slice for my nav bar to be inserted. I made a div layer that is setting above the slice with the image in it. It has the exact same dimensions and location as the div with the image slice in it This way I can type or put content inside my nav area.

The whole point in putting it in the div is to set the location of my menu to the right area on the site.

The menu works but the sub menu pops out with a huge gap from the main menu. Almost center in the screen. Other than that it work perfectly.

Any ideas.

#LeftNAV {
position:absolute;
left:20px;
top:153px;
width:167px;
height:956px;
}

#LeftLinks {
position:absolute;
left:20px;
top:153px;
width:583px;
height:956px;
}

<div id="LeftNAV"><img src="images/LeftNAV.gif" width="167" height="956" alt="" ></div>

<div id="LeftLinks" align="left" style="overflow:visble">


<noscript><a href="http://deluxe-menu.com">Javascript Menu by Deluxe-Menu.com</a></noscript>
<script type="text/javascript">var dmWorkPath="deluxe-menu.files/";</script>
<script type="text/javascript" src="deluxe-menu.files/dmenu.js"></script>


<div id="dmlinks" style="font:normal 11px Trebuchet MS, Tahoma;color:#000000;text-decoration:none">
<a id="dmI0" href="testlink.html">Home</a>
<a id="dmI2" href="testlink.html">Features</a>
<a id="dmI4" href="testlink.html">Description of Files</a>
<a id="dmI5" href="testlink.html">How To Setup</a>
<a id="dmI6" href="testlink.html">Parameters Info</a>
<a id="dmI7" href="testlink.html">Dynamic Functions</a>
<a id="dmI23" href="testlink.html">Sample 1</a>
<a id="dmI24" href="testlink.html" target="_">Sample 2 is Disabled</a>
<a id="dmI25" href="testlink.html">Sample 3</a>
<a id="dmI26" href="testlink.html">Sample 4</a>
<a id="dmI27" href="testlink.html">Sample 5</a>
<a id="dmI28" href="testlink.html">Sample 6</a>
<a id="dmI29" href="testlink.html">Sample 7</a>
<a id="dmI30" href="testlink.html">Sample 8</a>
<a id="dmI31" href="testlink.html">Sample 9</a>
<a id="dmI32" href="http://deluxe-menu.com/order-purchase.html" target="_blank">Purchase</a>
<a id="dmI33" href="testlink.htm">Contact Us</a>
</div>

sparticuz13

07-18-2007, 10:57 AM

Ok here is an update.

I was able to fix the problem but now have another. :mad:

I took the code that loads my javascript menu and placed it in a separate HTML file called menu.html I then made an iframe in the main page. It sits inside my main div wapper that houses all the other divs for my image slices. I then used an absolute possition in the iframe and set it to the same possition as my div containg my navigation area slice.

It works perfectly. The div wrapper is set to relative with left and right margin set to auto so that it loads the page centered horizontialy. All the other divs with the slices are absolute inside the wrapper.

Now my menu loads just fine and in the right space and is no longer having the huge gap between the menu and sub menu pop outs as I was having before when I placed the menu code inside one of my divs.

Now the problem is the linking in the menu. I originally made a javascript function that allows me to load seperate html files in a div in a main html file where the js function is. This was made so I could only reload the content section of my site without reloading the whole page.

It works fine but now that the menu is housed in a separate page it will not work. I can place the js in the menu page but any divs my link references must be in there as well and not on the main page.

So now I need a way to pass javascript from the menu page to the main page. Again the menu is loaded into an iframe on the main page but the script only looks for div ids on the html page its placed. So it is only looking in my menu.html and I need it to look in the index.html

Thanks
Chris