Expand on Mouse over, Collapse on Mouse out

[Glennise Pascua]

Hi Team,

I have an Expanding creative that will expand and collapse on mouse over/mouse out. I'm having issues with Expanded page that will collapse on mouse out.  I have a tap area component for X Close Expanded that will collapse and go to Banner page on click. I also have an event for Expanded page that will collapse and go to Banner page on mouse out. Upon hovering on the Tap area for X Close Expanded, the page collapses which should not happen.

Any ideas to fix this?

Thanks,

Glennise

[Jaz]

Hi Glennise,

Would you be able to reply and upload an unpublished sample of this same issue? We'd love to take a look.

thx
jaz
Program Manager, Google Web Designer

[Glennise Pascua]

Hi Jaz,

Apologies for the late response. Here's my working files. 

My asset has whole collapse on mouse over for expansion and a close button or mouse out on creative to collapse. The collapse and expand functionality doesn't seem to work right. Please advise.

[San Khong]

Hi Glennise,

This issue was reported to us before.  With the mouseout event, the ad would collapse when the mouse moved onto a child element inside the expanded area.  There was a workaround provided that checks the target for the event before executing the collapse. The collapse only happens if the target is not a child of the object triggering the event.

It looks like the file you sent already had the workaround added in the mouseout event.

custom event for mouseout event on exp_elements:

var target = event.relatedTarget || event.toElement;

while (target && target != this && target != document.body) {

  target = target.parentNode;

}

if (target != this) gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'banner-page', 'none', 1000, 'linear', 'top');

Your file works fine for me when previewing on all browsers.  On hover over the close button, it does not collapse.  I did see a different problem on Firefox in which clicking on the close button would trigger the expand after collapse though.

San

[edwo...@gmail.com]

Hello Glennise and San,

I am glad to find this post. I have the same question and this is exactly the solution I am looking for. I download your working file, and your file is working fine, but I am not able to apply to my project.

I am new to GWD... why in the expanded page, I don't see anything except the exp_element DIV? I think you wrap it with the DIV, but how do I do it? Please help, thank you!

Edwin

[edwo...@gmail.com]

I meant, I know how to wrap everything in a div, but I want to un-wrap it, to break down the elements.. thanks!

[San Khong]

Hi Edwin,

To unwrap it, you can select the element, right click and select Break apart.

You can put anything you want in the expanded page.

San

Google Web Designer team

[hd.ale...@gmail.com]

Hello,

sadly i'm having the same problem, I put the above mentioned code snippet into the function where my exit-button handles its mouseout-event. The result is the same. As soon as i hover over the close-button the ads closes.

Any suggestions?

Thanks
Alex