tkahn/smooth-div-scroll

A jQuery plugin for smooth scrolling. No longer maintained.

smooth-div-scroll's Issues

Hot spot scrolling speed incorrect after the window has been resized

After the browser window has been resized by the user, the hotspots on both the left and right side start to misbehave.

For instance, sometimes the left hotspot will stop working all together, other times the speed variation will be non existant and it will only scroll at a super fast speed or super slow speed. The same can be said for the right hot spot.

How to jump on click to a specific element

Hi,

I was just wondering how I can get the div to scroll to a specific element with an anchor link?

I guess the public method of $("#makeMeScrollable").smoothDivScroll("scrollToElement", "id", "golf");
would work but I don't know how to implement it. Some help would be awesome.

Left hotspot invisible on start

Hi
When I use
visibleHotSpotBackgrounds: 'always',

I don't see the left hotspot until it mouse hover on slider.
Can I fix it?

What about visibleHotSpotBackgrounds: "onhover"?

Was wondering if there should be a method in the visibleHotSpotBackgrounds option to show when the smoothdivscroll container is hovered over?

iTouch effect is a bit buggy when used on desktop (has a fix)

The iTouch effect is great but when I tried to use it on the desktop, Firefox got a bit confused by my swipe gestures. It was interrupting what I was doing as highlighting or trying to move elements of the page.

Rory Powis kindly passed me this fix and it works really well. It prevents dragstart from happening and now iTouch is super smooth on the desktop as well as the iDevice.

$('div#slides').bind('dragstart', function(e) { e.preventDefault(); });

Nice!

Fail to load/Not A Function

Hey.. first off love what you've done here, from the demos I've seen it looks absolutely fantastic.. now if only I could get it to work! :)

In Firebug I get a TypeError: e.Widget is not a function.

I also get a TypeError: $("div.row_1_inner").smoothDivScroll({}); is not a function.

Note the change from #makeMeScrollable to .row_1_inner. I've also tried it with the Demo Page CSS and HTML just to check, and that was broken as well.

Here are some screenshots of my code and the FireBug screencap:

http://i.imgur.com/FoRi8.png
http://i.imgur.com/9hMNA.png
http://i.imgur.com/3RaZ6.png

And the Scripts:

<script media="screen" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> <script media="screen" src="js/jquery.hoverpulse.js" type="text/javascript"></script> <script media="screen" src="js/basic-jquery-slider.min.js" type="text/javascript"></script> <script media="screen" src="js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script> <script media="screen" src="js/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script> <script media="screen" src="js/jquery.kinetic.js" type="text/javascript"></script> <script media="screen" src="js/jquery.mousewheel.min.js" type="text/javascript"></script> <script type="text/javascript"> // Initialize the plugin with no custom options $(document).ready(function () { // None of the options are set $("div.row_1_inner").smoothDivScroll({}); }); </script>

HTML:
div class="row_1_inner"
****************
div class="review_row"
div class="review_album"
img src="image.jpeg"
h5>Blah Blah</h5
p>Blah Blah Blah</p
p class="readmore">a href="">Read More</a</p
</div
</div
******_THIS IS REPEATED MULTIPLE TIMES.. THATS WHY I WANT A SCROLL_

I took out carrots to display it here

CSS:

.row_1_inner {width:100%; height:540px; position: relative; overflow: hidden;}

Any and all help is greatly appreciated. Thanks again!

Hot spot semi transparent arrows not showing up.

The hot spot arrows gifs are not showing up on mouseover. The solid black arrows do show up, but the white, semi transparent arrows don't.

License?

Would you consider dual-licensing this under the MIT & GPL as jQuery is licensed?

Thanks!

This PLUGIN does not work

I downloaded the whole zip file and when I open it on crome or dreamweaver, the images are static. It does not scroll, and does not show how it is supposed to work.

This is a perfect PLUGIN for the site I am creating. So please help me out.

Here's an attached image of how it looks when it is live.

http://i49.tinypic.com/rjoc2r.png

autoScrolling and ajax content fails to start

The only way I could persuade an instance with autoScrollingMode: "onstart" and ajax HTML content to actually animate is to set a callback:

jQuery("div#makeMeScrollable").smoothDivScroll(
    {addedHtmlContent: function(eventObj, data) {    
       jQuery("div#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");
       jQuery("div#makeMeScrollable").smoothDivScroll("startAutoScrolling");
     }
    }
  );

