CODEWITHSUNDEEP
jqueryjquery-plugins
user1575251
user1575251

Reputation: 39

Simply scroll Plugin Jumping to start

Hi i am using simply scroll plugin from this site http://logicbox.net/jquery/simplyscroll/

but i am having problem that when the scroller comes to the end and tries to loop back to the beginning instead of doing it with a smooth transition, it jumps back to the beginning which is a little rough on the eyes and clients are not liking it very much.

you can see the problem if you go to this site http://www.newwhey.com/ and look at towards the bottom where it says our retailers, and i have logo's scrolling down there once it gets to the end it jumps back, i am having same problems with other sites using this simply scroll any suggestions?

here is what i have for code so far

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.simplyscroll.js"></script>



<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/js/jquery.simplyscroll.css" media="all" type="text/css">

<script type="text/javascript">

(function($) {
    $(function() {
        $("#scroller").simplyScroll({
        autoMode: 'loop',
        width: 3000,
        startOnLoad: true
        });
    });
})(jQuery);
</script>

here is my css file for the simply scroll that is included in the top

/* Container DIV - automatically generated */

.simply-scroll-container {
    position: relative;
}

/* Clip DIV - automatically generated */

.simply-scroll-clip {
    position: relative;
    overflow: hidden;
}

/* UL/OL/DIV - the element that simplyScroll is inited on    
Class name automatically added to element */

.simply-scroll-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}   

.simply-scroll-list li {
    padding: 0;
    margin: 0;
    list-style: none;
}   

.simply-scroll-list li img {
    border: none;
    display: block;
}

/* Custom class modifications - adds to / overrides above
    .simply-scroll is default base class */

/* Container DIV */

.simply-scroll {
    width: 1576px;
    height: 200px;
    margin-bottom: 1em; 
}

/* Clip DIV */

.simply-scroll .simply-scroll-clip {
    width: 1576px;
    height: 200px;
}   

/* Explicitly set height/width of each list item */ 
.simply-scroll .simply-scroll-list li {
    float: left; /* Horizontal scroll only */
    height: 200px;
}

Upvotes: 1

Views: 6711

Answers (2)

HeyitsKJ
HeyitsKJ

Reputation: 1

By exaggerating the overall ".simply-scroll" width to accommodate the scrolling elements it shouldn't skip and restart. ".simply-scroll-clip" will hide the overflow.

.simply-scroll {
  width: 6000px;
  height: 200px;
  margin-bottom: 1em; 
}

.simply-scroll .simply-scroll-clip {
  width: 1576px;
  height: 200px;
}

Upvotes: 0

JAR.JAR.beans
JAR.JAR.beans

Reputation: 10034

why do you have the "width" value set on the plugin?

$("#scroller").simplyScroll({ autoMode: 'loop', width: 3000, startOnLoad: true });

And than also:

$("#scroller .simply-scroll-list").css({"width":"auto"})

It seems like you re playing with the width of the elements outside the "knowledge" of the plugin and after it's init.

I suggest to try and remove that and simply use the container width from CSS, no need for JS here.

Upvotes: 1

Related Questions