Featured Content Slider v2.4 (content items keep jumping)

[orbitrod]

1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

3) Describe problem:

I setup this script here http://www.craigsanquhar.com/index4.html

I have the script set to auto display mode, so that the individual content automatically rotates. But for some reason the script tries to load the next content item below the current content item. Therefore giving it the appearance that the content items jumping from one to the next.

However once you mouseover the pagination links, the jumping stops. And the content slider smoothly transitions from one image to the other.

How can I make the content images stop jumping?

[ddadmin]

Right now you have display:block in two of the contents- make sure all are hidden initially, by changing them to display:none:

<div class="contentdiv" style="background: url(themes/2010/i/apparel_img_s1.jpg) no-repeat scroll left center transparent; display: none; z-index: 802; opacity: 1.1; visibility: visible;"></div>

<div class="contentdiv" style="background: url(themes/2010/i/travel_img_s1.jpg) no-repeat scroll left center transparent; display: block; z-index: 803; opacity: 1.1; visibility: visible;"></div>

<div class="contentdiv" style="background: url(themes/2010/i/weddings_img_s1.jpg) no-repeat scroll left center transparent; display: block; z-index: 804; opacity: 0.1; visibility: visible;"></div>

<div class="contentdiv" style="background: url(themes/2010/i/hotel_img_s1.jpg) no-repeat scroll left center transparent; display: none; z-index: 801; opacity: 1.1; visibility: visible;"></div>

[orbitrod]

I tried that but it still jumps. Would image size have anything to do with it? Some of the content images are over 700KB.

[ddadmin]

Ah I think I see what the problem is. In your CSS, you've removed certain styles associated with the .contentdiv class. Inside contentslider.css you have:

.sliderwrapper .contentdiv{
	visibility: hidden; /*leave as is*/
	left: 0;  /*leave as is*/
	top: 0;  /*leave as is*/
	padding: 5px;
	background: white;
	width: 950px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
	height: 487px;
	display:none;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	display: none;
}

It's missing position:absolute, which must be present. Here's the default code:

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

[orbitrod]

Yes you are right, adding position: absolute to the .sliderwrapper .contentdiv class fixed the problem.

But I also had to add position:relative; to the contents not to mention put them inside a table, so that they would still center on the page.

Here is the code for anybody else who has a similar problem like this.

<div style=" width:950px; margin:auto; display:block; overflow:hidden">
<table width="950" border="0" cellspacing="0" cellpadding="0" >
  <tr>
    <td><div id="slider4" class="sliderwrapper">

<div class="contentdiv" style="background: url(themes/2010/i/apparel_img_s1.png) center left no-repeat; display: block; position:relative; z-index:1"></div>

<div class="contentdiv" style="background: url(themes/2010/i/travel_img_s1.png) center left no-repeat; display: block; position:relative; z-index:2"></div>

<div class="contentdiv" style="background: url(themes/2010/i/weddings_img_s1.png) center left no-repeat; display: block; position:relative; z-index:3"></div>

<div class="contentdiv" style="background: url(themes/2010/i/hotel_img_s1.png) center left no-repeat; display: block; position:relative; z-index:4"></div>

</div>
</td>
  </tr>
</table>

</div>