CODEWITHSUNDEEP
javascriptjquerycssjquery-cycle
tejinderss
tejinderss

Reputation: 1652

issue with jQuery Cycle plugin

This was the original division:

http://i.imgur.com/DAoya.png

after applying jquery cycle plugin the image gets out of its bottom border like this:

http://i.imgur.com/4XXgi.png

Any ideas why ?

Here is the css of the division:

#hero {
float: right;
border-top: 1px solid #FFF;
width: 725px;
height: 370px;
background: #666;
}

#wave {
width: 970px;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
background: url(../img/wave.png) no-repeat bottom left;
}

Upvotes: 0

Views: 575

Answers (2)

Stop Slandering Monica Cellio
Stop Slandering Monica Cellio

Reputation: 2321

Position changed from relative to absolute (by the cycle plugin), which caused a z-index change like @Orbling said. If you want the border to be on top of the images in the rotator, you absolutely or relatively position them and give them a z-index higher than the container.

To fix: Explicitly position the lower wavy "border" element (position:relative; or position:absolute;)* and give it a z-index higher than that of the rotator element.

*giving the element a higher z-index than the rotator will not work if the element isn't explicitly positioned. see http://www.webdevout.net/test?0_

Upvotes: 3

mikey
mikey

Reputation: 5160

The cycle plugin uses the z-index, that is likely the source for your problem. From the cycle plugin code:

// set position and zIndex on all the slides
    $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
        var z;
        if (opts.backwards)
            z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
        else
            z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
        $(this).css('z-index', z)
    });

I'd play with the z-index of the "wave" and see if that doesn't help.

#wave {
width: 970px;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
background: url(../img/wave.png) no-repeat bottom left;
z-index: 99;
}

Upvotes: 0

Related Questions