Results 1 to 9 of 9

Thread: AnyLink hides behind ads

  1. #1
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink hides behind ads

    1) Script Title:
    AnyLink CSS Vertical Menu
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...nylinkcss2.htm
    3) Describe problem:
    On our development site, this menu is hiding behind Flash-based ads as seen in this image:

    It works great otherwise - is there any way to force it to overlap these Flash ads? Some Flash ads go behind the menu, others are in front of it. Currently, Ford Fusion and Microsoft LiveSearch are a couple that cover up the menu. "Lesson Plans" at the top and "HotChalk" / "Resource Sites" etc. on the left menu expand. Can we prevent this from happening somehow? Thanks,
    --Kyle

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Since you have no control over the these flash ads, their code, there is very little that you can do. You could try rewriting or or adding to their code onload but, I am uncertain as to how successful this would be. The usual solution (when you have control over the flash content's code) is to:

    Add the following parameter to the OBJECT tag:

    <param name="wmode" value="transparent">

    Add the following attribute to the EMBED tag:

    wmode="transparent"
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I looked at your page further and it appears that at least some of the 'offending' flash ads have the proper wmode set. It then becomes a problem of z-index stacking. Try this in your stylesheet (replace the existing .dropDown definitions):

    Code:
    .dropDown{
    position:absolute;
    visibility: hidden;
    border:1px solid 000000;
    border-bottom-width: 0;
    font:normal 10px arial;
    line-height: 18px;
    z-index: 10000000;
    background-color: #2586d7;
    width: 205px;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the quick reply John. So there's nothing the CSS can do to force itself to be on top?

    If not, are you aware of any other type of expandable menu that could be created to overlap these ads? Either one that is created already, or a way we could write one that would work in a similar way? Thanks,
    --Kyle

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yep - missed that. I just tried it, and so far it's working!! Can't say for sure that it will work with all ads, but so far so good... Thanks a bunch,
    --Kyle

  7. #7
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ugh, I found a couple that broke it...

    So perhaps a Flash based menu would be a better option? Thanks,
    --Kyle

  8. #8
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm also working on this issue. The other "problem" i found is I can't change the font size to make it smaller in the css. Everything else I can change, color padding, line-height, but I can't change the size of the font.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If you are using the version of Anylink in this thread (there are several versions available in the DD library), you go into the anylinkvertical.css file and change it there (red):

    Code:
    .anylinkcss{
    position:absolute;
    visibility: hidden;
    border:1px solid gray;
    border-bottom-width: 0;
    font:normal 8px Verdana;
    line-height: 18px;
    z-index: 100;
    background-color: white;
    width: 205px;
    }
    
    .anylinkcss a{
    color: black;
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid gray;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    text-indent: 5px;
    }
    
    .anylinkcss a:hover{ /*hover background color*/
    background-color: #F8FBBD;
    color: black;
    }
    It was 12, 8 is pretty small.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •