Jump to content
Search Community

Multiple clickthroughs in HTML5 high impacts

somnamblst test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

When I was doing Flash Rich Media the clickTag button that covered the entire area of the banner was clickTag1 AKA general click. Additional CTAs simply needed to be smaller and on a higher layer in Flash and labeled as clickTag2, etc..

 

Starting with this  awesome pen:  

See the Pen kDvmC by bassta (@bassta) on CodePen

I  modified it to be usable as an IAB Billboard, because those dimensions (970x250) lend themselves to doing cool stuff with interactivity.

 

I have defined 970x200 as the clickTag0 general click. However in the interest of as much interactivity as possible, I want to be able to have individual CTAs  for each slide and or previous and next slide functionality.

 

I tried z-index, but I can't get it to work. I changed the cursor to crosshair, so I know I am clicking on the text link and not the underlying clickTag0, but any clicks are going to var=clickTag0. 

 

My pen

 

See the Pen RWyXmJ by anon (@anon) on CodePen

 

I do find z-index confusing.

Link to comment
Share on other sites

By default, things on a html page are ordered as they are read by the browser, from the top of the code to the bottom.

 

Z-index allows you to break that order (do not ask me how, thought). Think of it as the layer order, the bigger the number the higher up on the stack. The gotcha is that is really only does anything if you position the element absolutely.

 

What I see happening is that you're triggering both the tween and the clicktag, that's happening because you've got the onclick event on the div that contains the text you're clicking but you are not defining if you want the click to be handled on capture or bubble. There's loads of explanations about it around ( I always get confused on how to do that sort of thing as well).

 

You'll need to stop the propagation once you hit the text, that way, you won't trigger the clicktag.

 

See the Pen RPmrzo by dipscom (@dipscom) on CodePen

that I use on my ads. I just added a bit that stops the propagation of the click (it was something I was bound to do, at some point, anyway). Click on the text of the third box from the top, and click on the box itself. The boxes at the very top will tell you who you have clicked and hovered.

Link to comment
Share on other sites

Thanks Dipscom!

 

I don't really care about previous and next that much, given the prominence of the navigation, so I just changed it to a class called CTA

 

See the Pen RWyXmJ by anon (@anon) on CodePen

 

Not sure when or if I will get to do an HTML5 IAB Billboard so I am hoping other banner ad creators will find this useful. Could be used for a Broadway Season with Buy Ticket links in each slide.

Link to comment
Share on other sites

Hello somnamblst,

 

Without having to change all the code you have so far for all your navigation. And since you are using a mix of inline JavaScript and embedded jQuery. The simplest route is to just add an if statement around your onclick event for #banner_exit

 

If your secondary navigation buttons are always going to be a <span> tag, then just check if it is not a span tag, and the main global click will not get fired for your onclick.

 

Example:

 

See the Pen MaXgBo?editors=100 by jonathan (@jonathan) on CodePen


 

<div id="banner_exit" onclick="javascript:if(event.target.tagName != 'SPAN'){window.open(window.clickTag0)}">
...
</div>

If it was me i would have the onclick be embedded with the rest of your JS code, unless the ad delivery network requires a onclick tag for the main click?

 

Then you could just use event bubbling and event delegation to catch the event.target of the element clicked. And if it is that element then you can do stuff or not.

 

Another way but it is a little convoluted since the onclick will only check the first condition even though there are 2 conditions by the OR ( || ) operator. So you can have empty if else but this would work to checking the class name go-prev or go-next

<div id="banner_exit" onclick="javascript:if(event.target.className != 'go-next'){ } elseif(event.target.className != 'go-prev'){ } else {window.open(window.clickTag0)}">
...
</div>

But just some advice on CSS position relative and absolute and z-index.

 

In CSS when positioning multiple element within a parent. Is you would have position:relative on the parent (no z-index required). Then its children that need to be positioned all around, would have position:absolute on them. Then you would use z-index to arrange the stacking z-depth (not z-axis) of the elements.

 

If you need to have a absolutely positioned element that needs to have other children with absolute positioning. Then you should create an additional div or element inside that. Apply position relative on it and then place those other children inside that div with position:absolute.

 

The reason that is, is because when you position an element absolutely. It needs to be positioned absolutely, relative to its parent. 

 

Position relative guarantees that its children will always be relative to its parent. Otherwise you will have no control of your elements. This is the very nature of positioned elements in CSS. As a rule of thumb anytime you have position absolute on an element. You must have a parent or ancestor that has position:relative to make sure it is relative to something. Never use the <body> tag as point of reference for absolutely positioned elements, it will fail cross browser, and save you migraines.

 

Have a look at the below resources regarding position:absolute and relative. Once you know that, then using z-index will be easier to handle.

 

Placing z-index on a parent element wont effect the z-index of a child, as far as setting new z-index stacking. Some browsers like IE will not inherit z-index, without being specified. Be careful setting nested elements with multiple z-index that will cause headaches and cross browser mayhem.

 

So you really dont need z-index on your main .slides-container

 

Resources.

CSS position: https://developer.mozilla.org/en-US/docs/Web/CSS/position

CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

JS event delegation and event bubbling: http://javascript.info/tutorial/bubbling-and-capturing

 

I hope this helps!

  • Like 1
Link to comment
Share on other sites

Thanks Jonathan!

 

 

Since I don't have a reason to use this yet, and I do want it to be as simple as possible for anyone regardless of their undestanding of javascript to use this for any number of CTAs or for none, and because DCM requires that the clickTags be defined as AdOps will be responsible for entering the URLs in DCM, I am going to leave it as is.

 

var clickTag0 = "https://www.google.com";
    var clickTag1 = "https://www.yahoo.com";
     var clickTag2 = "https://www.adobe.com";
 
I am hoping that if enough people get a chance to do interactivity in a high impact, marketing people will see them, and Dipscom and i will get to do Rich Media. My previous Rich Media experience was due to working for a Publisher, who needed to wow advertisers to get them to spend more money. I am on a much tighter leash now, and marketing doesn't know what is possible.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...