tkahn / smooth-div-scroll Goto Github PK
View Code? Open in Web Editor NEWA jQuery plugin for smooth scrolling. No longer maintained.
A jQuery plugin for smooth scrolling. No longer maintained.
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
Hi
When I use
visibleHotSpotBackgrounds: 'always',
I don't see the left hotspot until it mouse hover on slider.
Can I fix it?
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.
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.
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_
CSS:
.row_1_inner {width:100%; height:540px; position: relative; overflow: hidden;}
Any and all help is greatly appreciated. Thanks again!
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,
});
Hello, Thomas.
Please, consider adding following public methods:
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).
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!
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 !!
check ur code please
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
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.
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..
Hi!
I love smoothdivscroll. Just checked it out.
Do you plan on adding swipe functionality for touch devices?
Thanks!
Chris V.
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!
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?
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?
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.
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
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.
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
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?
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")
});
}});
Was wondering if there should be a method in the visibleHotSpotBackgrounds option to show when the smoothdivscroll container is hovered over?
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.
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 ?
Hey, couldn't you recreate the scrollWrapper or the scrollableArea again if we already did it on the markup? That'll be nice!
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!
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
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
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.
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 ;)
Can "Smooth Div Scroll" scroll content vertically up or down?
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.
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 :)
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 :-/
Example page: http://masterbiletov.ru:8080/kassaui/for-thomas/
My code in head
"move" right work correctly, but left doesn't.
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"
});
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.
The plugin-Smooth Div Scroll does-plugins: flexslider and carousel stop working.
What can I do?
I need the three plugins on my site.
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
any ideas?
Thanks
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
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.
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.
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 :-)
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.
Would you consider dual-licensing this under the MIT & GPL as jQuery is licensed?
Thanks!
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!
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.