jquery cycle plugin divs always stacked problem

Question

hi!

i want to put three jquery slideshows in a div. somehow, without any css positioning the slides wont display below each other, but stacked. how can i get the sildes to display below each other, just as normal divs would?

    <div id="slidecontainer" style="background-color: red;">

<div id="q1">
        <img src="merkel01.jpg"/>
        <img src="merkel02.jpg"/>
        <img src="merkel03.jpg"/>
        <img src="merkel04.jpg"/>
        <img src="merkel05.jpg"/>
    </div>

<div id="q2">
        <img src="poyan01.jpg"/>
        <img src="poyan02.jpg"/>
        <img src="poyan03.jpg"/>
        <img src="poyan04.jpg"/>
        <img src="poyan05.jpg"/>
        <img src="poyan06.jpg"/>
  </div>


 <div id="q3">
        <img src="mirage01.jpg"/>
        <img src="mirage02.jpg"/>
        <img src="mirage03.jpg"/>
        <img src="mirage04.jpg"/>
        <img src="mirage05.jpg"/>

  </div>


  <div>TEST</div>
  <div>TEST222</div>
  <div>TEST333</div>

 </div>

also, if i add additional test-divs they will also be placed under the three stacked slides... any help vermy much appreciated!!

fusi

Answer 1

Could you give us a link to the source code of the cycle plugin?

Even though there may be no CSS involved, the plugin can still do this with jQuery which is essentially the same thing: element.css('position', 'absolute')

I'm going to go out on a limb here, and suggest you look for anywhere that absolute positioning is applied to the divs and change absolute to static, as that's the most probable cause of your stacked divs.

Edit: found where it's happening, if you're using http://jquery.malsup.com/cycle/

Even though this will probably break it from working properly, you should be able to tweak it to your liking afterwards.

Look for this line (259 in jquery.cycle.js):

$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {

Change it to:

$slides.hide().each(function(i) {

And remove this line (261):

$(this).css('z-index', z)

Which is a few lines below.

More info on jQuery's css method: http://api.jquery.com/css/

Answer 2

Sounds like a position issue.

Change slider elements 'position' style to 'relative', should do the trick.

Kind Regards

--Andy