Results 1 to 3 of 3

Thread: AnyLink CSS Menu horizontal alignment issues

  1. #1
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default AnyLink CSS Menu horizontal alignment issues

    1) Script Title: AnyLink CSS Menu v2.2

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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.

    Code:
    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!

    Thanks,
    BRS

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Did you by any chance remove the last chunk of code inside the default CSS file, which is:

    Code:
    .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.
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    brs (04-09-2011)

  4. #3
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •