views:

46

answers:

1

Edit: I figured this out. jQuery Cycle plugin adds a z-index to every item it works through, thus the first item always had the highest z-index, messing up all the links. Removing the z-index functionality from the plugin has fixed it.

Hi there,

I'm currently building a cycling div using jQuery cycle that has a few inside links. Basically, we have a large banner and then within that large banner I have some absolute positioned div's containing a product, thumbnail to a video, etc. I also have custom paging.

All this works wonderfully, almost. My problem right now is that when the it rotates to the second div, the link in the same position from the first one takes precedence and overlaps the second div's link, therefore rendering it useless for any user interactivity.

Here's the basics of my code to better lay it out. I've also outlined my position placements as in response to the answer below.

    #rotation {
         position: relative;
    }

     .rotation_item {
         position: relative;
     }

     .rotation_box {
         position: relative;
     }

<div id="rotation">
<div id="rotation_container">
      <div class="rotation_item" style="background: url('/some/background.jpg');">
             <div class="rotation_box">
                <img src='/image/for/product.jpg' />
                <h3><a href='/product/page/'>Some Cool Product!</a></h3>
             </div>
      </div> 
      <div class="rotation_item" style="background: url('/some/other/background.jpg');">
             <div class="rotation_box">
                <img src='/image/for/other/product.jpg' />
                <h3><a href='/product/page_other/'>Some Other Cool Product!</a></h3>
             </div>
      </div> 
</div>
</div>

In this scenario, the only link that always show up for clicking is /product/page/

I hope that makes sense, does anyone know how I can prevent this from happening using the jQuery Cycle package, or perhaps some fun CSS settings on each rotation_item?

+1  A: 

My guess would be that your links are positioned in relation to rotation_container rather than rotation_item, and so are hanging around in their given position. If you haven't already, try adding position: relative to the CSS for your rotation_item elements - that may very well fix your issue.

Ryan Kinal
Unfortunately this didn't do it :( I updated my main post with all my current CSS relative positions, including the one your recommended. Thanks for the help thus far.
Bartek
We might need more information then. Can you get a live demo up, or at least post your CSS and/or cycle settings?
Ryan Kinal
I'll setup a demo then, thanks. If there's a way I can contact you privately I'll send you the link to our staging site which has all the design as well. Let me know :)+1 Voted you for now, as well!
Bartek
I won't post my info here, but it's not too hard to find if you start with my profile.
Ryan Kinal