JQuery Supersized Plugin Problem with Anchor Tag

Question

I'm currently utilizing the Supersized plugin for JQuery and I'm running into a problem with the anchor tag for the banners not being clickable.

I have Supersized being appended to a div tag instead of the body tag.

I set "#supersized" and "#supersized li" to be positioned absolute to fit properly within the containing div. But that dang anchor link will not overlay over the image and be clickable. I've tried increasing the z-index to 90.

I've tried everything I know but I still can't get it to work. I placed a border around the anchor tag and it pushes the image down but it's not clickable.

CSS

img { border:none; }

#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}

  #supersized {  display:block; position:absolute; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
  #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
  #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }   /*Speed*/
  #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }         /*Quality*/

  #supersized li { display:block; list-style:none; z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
  #supersized a { width:100%; height:100%; display:block; }
     #supersized li.prevslide { z-index:-20; }
     #supersized li.activeslide { z-index:-10; }
     #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
        #supersized li.image-loading img{ visibility:hidden; }
     #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }

JavaScript

<script type="text/javascript">

     jQuery(function($){

        $.supersized({

           // Functionality
           slide_interval           :   3000,      // Length between transitions
           transition                 :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
           transition_speed      :   700,      // Speed of transition

           // Options
           fit_always                 :    0,
           fit_portrait                 :    0,
           horizontal_center     :    1,
           slide_links                :    'blank',   // Individual links for each slide (Options: false, 'number', 'name', 'blank')
           vertical_center         :    1,

           slides  :     [ 
                       {image : 'images/homepageBanners/banner1.jpg', title : 'Banner 1', url : "http://www.yahoo.com"},
                       {image : 'images/homepageBanners/banner2.jpg', title : 'Banner 2', url : "http://www.yahoo.com"},
                       {image : 'images/homepageBanners/banner3.jpg', title : 'Banner 3', url : "http://www.yahoo.com"},
                       {image : 'images/homepageBanners/banner4.jpg', title : 'Banner 4', url : "http://www.yahoo.com"}
                    ]
        });
      });

</script>

HTML is a simple div tag contained in page wrapper. I changed the output of the Supersized slider so that it appends to the div tag instead of the body tag.

<div id="HomePageBanners"></div>

The javascript in supersized has been altered to append to the above div tag:

$(document).ready(function() {
     $('#HomePageBanners').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
});

Answer 1

Ok there are 2 things wrong with your code, first you have an insane negative z-index on #supersized automatically pulling everything in it down to the bottom too...

What you want to do instead is have #supersized have a modest z-index, then everything that needs to go above it gets one a little higher... Or the link will be blocked by standard elements like body...

Secondly visibility:hidden makes sure the link is not visible and will block the href too... afaik.

Heres your code, css and js, tweaked, with a working link in the example area left bottom http://jsfiddle.net/sg3s/daeL3/

As a bonus heres how I debugged it: if you use the element inspector in either firefox/firebug or in chrome the very first element you can directly click on will be the top element. So using that I was able to determine that body was blocking the link. Secondly since I can't directly see the link I added some text in it... With little effect so I selected the link and worked my way up through it's styles and all of the parents eliminating things that can block the display of the link, narrowing it down to visibility: hidden

Additionally the little js snipped on the end is just an alternative way to make sure that what you're clicking is what you think it is...