TURNJS UNBIND CLICK EVENT

Question

I am using the JS library turnjs for a flip book and it works great. I added a logo and a link for visitors to be able to return to home page. The link back to the home page is hidden on load and set to display with a delay of 7 seconds but when you click on the link nothing happens.

I looked around for suggestions and found a few but still have not been able to to get the link to work. Here is the code I am using for the link:

CSS:

.inicio {
border: 3px solid white;
color: white;
left: 10px;
padding: 10px;
position: absolute;
top: 150px;
}
a {
color: white;
}

HTML:

<header>
<img src="losgens.png" class="logo" alt="Los Generales Revolucionarios">
<h3 class="inicio"><a href="http://www.losgeneralesrevolucionarios.com/" class="click">INICIO</a></h3>
</header>

JQuery:

<script>
$(document).ready(function(){
    $("h3.inicio").hide()

        setTimeout(function() {
            $("h3.inicio").fadeIn(1500);
        },7000);

    $('a.click').unbind('click');
});
</script>

I found the $('a.click').unbind('click'); as a suggestion (amongs others) but it does not enable the click function. Any ideas??

Answer 1

I kept looking around for an answer and trying different things and I realized upon inspection with firebug that I could not select with the mouse the targeted area (the link) and that perhaps it had something to do with it's z-index. By increasing its z-index I noticed I could now select it and the link now works. So the solution was to modify the css like this:

.inicio {
border: 3px solid white;
color: white;
left: 10px;
padding: 10px;
position: absolute;
top: 150px;
z-index: 1000; /* the handling! */
}

Here is the link:

http://www.losgeneralesrevolucionarios.com/menu/