0

I am developing banner add which is expandable. The issue is that the banner specs require the banner to auto collapse when the mouse leaves the banner.

This is complicated because the expanded page of the banner has a youtube video. The HTML5 YouTube Video inserts a iframe.

So what is happening is, when the mouse is moved over the YouTube Video the banner collapses. It should not do this and the banner should only collapse when the mouse leaves the banner ads region.

The banner has 4 different active top layers based on where you are hoving within the banner. The Collapse button, The Important Safety Information copy region, The YouTube video and the rest of the banner clicks out to the exit URL.

To solve this issue I used the following approach to target all children of the parent element: Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery

However, this doesn't work for the iframe.

If anyone could point me in the right direction to prevent the banner from auto collapsing when the curser hovers over the YouTube Video/iframe I would greatly appreciate it.

Thanks

Chris DuCharme
  • 71
  • 1
  • 8
  • I believe I had a similar issue before so I used mouseleave or mouseover rather than mouseout. Sorry, I can't exactly recall. – Eric Jul 20 '17 at 21:28

1 Answers1

0

As I see, you are checking on child elements, using the following example:

if (e.parentNode == this || e == this),

So, you can amend it with additional checks,

  • !e to check that not an iframe from cross-domain
  • e.tagName === 'IFRAME' to check that hovered element is not an iframe
  • event.target !== this to check that you are not returning to the banner element

for example:

if (!e || e.parentNode === this || e.tagName === 'IFRAME' || event.target !== this)

So it just an assumption, but the actual expression will depends on the structure of your HTML.

Telman
  • 1,444
  • 1
  • 9
  • 12
  • Thanks. I haven't been able to verify if this works yet because now I'm getting an error. event.target is throwing "Cannot read property 'target' of undefined" – Chris DuCharme Jul 21 '17 at 14:35