I suspect that the window.load event runs recalculateScrollableArea and sets initialAjaxContentLoaded true while the content is still being fetched. The content fetch callback doesn't recalc because initialAjaxContentLoaded is true, and auto scrolling sees the scrollable content width as zero, so does nothing.

Getting this far turned out to be a long, tiring session of debugging, largely because it came about by way of upgrading to 1.2 without spotting the options API has completely changed, and discovering some largely irrelevant but distractiing bugs that crop up if you leave the explicit sub divs of the "makeMeScrollable" class in. You really need an upgrade guide on the front page of the website :-/

Autoscrolling fails when zoomed

Hi,
when browser content is zoomed (eg: 90%) then autoscrolling doesn't scroll the whole length, only a few pixels and so the image jumps very fast.

Try it out here:
http://smoothdivscroll.com/lab.html
Set autoscroll direction to backandforth, then klick "start autoscroll"
Now scrolling works fine, but try to zoom out (try different zoom values) and the scrolling doesn't work anymore.

Loading content with AJAX on initialization doesn't work well

When loading content on initialization (not loading after the plugin has been initialized) doesn't work or doesn't work well. The problem is that the total width of the scrollable area is calculated to 0 (zero). The reason is probably that the calculation is made before the images have loaded properly.

failed initialization

Just one quick question. I'm trying to get the multiple autoscroller working but after adjusting the code ,only the pictures load and that's it. At first the

