View Full Version : AnyLink CSS Menu horizontal alignment issues

04-07-2011, 01:30 PM
1) Script Title: AnyLink CSS Menu v2.2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

3) Describe problem:

Hi guys,

I'm using AnyLink CSS Menu to create a menu which displays HTML-rich DIV's. I.e. when someone hovers over one of the links, they will see a 500x300 pixels box with links, images etc.

Since AnyLink CSS Menu js file uses visibility: hidden to hide content and visibility: visible to display content, this causes major issues with whitespace. CSS property visibility allocates space on the page for the hidden part. Since my DIV's are rather big (8 hidden divs with height of 300 pixels), this means my page has (8*300) 2400 pixels of whitespace at the bottom of the page.

While surfing this forum for whitespace issues regarding this script, I found a tip from another user who suggested changing the visibility values in JS file to display:none for hidden divs and display:inline in case my menu link gets hovered on. This works like a charm, no whitespace whatsoever - since CSS property display does not allocate space on the page.

However, there's a minor issue I'm trying to fix.
After changing these properties from visibility to display, the script stops calculating users' resolution when deciding where to align the hidden content. As a result, posx cannot be calculated, so every DIV appears aligned left to its parent (menu link). Meaning that a DIV which belongs to a menu link that is far right on the page "escapes off screen" to the right (and is only partially visible).

Does anyone (with any knowlegde of javascript, since I am a noob) know what needs to be done to have the script calculate user's resolution? I know the following code in JS file is responsible for calculating this info and posx decides how to align the DIV.

if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)

Your help is so appreciated!


04-08-2011, 08:23 AM
Did you by any chance remove the last chunk of code inside the default CSS file, which is:

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

That's the only thing I can see that could cause the issue you're describing. Even with the original visibility:hidden approach used, there should be no white space issue with this script, as the menu markup is absolutely positioned at the top of the page and shouldn't take up any inline space on the page.

04-09-2011, 10:36 AM
ddadmin, thank you!
That's it. I guess I removed it a while ago thinking I wouldn't be using the shadows anyways. I switched back to visibility instead of display and it works just as it should.