Alternate Anchor point for Drop Down / Overlapping Script

**daCyclist** · 10-07-2009, 05:40 AM

1) Script Title: Drop Down / Overlapping Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lapcontent.htm

3) Describe problem: I am trying to have the script use a single anchor point, so that all instances open from the same point, rather than opening based on the bottom-left, top-right of the link itself as currently offered.

We love the script for opening complex menus and our current set-up has 5 link/div combos, opening different menus. The current "nav bar" links are centered on the top of the webpage, allowing us to adjust div size to keep everything looking consistent and centered on the page.

But the new layout has the nav bar offset to the right to allow logo room, hence all the menus open off to the right.

My thoughts are that either I can figure out how to assign an offset value to each link, so that the dropdown opens say bottom-left + 200 pixels. Or figure a way to assign the anchor point to the bottom-left of an empty div or invisible gif, so that it appears to come from a single fixed point on the page.

Has anyone tried this or have a suggestions. Staring at the code is making me cross-eyed, as I am not at all experienced with javascripting.

**daCyclist** · 10-07-2009, 11:11 AM

The experimenting continues ... had a brain storm and tried creating the entire top banner as a single image and use an image map to define the clickable navigation areas, rather than using a sliced image.

Works like a charm in Firefox (3.5), the drop down pegs itself to the edge of the overall image and every dropdown opens in the same spot.

BUT then IE rears its ugly head and refuses to follow suit. It opens each dropdown about 100 pixels to the left side of the related clickable area as defined by the image map.

So back to ground zero.

**ddadmin** · 10-07-2009, 08:21 PM

The script doesn't work well with Image Maps, so you're probably better off with scenario #1 above. I've modified dropdowncontent.js below to include the ability to specify an additional vertical offset to be applied to the drop down content associated with each anchor link. With it for example, you can now insert the attributes in red below:

Code:

<p align="right" style="margin-top: 400px">Demo #2 (click): <a href="http://www.dynamicdrive.com/resources/" id="contentlink" rel="subcontent2" data-x="-300" data-y="200">Additional Resources</a> </p>

The above will offset the drop down content 300px to the left and 200px down from its original location.

**daCyclist** · 10-08-2009, 07:28 AM

Thanks ddadmin.

Using the modified script and individual images as links, I am able to dial in my positioning better, but once again IE doesn't like to play fair. As Firefox is my preferred browser, I adjusted all of the offsets using it as a testbed. But when I then opened it in IE8, all of the drop downs are offset by maybe 100 px to the left from where they were in FF.

I suppose in worst case scenario, I could use php to insert an IE specific linkset with different offsets for MSIE browsers, same as we do for the CSS. But is this offset difference an IE only problem or ??

Test page: www.pedalerspubandgrille.com/test/layout2.htm

**ddadmin** · 10-08-2009, 06:29 PM

What happens if you add a valid doctype to the top of your page, ie:

Code:

<!DOCTYPE HTML>

Just to be clear, are you basically looking to have all the drop down contents align beneath the "Destinations" link?

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

**daCyclist** · 10-09-2009, 06:14 AM

Adding the doctype didn't seem to effect the functionality. IE still opens the drop down in a different position than does FF.

The goal is for the dropdown to open centered on the page, so that it covers the photo beneath the navbar (the dropdown is the same width as the main page container).

Sorry about the copyright, I added it to the test page.

**daCyclist** · 10-09-2009, 11:33 AM

By happen chance I opened my browser window full screen and the drop down shifted. Experimenting some more, the wider I set my browser window, the more offset occurred. And since my IE browser opens with a wider window, that is why it was shifted from FF.

So it seems that the drop down positioning is partially related to the browser window and not strictly related to positioning within the webpage. As a result each person will see the dropdown somewhere else depending on their screen size and width of their browser window.

**ddadmin** · 10-09-2009, 11:29 PM

Well, if you want the drop down contents to always align with the upper left corner of the large header photo, try the below modified .js file instead. Also, give your photo the following ID attribute:

Code:

<img id="headerimage" src="images/header-tibet.jpg">

**daCyclist** · 10-10-2009, 05:46 AM

Bing bada boom. The new version of the script, plus a little modification of our css code and it works like a charm. I had to reslice the nav header image to create a full width slice at the bottom to use as the target, as the photo doesn't appear on all pages.

Thanks for all of the extra help.

**daCyclist** · 12-16-2009, 03:56 PM

Since your last kind modification of the script we have been tooling along working on the appearance of the new website, without doing a lot of in-depth testing.

But recently started using IE to work out the css kinks. In all versions of IE (we are testing with 5.5 thru 8), we get the following error:

Message: 'null' is null or not an object
Line: 116
Char: 3
Code: 0
URI: .../dropdowncontent2.js

I can only find a couple of references to null in the code, neither of which is on line 116 (but then IE could count lines differently than my text editor). The script seems to work just fine in IE, but it would be nice for visitors not to see the error flag.