Results 1 to 5 of 5

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

  1. #1
    Join Date
    Nov 2007
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

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

    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?

  2. #2
    Join Date
    Aug 2004
    Posts
    9,895
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

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

    Code:
    <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>
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    orbitrod (01-04-2011)

  4. #3
    Join Date
    Nov 2007
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

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

  5. #4
    Join Date
    Aug 2004
    Posts
    9,895
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    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:

    Code:
    .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:

    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;
    }
    DD Admin

  6. The Following User Says Thank You to ddadmin For This Useful Post:

    orbitrod (01-04-2011)

  7. #5
    Join Date
    Nov 2007
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.
    Code:
    <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>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •