Jump to content
Search Community

Tricks for Invisible buttons

Dipscom test
Moderator Tag

Go to solution Solved by Jonathan,

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

Internet Explorer being the wonderful joy that it is, does not play ball like all the other browsers that I test with. So, I was wondering what tricks people had and what behaviour they have noticed when creating the large invisible button for banners in general.

 

Not the acual clicktag itself, just how to make sure it behaves like a button.

 

I use one of two techniques depending on my mood and whether theres need for roll over states.

 

Technique 1:

 

A transparent 1x1 gif, set to 100% width and height. Then, good old javascript to handle the click.

 

HMTL

<img src="transparent.gif" id="clicktag" />

CSS

#clicktag {
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
}

JavaScript

document.getElementById("clicktag", onClick);

function onClick() {
// Relevant code
}

Technique 2:

 

I write a loop that add the click functionality to all assets (div, images, paragraphs, etc) and the cursor CSS rule. Then, I have the onClick function filter who's been clicked and decide what needs to be done.

 

The reason for that is because I have seen IE not working correctly with a third technique I used - an empty <div> tag, similar to the transparent pixel one.

 

I am still not 100% sure the transparent pixel works because I have not tested enough. But it seems to me that the cursor: pointer CSS does not always work in IE. Does anybody else see this or am I just with a broken copy of this crazy browser?

 

 

Link to comment
Share on other sites

There are some known issues with trying to make empty/transparent elements clickable in IE.

 

http://fromanegg.com/post/47412363539/transparent-links-not-clickable-in-internet

http://stackoverflow.com/questions/15189182/ie-css-link-under-transparent-box-is-clickable

http://stackoverflow.com/questions/9109911/ie-z-index-trouble-on-element-with-transparent-background

 

I just make a white div at the highest z-index and set the opacity to 0.  The transparent gif option works fine too, though.

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

That is indeed an interesting read. I will have to go back to it and re-read it a couple more times to digest the whole idea.

 

The invisible button is to trigger the clicktag. On standard ads, you only have one clicktag (one destination url), on rich media (or enhanced banners) you can have multiple clicktags.

 

By default your clicktag should be at least 75% of your ad size - I always make the default (aka, invisible button) 100% and place any other buttons on top of it using z-index.

 

Because ad publishers will always have you trigger a JS function anyway, there is not much pressure/need to consider the scenario where the user has JavaScript disabled. As far as I know, no JS, no ad so, no worries.

 

Also, because of that, you will always want to handle the click using JavaScript anyway so you can hook up all sorts of other behaviour with that. Like, stop any sound/video, jump to the endframe, fire a counter, etc.

 

In any case, that's an interesting tip I will be looking into (along a million other things I have in my to-look-into list). Thanks OSUBlake.

Link to comment
Share on other sites

  • Solution

What version of IE are you using?

 

Your not crazy Dipscom, IE has always been the crazy browser! Sometimes you have to loosen the straight-jacket to get IE to play nice ;)

 

What i usually do when dealing with the click  event on a empty <div> tag in IE .. is to add a non-breaking space     in the empty div tag.

<div id="clicktag"> </div>

IE has been known to have a really strict HTML parser! So a empty div tag is removed from the render tree, and not available to event binding. But IE will treat the non-breaking space as a text node with an HTML entity. This will allow IE to fire your click handler on the empty div.

 

I prefer this method vs the transparent <img> tag hack.

  • Due to there not being a request to the server for a 1 pixel image,
  • Less HTML markup
  • No need for additional CSS styles like background-color or opacity, so less to render
  • And less code to write :D

Official list of HTML entity identifiers:

 

http://dev.w3.org/html5/html-author/charref

 

I hope this helps :)

  • Like 2
Link to comment
Share on other sites

Hey Jonathan,

 

Apologies for the long sinlence. Been away (I am still away, actually, just had a bit of time to come to the forums) for a while.

 

I, like many of us, test in as many versions of IE as possible. The version I have installed is the latest one as far as I am concerned. Haven't looked at Edge yet, might also be worth doing so... IE8 is, of course, ignored. I am part of the selected few who can just say no to it and refuse to provide support.

 

Now, the   trick is the sort of thing I like for this sort of situation. Definetly will be using that instead of the empty gif. Thank you for that.

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