Results 1 to 6 of 6

Thread: Featuredimagezoomer overlays dropdown-navigation

  1. #1
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Featuredimagezoomer overlays dropdown-navigation

    1) Script Title: featured image zoomer

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

    3) Describe problem:

    Hi,

    I have an image on a page with featured image zoomer. Above this image is a navigation with a dropdown menu. The last point of the dropdown goes over the image, but when I drive with my mouse over the last point where the border across the image, the image zoom appears. I tried some css things, but this was not very success.

    Had someone a similar problem in the past and a solution for it?

    Thanks,
    Markus

  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

    You have to boost the z-index of the menu. The zoomer has default z-index, but comes after all other elements on the page. So unless the menu has at least a z-index of 2, the zoomer will cover it.

    To give the menu a z-index of 2 or more might require making all of its parent elements positioned and also having a z-index of 2 or more.

    How this is done with a particular menu varies.

    And there might be other problems.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

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

    MarkiMarika (06-13-2012)

  4. #3
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    thanks for your help! I'll try it today evening (here in germany it is 6 a.m. and I must go to work )
    I will send you the link with the required access data. The page is in work and still protected against public.

    Thanks,
    Markus


    ****EDIT****

    Okay, I can not send private messages..the access is [sensitive data removed]
    Please go there to an arcticle. There you can see my "problem"
    Last edited by jscheuer1; 06-13-2012 at 07:29 AM. Reason: sensitive data removed

  5. #4
    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 see there's already a lot of positioning and z-index used on those pages.

    At the end of the http://www.refereeworld.com/test_msu/css/stylesheet.css file, change:

    Code:
    		.magnifyarea, .zoomtracker, .zoomstatus, .cursorshade {
    			z-index: 600;
    		}
    to:

    Code:
    		.magnifyarea, .zoomtracker, .zoomstatus, .cursorshade {
    			z-index: 591;
    		}
    Works here, at least for:

    UNDER ARMOUR WOMEN'S ACTIVE SHORTS, black

    Should work for all of them.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

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

  6. #5
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I tried all, but not this...thanks a lot, but I don't understand why it works with 591, but not with 600...?

  7. #6
    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

    Items with a higher z-index cover those with a lower z-index. The z-index of the menu or it's significant parent for determining its z-index in relation to the zoomer elements is between 591 and 600. The zoomer elements need to be at least 591 (possibly 590 because they're the last elements on the page - didn't check that) to be seen over other elements on the the page that would otherwise cover them.
    - 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
  •