Results 1 to 10 of 10

Thread: Google Chrome CSS Drop Down Menu behind Flash Ad / iFrame Video

  1. #1
    Join Date
    Jan 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Google Chrome CSS Drop Down Menu behind Flash Ad / iFrame Video

    Having an issue with a drop down menu that displays behind the flash banner ad and a video that's in an iframe. I've tried the z-index and could not resolve it. I've even tried the wmode opaque and transparent parameters and was unable to be successful in resolving this. Any help would be greatly appreciated please.

    FYI - It works fine on Firefox and IE. I have yet to try Safari.

    Browser Version: Google Chrome Version 29.0.1547.66 m




    Click image for larger version. 

Name:	screenshot-dropdown.jpg 
Views:	194 
Size:	97.2 KB 
ID:	5205

    Click image for larger version. 

Name:	screenshot-dropdown1.jpg 
Views:	164 
Size:	98.1 KB 
ID:	5206
    Last edited by phino; 09-11-2013 at 12:58 PM. Reason: RESOLVED ISSUE

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    You might not be able to resolve the banner ad one. It depends upon how much control you have over it.

    When you say a video that's in an iframe, is that an iframe video, like from YouTube? If so there is no parameter for wmode, but it can be set in the query string of the URL of the src attribute of the iframe, example:

    Code:
    <iframe width="560" height="315" src="//www.youtube.com/embed/o6FwyADPBjQ?wmode=transparent" frameborder="0" allowfullscreen></iframe>
    If there's already a ? in the URL, use &wmode=transparent instead.

    The same (or similar, if it's an embed tag) could be done with the banner ad, if you can change the code for it. Generally its code is in an iframe that gets written to your page by a script that's on the server of whoever is placing the ad there, so is beyond your control. You can attempt to alter it using javascript, but that may be impossible. The best course of action would be to put the menu below the ad.

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

    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. #3
    Join Date
    Jan 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    The banner ad one has been done (screenshot provided below) this is our sports section and it displays over the video and the ad.

    sorry i didn't mean to say parameter, i meant to say the string. i've tried both of those and it didn't solve it. i tried to examine the code on the working page but everything matches up just fine.

    thanks!

    Click image for larger version. 

Name:	screenshot-dropdown-working.jpg 
Views:	103 
Size:	95.4 KB 
ID:	5207
    Last edited by phino; 09-06-2013 at 05:31 PM. Reason: Format

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    I'm curious how you fixed the banner (it's not fixed here in Chrome). The banner ad is something you might not really be able to fix. I've seen where, because the ads rotate, that sometimes it's OK, and other times the menu (in this case) or whatever, falls behind it, depending upon which ad is being displayed.

    I tried the video on a separate page, and it falls behind an absolutely positioned element in Chrome. So it's probably just a z-index issue. However, I've been looking for a while now and cannot see which element or elements need their z-index values adjusted.

    I will probably look some more, if I find anything, I will let you know.
    - John
    ________________________

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

  5. #5
    Join Date
    Jan 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks! Yeah the banner one kind of threw me at a loop as it worked on one page and then not on the main page. I have been searching for a few days for elements with the z-index adjustments and couldn't come up with anything as well.

    Greatly appreciate it. Thanks again!

    Quote Originally Posted by jscheuer1 View Post
    I'm curious how you fixed the banner (it's not fixed here in Chrome). The banner ad is something you might not really be able to fix. I've seen where, because the ads rotate, that sometimes it's OK, and other times the menu (in this case) or whatever, falls behind it, depending upon which ad is being displayed.

    I tried the video on a separate page, and it falls behind an absolutely positioned element in Chrome. So it's probably just a z-index issue. However, I've been looking for a while now and cannot see which element or elements need their z-index values adjusted.

    I will probably look some more, if I find anything, I will let you know.

  6. #6
    Join Date
    Jan 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    ok so i was able to figure out how to get it over the banner. it's applied to the div, z-index: 90 (just went with a high number for now).

    now the menu shows above the banner but behind the video and right cube ad. i have a feeling, now that i gave the div a z-index, all div's are taking that z-index which makes the video (which sits in an iframe within a div) above the menu still. hopefully i didn't confuse anyone. but thoughts?

    Quote Originally Posted by jscheuer1 View Post
    I'm curious how you fixed the banner (it's not fixed here in Chrome). The banner ad is something you might not really be able to fix. I've seen where, because the ads rotate, that sometimes it's OK, and other times the menu (in this case) or whatever, falls behind it, depending upon which ad is being displayed.

    I tried the video on a separate page, and it falls behind an absolutely positioned element in Chrome. So it's probably just a z-index issue. However, I've been looking for a while now and cannot see which element or elements need their z-index values adjusted.

    I will probably look some more, if I find anything, I will let you know.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    The thing is that there's so much going on with that page that it's hard to track down. If I do:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head>
    <body>
    <div style="position: absolute; top: 0; left: 0; width: 100px; height: 800px; background: red;"></div>
    <iframe src="http://embed.newsinc.com/Single/iframe.html?WID=2&VID=25108654&freewheel=91082&sitesection=sesunsentinel&height=267&width=400" height=267 width=400 frameborder=no scrolling=no noresize marginwidth=0px marginheight=0px></iframe>
    </body>
    </html>
    In Chrome, the red absolutely positioned div is over the iframe. So it pretty much has to be the z-index. Now z-index can be set in either style on the page, in a stylesheet, or inline for the element, or via javascript. If an element has a parent with z-index, it inherits that z-index and cannot go lower that that z-index, but can go higher. The element itself or its parent from which it's inheriting the z-index must have position absolute, or relative, otherwise it has no z-index. If it has position fixed, it will show over everything regardless of z-index. Even with items without z-index or with the same z-index, items later in the markup will show over items earlier in the markup as long as the latter or both items are positioned as mentioned.

    So there are a lot of items (elements) to look through to find the one(s) controlling the z-index for the drop down and for the iframe.

    One option might be to use javascript to append the drop downs to the body and give them an insanely high z-index, and position absolute, then it should work. They would have to be positioned properly though after having being taken out of the flow of the page. jQuery can be used to do all that, if it comes to that.

    But it's just possible that there's some other issue. And I notice that in Chrome, if I mouse over the trigger for a drop down and then mouse away, and then mouse over again before the little dark bar beneath the trigger has had a chance to move away, the drop down now covers the iframe. So it's possible that simply using a timeout or otherwise changing the order in which things occur in the menu script (sun-sentinel.com/hive/javascripts/menu.js) might take care of it.

    Oh, and since we're on the topic of javascript, there are tons of javascript scripts associated with the page. It would be a good idea to cut down on them. I see two or more versions of jQuery, as well as Prototype/Scriptaculous. In theory only one version of jQuery should be required and anything that uses Prototype/Scriptaculous replaced by an equivalent script that uses jQuery. If that were done, the page should load faster, perhaps much faster. As it is now, the page takes a long, long time to load. This probably is also due to other things than the scripts involved, like so much ads and Flash.

    That fact, the length of time it takes the page to load (way more than 8 seconds, seems close to a minute), makes working with it and troubleshooting it very time consuming. Each time a change is made, you really need to reload the page to see if it has had a beneficial effect. Some things can be tested in the console/developer tools (F12 in Chrome), but to be certain, a reload is required.
    Last edited by jscheuer1; 09-06-2013 at 05:14 PM. Reason: spelling, more info
    - John
    ________________________

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

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

    phino (09-06-2013)

  9. #8
    Join Date
    Jan 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    jscheuer1, thank you very much for your assistance and help. i will go ahead and track it down. and i agree with you, there is so much going on that it's really hard to find the issue but we are heading on the right track. i'll go ahead and dig deeper and provide an update as soon as i complete it. thanks again and let me know if any other updates come along from your end.
    Last edited by jscheuer1; 09-06-2013 at 09:57 PM. Reason: unnecessary quoting

  10. #9
    Join Date
    Jan 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hey so I came across this one.

    Code:
    ul#root li ul.level2 {
    	cursor:pointer;
    	max-width:100%;
    	position:absolute;
    	height:auto;
    	left:-9999px;
    	top:26px;
    	width:980px;
    	display:block;
    	margin-top:0;
    	}
    when i remove left: -9999px, everything displays on top of the video now except for Home and News (provided screenshots)

    Click image for larger version. 