$(document).ready(function () {
and
$("#logoParadeTwo").smoothDivScroll({

brought back "not a function" errors ,so I adjusted them as follows

    (function($){(document).ready(function () { 

        (function($){("#logoParade").smoothDivScroll({

and the errors are gone but there is no change in the loading of the page- still only pics.
Any suggestions- great plugin by the way.

Smooth-Div-Scroll inside an UpdatePanel

I'm trying to place a Smooth-Div-Scroll inside a update panel, but after an Asyncronuos PostBack, the controls don't works. If I move the same code outside the update panel, it works fine.

I'm using a miniScroller sample.

Kind regards

Vertical

Hi, although I don't have a bug to report, I was wondering if you have a version that allows for vertical scrolling? I was playing around some with the js but got lost in the code

Auto-scrolling doesn't restart after manual scrolling

Hi,

Not sure if this is a bug or whether its meant to be, but after manually scrolling the auto-scroll doesn't restart. Maybe I have just overlooked something? Is there anyway to change this? I have my auto-scroll set to 'always'

Cheers :-)

I cannot put <a href> links on the pictures in the scroller!

I also cannot incorporate video! Am i missing something ?

As soon as i add < a >, the picture disapears. I have been trying for hours! Is there something in the css, or jquery i need to change for the scroller to support links?

For big galleries - making the scroller work immediately after document.ready

I have a rather big gallery on this site http://ateliermoscow.com/en/stars/, and it's a pain to see the scroller not working until all images are loaded (which may take up to several minutes).
I managed to overcome this by forcing the hotspots showing immediately after the page has loaded (with CSS:

div.scrollingHotSpotLeft, div.scrollingHotSpotRight {display:block !important}; 

and JS:

$('.scrollingHotSpotLeft').addClass('scrollingHotSpotLeftVisible');
$('.scrollingHotSpotRight').addClass('scrollingHotSpotRightVisible');

) and by commenting out lines 1026-1027 in your script:

el.data("scrollWrapper").scrollLeft(el.data("startingPosition"));
el.data("scrollXPos", el.data("startingPosition"));

I guess it's also obligatory to have widths of images declared, so the script could calculate the total width of the scrollable area right from the start. I may not get all the picture, but the gallery now works fine right after first few images have loaded. If you think the idea is good, please consider implementing it in your script.

"move" to left doesn't work

Example page: http://masterbiletov.ru:8080/kassaui/for-thomas/
My code in head
"move" right work correctly, but left doesn't.

Won't autoScroll or mouseScroll to the right

I am trying to have my gallery autoscroll to the right as well as have it be able to mousescroll but it only seems to work in one direction. I'm sure its my implementation of it but I cannot get to the bottom of it.

http://modworldwide.com/10rsq/gallery_test/

Performance issues with autoscrolling

The autoscrolling implementation seems to have huge performance issues, I think there should be a less CPU intensive way of accomplishing this. While I am not going to try to fix this right away I am creating this issue so that there is a record in case someone else makes any progress on this. While testing I found these values to work better than the defaults for cpu performance without much loss in quality - autoScrollingInterval ~ 25, autoScrollingStep 2 although the performance is still pretty bad.

non-Ajax equivalent of changeContent() method and more.

Hello, Thomas.

Please, consider adding following public methods:

1. Method "currentScroll" (or currentOffset maybe?) which will return current offset. Without having it, I need to rip it now from .data("scrollWrapper").scrollLeft() (I found you do it this way in a source code).

2. Method which is Non-AJAX equivalent of changeContent but allowing to just insert(after/before) or replace simple html content. This is how I do it now, ripping more low-level stuff from your source:

$(smooth_div).data('scrollableArea').html(content);

var current_scroll = $(smooth_div).data("scrollWrapper").scrollLeft();

$(smooth_div).smoothDivScroll("recalculateScrollableArea"); 

$(smooth_div).smoothDivScroll('move', current_scroll);

I hope this piece clearly demonstrates the need of the second method.

Maybe, 'currentScroll' method even is not needed, if non-Ajax 'changeContent' will encapsulate preserving of current offset after content change.

Also please see my 'sortable_smooth' branch in my fork of your repo: https://github.com/stanislaw/Smooth-Div-Scroll/tree/sortable_smooth.

See there 'sortable_smooth.html'. It is just your demo index.html with three or four lines added. It is a demonstration of how SmoothDivScroll can play very nice with jQuery Sortable so itt becomes Smooth Sortable Div Scroller. ;)
Maybe you will want somehow adapt it to your examples page.

I found the possibility of this mixture (smooth sortables) very useful in my current project.

That is all!

Thanks for a great work on plugin!

Support classes already created

Hey, couldn't you recreate the scrollWrapper or the scrollableArea again if we already did it on the markup? That'll be nice!

.move method isn't working

check ur code please

Enable is not the exact opposite of disable

Hello,
I disable the smoothdivscroll when I load more content into it.

My smoothdivscroll options :
hotSpotScrolling: true,
touchScrolling: true,
manualContinuousScrolling: false,
mousewheelScrolling: "vertical",

When ajax is done, I enable it back.

But the mousewheel doesn't work anymore, with or without recalculateScrollableArea.

Thanks in advance.

PS : why would recalculateScrollableArea have to go back to the beginning of the scroll ?

scroll vertically up or down

Can "Smooth Div Scroll" scroll content vertically up or down?

Chrome & Safari Issue

Hello,

This one is weird.

Go to firefox:
http://www.smoothdivscroll.com/demo.html

you will see the arrow on the left and refresh you will see it again. - thats correct

Go to Safari & Chrome:
http://www.smoothdivscroll.com/demo.html

no arrow - maybe 1st time - but if you keep refreshing no arrow at all - but if click in the address bar and put there a cursor and click Enter it is going to appear.

What I am having problem is I specified:

visibleHotSpotBackgrounds: "always"

and in Safari & Chrome they are not showing up unless u scroll horizontally they appear or click in the address bar and press Enter. Refreshing doesnt do anything.

bug with IE and Flickr loading

Great plugin! Thank you very much for your continued development.

We're getting ready to launch a new site and are still in development. I've implemented the Flickr feed "replace" event. It works great in FF/Chrome/Safari but IE only shows 1 picture and the scrollable areas are not working.

Thanks very much in advance.

SmoothScrollDiv w/ LazyLoad

Hey I am using this plugin to work with a very large gallery. I need to use LazyLoad to only load the images in the viewport. Nothing seems to be working. If I have 20 images, only 15 will load, then the other ones don't get loaded when they scroll into view.

Any thoughts on what should be done?

Screenshot: http://cl.ly/image/0Y1U1C1Y1L33

Alternative scrolling method?

Hi, Thomas.

Great plugin!

I'm just wondering if it's possible to change the scrolling method slightly? Instead of scrolling when the user hovers over the nav arrows, could the plugin be tweaked to slide through say 3 images when clicked?

Fiddling with the code now to try and make this change, but I'm not much of a jQuery expert.

Thanks.

: )

Tim.

autoScrollingDirection: "endlessloopright" isn't endless

hey there :)

as the title says i am having some problems with the "endlessloopright" option. "endlesslooprleft" works the way it should but when i want to change the direction it somehow doesnt go endless :/

i've tried to alter the code by myself a few times but all i really recognized was the code of "endlessloopright" is not excactly the same as by "endlessloopleft". but playing with these differences just kept on crashing my script -_-

I dont know whether it's a bug or I just did something wrong but i've tried everything that got into my mind ^-^

and sorry for some mistakes i might have written 'cause english isnt my main language :)

the code i am trying to use:

<script type="text/javascript"> // Initialize the plugin with no custom options $(document).ready(function () { // None of the options are set $("div#makeMeScrollable").smoothDivScroll({ autoScrollingMode: "always", autoScrollingDirection: "endlessloopright", }); }); </script>

It's supposed to be a simple slideshow that goes endless :)

Add Gallery after loading the full page

if I apply a setinterval or add

$("div#gallery").smoothDivScroll({
manualContinuousScrolling: true,
visibleHotSpotBackgrounds: "always"
});

after loading the page; the gallery break, have the same issue if you change the zoom of the page

Swipe function

Hi!
I love smoothdivscroll. Just checked it out.

Do you plan on adding swipe functionality for touch devices?

Thanks!

Chris V.

jumpToElement: Element to left or right side

Hi,

I got a slider with a lot of elements (up to 20 images in visible area). If i use jumptoelement the element is every time on another position.

I think it would be useful, if jumpToElement can move the slider, so that the wanted element is on left/right border side of the visible area and not randomly somewhere in the visible area.

If there is another possibility to move an element to the starting- or endpoint of the visible area during runtime, please let me know.

thanks
best regards
ramotzkie

Undefined parameters?

Hi there,
I really love your plugin, it's one of the most fluid and sleek I've seen. I'm trying to use it for my organization's website (having had almost no javascript experience before) and am coming up on some issues. I've added everything to this page: http://go.nbm.org/site/PageNavigator/museum%20shop/general%20shop%20site%20pages/Shop_Slider_Test.html and to our FTP. But as you can see, for some reason the slider is not kicking in.

Using firebug, I see that there are a few places where the jquery or $'s are not defined, but I'm unclear as to why. Do you have any advice? Or is this something that I need a greater knowledge of JS for?

Thanks so much!

touchScrolling over iframe videos

Probably not 100% Smooth Div Scroll related but I can't seem to be able to scroll over iframe content. Is there any method that could be adopted to disable default interaction with the swipe/kinetic function when swiping content on touch devices?

firefox

Hi
Its working great in all browser but it doesn work properly in Firefox 13. The scrolling moves rapidly form side to side
im leaving the url as an example http://www.colegiosantaines.edu.ar/jardin.php

<script type="text/javascript"> // Initialize the plugin with no custom options $(window).load(function() { $("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart" , autoScrollDirection: "backandforth", autoScrollStep: 1, autoScrollInterval: 15, startAtElementId: "startAtMe" }); }); </script>

any ideas?
Thanks

Incompatibility

The plugin-Smooth Div Scroll does-plugins: flexslider and carousel stop working.
What can I do?
I need the three plugins on my site.

Scroll doesn't stop when using "right"

Hello!

It keeps scrolling even when using "right" and it reaches the end. How to fix that?

This is what I use:
$("#footer-manufacturers").smoothDivScroll({
autoScrollingMode: "onstart",
autoScrollDirection: "right",
autoScrollInterval: 60,
autoScrollStep: 2 ,
visibleHotSpotBackgrounds: "always"
});

Callbacks inside wrong test loop

Hi
Great script here.

I couldn't get any callback to work (except setupComplete).
neither scrolledToLastElement nor scrollerRightLimitReached...
even with a simple console.log test function.

I stuck my nose into your code and realised that triggered callbacks were made inside a test about hot spot visibility.
I believe it should rather be triggered in your move function...

Anyway, I worked it out when I set hotSpotScrolling to true.

Thanks !!

Scrolling Doesn't Loop

I saw another thread started that sounded like this issue, but it didn't seem to have the answer I was looking for.

On the demo page, the scrolling ends at the Radio Shack logo and just stops moving, but I thought it's supposed to loop around endlessly like a belt? My scrolling logos are doing the same thing on my website... am I misunderstanding what an endless loop is supposed to do?

Bug with "RTL" direction on FF

Hi,

It took me hours to find this bug...

When you add dir="rtl" to the html tag (<html dir="rtl">) and use Smooth-Div-Scroll, than the script won't work on FireFox.

The only solution I found was to either remove the dir attribute or add dir="ltr" attribute to the div I activated Smooth-Div-Scroll on.

BTW - another issue with having dir="rtl" in the html tag is that it causes IE and Chrome to scroll to different directions.

Thanks,
Amos

autoScrollingInterval doesn't work in .net WebBrowser control

I'm using the pluging with autoScrollingInterval=5 configuration and it works correct in IE9 but there is problem in my windows form application ,when I use .net WebBrowser Control to view the html file ,scroller moves much slow. How to fix that?

$('#scrollingText').smoothDivScroll({
autoScrollingMode: "onStart",
autoScrollingDirection: "endlessLoopLeft",
autoScrollingInterval: 5,
autoScrollingStep: 1,
hotSpotScrolling: false,
});

AJAX Scroll Alignment Issue

Hi,

I'm not sure whether this is an issue with Smooth-Div-Scroll or just me using it wrong.

Basically I have built a site for my school - http://wgsb.cobainschofield.com - and on the homepage you'll notice the scrolling images. In firefox and internet explorer the image captions align perfectly however in Google Chrome the captions align ok initially and then jump out of position once it begins to scroll and I can't work out why its happening.

If you have any idea what is causing this, or any pointers of how to fix it it'd be much appreciated. Apart from this small issue I've found it really easy to use and customise and I think its a great little plugin!

Thanks

Cobain.

Continuous Loading

Hi,

Is there something planned like continuous image loading? It would be very useful when using smooth-div-scroll on a portfolio page with big images. At the moment, all 50 images are loading and you have to wait. It takes a long time. Or is there another solution to always load for example 10 images?

Thanks,
pp

css oddity

Wonderful piece of code, just one thing I seem to run into:
if I give the body a margin of 0 or 0px and I have autoScrollingMode set to onStart, in Chrome and Safari the div starts scrolling very quickly right to left, regardless of default settings or added settings for autoScrollingDirection, autoScrollingStep or autoScrollingInterval. If I leave the body margins to default or set them to 1px, or anything other than 0, it immediately resumes working as intended: a smooth left to right scroll.
I've resolved it with a workaround but thought you might want to know, in case this isn't intended behavior.
Thanks!

Width 100% Bugs?

I was having some bugs with the scroller when it was at 100% but there weren't enough items to reach the end of the browser.

Have you experienced this before?

Thanks!

ps: will be donating soon! Love this plugin ;)

Touch support

I'm very interested to add touch support (iPad/Android tablets) to smooth div scroll. In fact I'm willing to pay for that feature.

In stackoverflow you say (tkahn) that seems not hard to do that, please, can you add this feature. Thanks.

Play/Pause button working with hot spots

I'm using the plugin with a simple configuration:

$("div#makeMeScrollable").smoothDivScroll({
        autoScrollingMode: "onStart",
        autoScrollingDirection: "right"
});

So I need to add a play / pause button. And did the following:

$("#btn").text('pause');
$("#btn").toggle(
        function(){
                $("#makeMeScrollable").smoothDivScroll("stopAutoScrolling")
                $(this).text('play');
        },
        function(){
                $("#makeMeScrollable").smoothDivScroll("startAutoScrolling")
                $(this).text('pause');                          
        }
)

This works well. But when I click on one of the hotspots with the scroll paused, I have to click twice on the play / pause button to pause the scroll again. Is there a way to fix this?

Thanks for this great plugin. Many brazilian developers use it.

UPDATE:

I tried this and it worked for a while, but after the page crashed

            $("#makeMeScrollable").smoothDivScroll({autoScrollingStopped: function(eventObj, data) {
                $('#btn').text('play');
                $('#btn').click(function(){
                    $("#makeMeScrollable").smoothDivScroll("startAutoScrolling")
                });
            }});            

            $("#makeMeScrollable").smoothDivScroll({autoScrollingStarted: function(eventObj, data) {
                $('#btn').text('pause');
                $('#btn').click(function(){
                    $("#makeMeScrollable").smoothDivScroll("stopAutoScrolling")
                });
            }});            

Timer delay between each slide

HI there. Firstly, your plugin made my client very happy and my job a lot easier. Secondly, try as I might I cannot discern whether there is a function to pause the each slide before it moves on e.g. 3 seconds and then ease to the next the image. Is this something already there or in the pipeline? Thanks for your help in advance and apologies if I'm wasting your time by not understanding the documentation that comes with the plugin..