Name:	screenshot-testing-with.jpg 
Views:	96 
Size:	93.7 KB 
ID:	5208

    Click image for larger version. 

Name:	screenshot-testing-without.jpg 
Views:	90 
Size:	93.0 KB 
ID:	5209
    Last edited by jscheuer1; 09-06-2013 at 10:03 PM. Reason: Format Code

  11. #10
    Join Date
    Jan 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    found the issue! jscheuer1, you were definitely pointing me in the right direction about the menu animation. i found it in the CSS

    Code:
    -webkit-transition:opacity .2s ease-out;
    -webkit-transition-delay:0;
    -moz-transition:opacity .2s ease-out 0;
    -o-transition:opacity .2s ease-out 0;
    transition:opacity .2s ease-out 0
    }

    apparently google chrome doesn't take too kindly to CSS3 transitions. when i edited the portion to a .0 s transition opacity, it worked perfectly! thanks for your help!
    Last edited by jscheuer1; 09-11-2013 at 01:59 PM. Reason: Format

Similar Threads

  1. Replies: 3
    Last Post: 02-03-2013, 04:02 PM
  2. Replies: 1
    Last Post: 05-19-2010, 09:48 PM
  3. Chrome CSS Drop Down Menu & Flash
    By Rohit Malik in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-04-2008, 03:49 AM
  4. Chrome drop down menu and Flash
    By jonhebert in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 01-16-2008, 09:41 PM
  5. Google Search in Chrome Drop Down Navigation Menu
    By Nacho in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-07-2006, 06:53 PM

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
  •