Fixes
- Fixed the problem when scrolling the window to absolute positioned elements on Safari.
- Fixed the problem on Opera 9.5 when scrolling the window. That it always scrolls to 0.
Features
- Added the settings object as 2nd argument to the onAfter callback.
- The 3rd argument of scrollTo can be just a function and it's used as the onAfter.
- Added full support for iframes (even max scroll calculation).
- Instead of $.scrollTo, $(window).scrollTo() and $(document).scrollTo() can be used(even for iframes).
- Added $().scrollable() that returns the real element to scroll, f.e: $(window).scrollable() == [body|html], works for iframes too.
I rewrote the scroll limit calculations part, in order to fix the 2 bugs. If you notice any problem, please report.
This version should be perfectly compatible with the latest versions of SerialScroll and LocalScroll.
I tested this only with jQuery 1.2.6 (from trunk) but it should work well even with pretty old versions of jQuery.
Tested my demos and some iframe experiments on IE 6/7, FF 2/3, Safari 3 and Opera 9.2/5. All worked as expected. Enjoy!
115 comments:
Just curious, has anyone ever come up with a smooth scroll implementation that doesn't break the back button?
What do you mean by "break the back button" ?
BTW, you're referring to LocalScroll, not ScrollTo.
Yes, sorry about posting to the ScrollTo page. Feel free to move the comment if you like.
What I mean by breaking the back button is that when using a javascript scrolling animation to facilitate in-page links, the expected functionality of the back button is broken for many users.
I've seen this in countless usability studies on sites that implement an animation for in-page links.After clicking an in-page link and being taken to the appropriate location on the page, the users expectation is that the back button would take them to the previous location on that page. However, due to the javaScript implementation, this is not the case, instead the back button takes them to the previous unique URL in their history, because the URL was never updated by the in-page link.
Normal in-page links avoid this by updating th URL in the history to include the hash and corresponding id value for the anchored location. However, they pose the issue of being disorienting to the user because of the visual "jump" down the page.
So what I'm looking for would be the best of both worlds, an animated page scroll to provide the user with visual feedback that they are being moved to another location on the same page, and an updated URL in the users history in order to keep the behavior of the back button in line with user expectations. I imagine it would be something like a cross between your localScroll plugin and Asual's SWFAddress (http://www.asual.com/swfaddress/)
Hi SnailFace
It is possible to change the url using localScroll, with the option 'hash'.
But yes, it doesn't revert the scrolling when hitting the back button as far as I remember.
I tried a few things but they just failed, so I quitted trying.
I'll give that another shot if I get the time.
Cheers
Hi Ariel, awesome redo of a very popular plugin! Thanks!
I was just wondering how you fixed the scroll issue in Opera where it went to the top and then scrolled down?? I'm very interested but cannot figure out how you fixed it by looking at your code...
Hi James
The conflicting code was inside max().
It had a special hack for Opera, but since 9.5 they fixed the problem and made it "standard". So an obvious solution was to check the Opera version.
I had that 2nd hack on the trunk, but then got to a cleaner/simpler approach (thanks Brandon Aaron) that works well for all browsers (hopefully).
Hey! I missed this release!
I've already upgraded a site and so far, it's working perfectly.
Thanks for fixing the Opera bug.
Now, it just remains a minor IE6/7 bug on LocalScroll ;)
But let's talk about this later.
Thanks again for your hard and great work, and remember that a tip is about to be dropped on your jar any time soon, I promised.
Thanks Julian :D
Thanks man, great plugin, really useful!
Hi!
The plugin is amazing, thanks for great work.
May I translate your article and demo from English into Russian? Of course with link to your blog.
I am sure it will be interesting and very usefull for russian-speaking developers.
Hi Viktor
You can surely do that. Post a link then so others can follow.
It`s done.
So, here are translation and demo
thanks for the plugin!
@Anonymous
You're including jQuery AFTER jquery.scrollTo. Just fix that.
@chris
Indeed, the jumpy animation doesn't look too good.
3 things:
- Don't let the '#' appear on the address bar. That's probably causing the jump. Add return false on each link binding.
- Try adding: jQuery.scrollTo.defaults.queue = true;
That could improve the effect.
- Consider using LocalScroll instead of hand coding each position. It's also on this blog.
Ok, it now scrolls.
How o I eliminate the "flash" that happens sometimes on clicking the links?
@jordan:
could you try this?
$('#one').click(function(){
$.scrollTo( '#two', {duration:3000} );
return false;
});
$('#two').click(function(){
$.scrollTo( '#one', {duration:3000} );
return false;
});
(the "return false;" is the trick: I tried it on Firebug console and it worked for me).
@Maniquí
Worked a charm! Thank you very much :D
Hello, my congratulations for the development of this plugin.
I'm having trouble working with the plug-in IE6, the real problem is that the plugin does not work in IE6. In FF, IE7 the plugin works fine, but does not work in IE6.
See:
http://www.mariaaugustarossini.com.br/temp/palestras.html
Probably because of the IE7 script. I suppose it does something to fix PNGs. That breaks many things, one is scrolling in some situations.
I don't know exactly the workaround (if there's one).
Thank you for responding so quickly, but I'm not sure, it withdrew the code to fix the bug of transparency and even then the script does not work in IE6. = /
You need to give dimensions the container(mentioned on the troubleshooting).
Give #slide_de_fotos a width of around 820px. That will do.
Hey there ariel,
Is there anyway to stop the scroll once its begun?
As an example, say I've got a a scroll with a long, long duration, is there a function i can call (via something like onclick etc) to stop it?
Yes, simply call $(...).stop() that is a built-in method of jQuery to stop animations.
Ariel Flesler. thanks. is now working! As you said, lacked define the width, thank you for your help, VLW.
All the best for you.
t +
Hi Ariel,
I'm experimenting with the onAfter and onAfterFirst functions in the arguments of serialScroll.
I want to scroll the div back to start after it finishes the whole list of li elements, how do you think that needs to be done?
The onAfter scrolls back to the start after EACH li, but I need to have that after the last. Please help?
My code so far:
$('#slideshow').serialScroll({
items:'li',
prev:'#screen1 a.prev',
next:'#screen1 a.next',
axis:'x',
offset:0,
start:0,
duration:500,
interval:3500,
force:true,
stop:false,
lock:false,
cycle:false,
jump:true,
onAfterFirst:function(){$('#slideshow').trigger('goto', [0]);}
});
Hi Ariel,
is there an option for circular scroll?
Hi Ariel would you pls check out the link and let ne know where I am going wrong:
www.eden-flowers.co.uk/eden.html
scrolls perfectly in FF3 but scrolls vertically in IE?!
Thanks
Joel
Hi Joel
I saw your other post, but blogger has been working funny and couldn't reply.
The problem is withing your html/css. The items are clearly not horizontal on IE and the overflow is showing (no scrollbars). Check your markup and css.
I took a quick look but couldn't find the reason.
@Anonymous
Not for now, check previous comments on the blog to learn more.
Thanks for looking, I'll take a look at the markup and css.
Joel
Hey Ariel,
First of all: Thanks for the real cool script. I implemented the serialscroll (shown in the example at http://demos.flesler.com/jquery/serialScroll/) on my website and it works just fine.
Still I would like to customize it a bit in order to start the scroll effekt by mouseover instead of click.
How am I supposed to do that?
Thanks, Matthias
Hi Matthias
jQuery.SerialScroll has a docs page (on this page). Check the option 'event'.
Ariel, thanks for your great work on the ScrollTo plugin. I'm not having any trouble getting it working, except when I try to use the jquery svg plugin (http://plugins.jquery.com/project/svg) at the same time, and switch the DOCTYPE to the XHTML + MathML + SVG 1.1 doctype for that plugin to work properly. I then loose the use of your plugin, even though that's an acceptable doctype. Any ideas? Thanks,
M.
Yeah... the browsers change some stuff about scrolling when you according to the doctype (as in quirks mode, etc).
Probably that doctype is indeed doing this. Does that happen on every browser ?
Is it possible to have the scroller work and also add the hash to the URL?
I tried this simple thing, in the selectNav function i tried adding
windows.location.hash = $(this)attr('href')
which worked as far as putting it in the URL, but then it stopped the scrolling, so it just jumps to the right spot instead of scroll, and the prev/next buttons do not work right (i am guessing because these are set after the scrolling that isn't happening)
anyway, nice script, but it would be so nice to be able to have those hashes so that it would be easy to bookmark or send to someone.
oops. part of the url got cut off, I try again:
demo page
The hash function is commented out, but you can see my scroll.js for the code in question.
@Anonymous (name?)
add hash:true to the scrollOptions object/hash.
I'd remove the #prev and #next from those links. Else LocalScroll will also recognize them and might set the hash.
Thanks, that was just what I was looking for and works great!
Hi Ariel,
I'm very excited about this plugin.
I am getting error in IE and FF that jQuery is not defined and citing the line of scrollTo.js
I have jquery-1.2.6.min.js and
jquery.scrollTo.js on the server and I tried using the Google src for the jquery-1.2.6.min.js as well, same error.
Any thoughts?
The page is here:
http://ericaspindler.com/new/about/index.html
Many thanks!!
JG
Hello Mr. Flesler!!!
I have been working on a project since 7 months and now its online at www.mukuru.com
I was waiting for the website to be online so that u can see what i have the problem.
Ok if u go to the database, select ur country and currency and u will see the CATEGORY BROWSER based on ur scrollTo plugin which is looking awsome. I just need arrows on the sides with those yellow dots.
I spend weeks on it but it doest work i dont know why and also how the dots will be changed accordingly, automatically.
Please help me
Hi ariel,
I'm an italian boy so my english is not perfect.
I used your fantastic plugin (serialscroll) on my site (www.fabriziodilello.com) but with opera 9.5 don't works. I can't see the scrolling effect.
I don't understand where is the problem.
Can you give me your help ? Thanks.
Hi,
I'm working on a product documentation and cant make ScrollTo working. I have a treemenu on the left side and the documents are loaded in an iframe on the right. I could not find a demo on how to use the script with an iframe. Maybe I am blind. I just want to click on a link in the treemenu and scroll to the corresponding anchor in the iframe.
Any help? thx
@carlswed
Since scrollTo 1.4, it's pretty easy to scroll an iframe, just:
$('iframe').scrollTo('#some_elem');
If you use serialScroll or localScroll then that's something else. jQuery selectors don't get into iframes.
@fabrizio
I'm not sure... but the site looks completely broken on IE6. You should check the styling, all I can advice you is to check scrollTo's troubleshooting.
Hey Man, This plugin is amazing. I love it. I've been working on a site that uses it heavily for navigation. One of the problems i had that was fixed in this update was the absolute positioned objects breaking the scroll, i'm happy to report this update did fix it... for the most part. I'd like you to take a look at www.cafe4ms.com/final and navigate around and you'll notice that some of the scrolling is quite a bit jumpy, i just wanted to make you aware incase a solution came to mind. Thanks again so much for your effort!
Is there a way to use this like onload function, to scroll to div with animation on page load?
Ok...
$(document).ready(function(){
$.scrollTo('#somewhere',1000);
});
#somewhere has to be a selector pointing to the element you want to scroll to.
Tnx, code works fine :D
Hi Ariel thanks for replying,
I'm actually starting to think about doing a little parallax scrolling with the script.
So I click a link, Scrollto works out how far to scroll - I need this number.
I then want this distance passed to a seperate animate function to make another div scroll.
Does that make any sense? I'm not sure I entirely know what I'm talking about!
Wooot...
It works... even on a ^%!Q$%^#$!%@# windows computer...
nice too cool
Looking for easing docs I can live without it for now. This was my first use of jquery. I was really easy to use.
Hi, I totally love Scroll.To and I am in the progress of implementing it in a website right now.
Just one small catch. Could you please let me know how to set up an initial location? Let me be more specific. I would like it so that when one opens the page the viewport isn't at top:0, left:0 which is default, I know, but rather passing some initial coordinates which would place the vieport at top:50%, left:50%.
Any other type of positioning will do just fine. Oh, and I only need it to start there, not animate from top:0, left:0 to top:50%, left:50%.
Thanks for the wonderful plugin!
You can call scrollTo at any time.
Do this:
// If using jQuery 1.3
$.scrollTo.defaults.duration = 0;
$(window).scrollTo( 0, {
over:{ top:0.5, left:0.5 }
});
It'll be optimum if you do this right after opening the <body> and with jQuery 1.3+.
thanks for this! -j
Ariel,
Using localScroll, I'm trying to get access to the #id of the justScrolledToElement in order to manipulate it further. In the demo below, I'd like to show the image once it's been scrolled to. Please see the note at the top of the page.
demo
Thanks a million for your help, it's greatly appreciated.
Eric
Ariel,
I found a solution in a forum:
onAfter:function(x,y){
$(x).find('img').show();
}
Apparently x is a jquery reference to the object just scrolled to. Perfect.
I don't understand how to implement ScrollTo.
Can you tell me EXACTLY which .js files I need and what to write inside my html-document, to make any anchor in the document scroll slowly?
Your plugin seems great, but the describtion is not very user user friendly, like for example lightbox.
hi there
how can i move the element tha i've clicked to the top of the visible area? for example: i've a button at the middle of my page, the i scroll down slowly manually until that button is almost visible, but it's at the bottom of my visible area... what i want is that when i click that button (div, or link, whathever) then the scrollto function moves the scroll bar to get that button visible near the top of visible area.
i hope that you can understand my idea. It's something like 'ensure that the clicked object is visible and at the top of view'
regards...
Hi Ariel,
Thanks for sharing this excellent plugin.
Have a question probably a bit off from ScrollTo but any pointers will be of much help.
How do I determine what DOM elements are actually visible and which ones are hidden behind overflow?
Thanks,
Yusuf
Hey,
I've been searching for the solution to this for sometime:
I've created a form which passes a value through the web address:
./test.html?var=3#section2b
The form is supposed to pass the "var" value and scroll to section2b (which it does) but it also reloads the page.
How would I prevent the page from reloading?
Thanks
Hi Ariel,
I was about to post a question, but then I found the answer, so here you have the question and answer:
Q: "How can I scroll an iframe from within the iframe? I'm trying $(document).scrollTo(0); but it isn't working inside the iframe, altough it does work when loading just the iframe html (aka "show this frame only")"
A: try $(window).scrollTo(0); instead.
We found that the newest version of FF (3.0.6) returns a float for some elements on the page when you call offset().top .. this causes your plugin to break. We modified the RegExp to test for decimals as well, which fixed the problem
line 120:
if(/^([+-]=)?\d+(\.\d+)?(px)?$/.test(targ))
Hi Ariel...
Great work... Is there any way to get the location from the url once the page loads, and then scroll to that location. (e.g. http://www.example.com#faq-6)
@Eric
Yeap, that's intended and documented :)
@Anonymous
You're referring to localScroll, not scrollTo. Maybe that's why it's not clear for you ? Check the other plugin's docs.
@Fidoboy
$('.elements').click(function(){
$(window).scrollTo(this,1000);
});
@Yusuf
The LazyLoad plugin has those functions.
@Syed
That's the normal behavior, to have forms post without refreshing, you need to use Ajax. Check jQuery docs on that, and the Form plugin.
@Julian
Thanks, will leave it here for others to read.
@Ramin
Thanks, I added that on trunk, will be on the next release.
Do you have a demo online ? the situation sounds a little uncommon though.
@Ben
Use the plugin LocalScroll, and its function $.localScroll.hash();
I absolutely love this plugin. It was just what I was looking for - Thank you so much.
The one thing that would make it absolutely perfect is if the back button could work somehow with the local.hash.
I am lost, lost, lost. I LOVE this idea but I cannot make it work. It looks so simple but all the demos and Q&A here are just confounding my thinking.
(I must be missing something ridiculously obvious because everybody else seems to have this thing working!)
If I have a container div #pane with links inside assigned to class .link and I have separate content divs organized within #pane, how do I tell each of those links to scroll to the different divs within #pane??
I have this:
$('.link').click(function() {
$('#pane').scrollTo({top:'960px', left:'960px'}, 800);
});
But it ain't doing jack squat.
Any help would be appreciated. Thanks.
Ariel,
This is the sexiest javascript in the world! It makes the web look like it's no longer just the web. wow.
Unfortunately, like many other users, I'm living beyond my own technological means -- I have a problem that I can't track down. So I apologize for my ignorance, and sincerely hope that you can help me ... without wasting but a moment of your time.
Here's the test page:
http://www.eastlakeunionlofts.com/xtemp/
works fine on ff/chrome (depending on settings, it gets jerky in ff, but i'm sure that's because ff is a slow lumbering giant). broken in ie6/7 (i don't have 8 but i assume it's broken there too).
it throws an error that i'm having a hard time tracking down, essentially it seems not to recognize $.scrollTo at all, but it did before ... so I don't get it.
perhaps it's something you're familiar with??
Thanks so much for your help, and for the coool cooooool sw.
@emlyn
i just wanted to reassure you that it sure took me a long time to interpret the instructions and get it working. so, no, you're not the only one. of course, when i was working, it seemed to make a lot more sense, and it just little mistakes on my part all along. the problem as i said above is just that i'm ultimately a little out of my league, have limited tools and don't trust myself. but you have to start somewhere , so i say why not at the top!
@Anonymous
Yeah, I made some attempts but nope...
@Emlyn
I'd use LocalScroll. You relate divs and links by id/href and then call:
$('#pane').localScroll({
axis:'xy',
target:'#pane'
});
That's the basic, then you can add more options.
@j f
It doesn't work on IE because you left a trailing comma after the last setting in $.scrollTo.defaults.
The server seems to be a little overwhelmed, some files didn't load the first time I tried it.
Great plugin, just running into one issue.
I'm not sure how to setup the hash function to be able to call the ScrollTo from outside of the #content div.
I used your AJAX localScroll demo as the source code and worked on that.
Here is a link to my demo site:
www.collectivemediagroup.net/beta
If you click on the top menu buttons, it uses a switch to hide/unhide the divs for each category (ie: choose a section).
those are the links i would like to have control the scrollTo, not the links built-in the pages pulled in by the AJAX (due to localScroll right?)
Thanks in advance!
I'm not totally sure I follow, but I think you need to change:
$('#content').localScroll(...
for
$.localScroll(...
In your init.js.
hmm i just tried it and there was no change.
let me clear things up:
(red menu) - set to show each separate "section"
(top menu in white box) - hideable divs that are toggled when the red menu items are selected
(main content in white box) -
is the #content div that shows the AJAX content.
the only links that work for the scrolling are the ones in the (main content) area.
im trying to have links outside of that area scrolling the content (the topmost links in the whitebox)
That's probably because the $('.nav a') selector is reaching those links as well.
Once clicked, jQuery tries to load new content (you can see that with firebug).
You need to tune that selector.
yea, ive been stumped on it for a while.
what would i write for HREF tag for it to work?
thats essentially what im looking for.
Hey Ariel... what a beautiful job you did with ScrollTo! Fantastic!
I was wondering if it is possible to have two occurrences of ScrollTo on the same page, each with a different panetarget div id, functioning independently.
Your help is appreciated. Thanks!
wow. that's bad. sorry to tap an expert like you for something so simple. i'm really happy to see it load in ie w/o errors though :D ....
i wonder if you could clarify what you meant by your second comment
>The server seems to be a little
>overwhelmed, some files didn't
>load the first time I tried it.
you're noting that, right? you weren't talking about something that's my fault?
anyway, thanks for your eyes & your sick code. i'm really finding jquery quite seductive.
cheers,
jf
Nice work!! But I am doing something wrong...
I am scrolling 8 images vertically, with a button for previous and another one for next. Everytime I choose previous or next, the scroll bar goes first to 0 (very quickly) and then to the next (or previous) image. This happens very quickly but the result is anoying, like flickering. Im not using the script from the demo, but it looks like it does a reset before any scrolling. What am I doing wrong?? Or how can I break this "reseting" and make it smoother?
Muchas gracias amigo. Continua!
@Eric
You need to use (add if needed) another class aside from nav. So that the selector doesn't match both link containers.
@Devdoer
You're probably speaking about serialScroll or localScroll. Those are not the same as scrollTo.
Both plugins (local/serial) can be
called more than once.
@j f
Just that the server was working slowly, that's all.
@Joao
Got a demo online ?
I just uploaded a demo. See at www.webdelirium.com
Notice the flickering of the scroll tab.
Thanks again.
Add return false after both scrollUp() and scrollDown(). You need to prevent the # from appearing in the address bar.
Working like a charm. Thanks!
I tried implementing you code to scroll on page load to a div, but it doesn't seem to working.
$(document).ready(function(){
$.scrollTo('#somewhere',1000);
});
Hi Ariel,
thanks for your corrected code,
var $paneTarget = $('#referenzenhaupt');
var $paneTargetb = $('#thumbshaupt');
$('#nachlinks').click(function(){
$paneTarget.stop().scrollTo( '-=738', 800, {axis:'x'});
$paneTargetb.stop().scrollTo( '-=108', 800, {axis:'x'});
});
$('#nachrechts').click(function(){
$paneTarget.stop().scrollTo( '+=738', 800, {axis:'x'});
$paneTargetb.stop().scrollTo( '+=108', 800, {axis:'x'});
});
It works very well!
I have uploaded a test to http://www.awebbreservation.com/post/ yet I cant get it to work, there are no errors in firebug, so the script is fine, I just wondered if you can have a peak and let me know where I have gone wrong. Many thanks
@Anonymous
Hard to tell what's the problem without a demo.
@Chopper
You somehow messed up the scrolling. There's a lot of floating and position:absolute elements.
See what happens if you remove the overflow:hidden from #frame.
Try to simplify the styling, with less position absolute. Also the element to scroll MUST have overflow of some type.
hi Flesher, firt a need say that not domain the englihs, but I need your help fon use you great creation, Im a beginner programmer and Jquery like me for my projects, I use the localscroll and think that not have a problem, the cuestion is that I cant understand how makes? the efect that the container seem like a windows and how make that only see part of of the text,I hope to have explained.
thanks for you time.
Hi
To make an element scrollable, you need to set it fixed dimensions (height & width) and add one of the following CSS properties:
overflow:hidden;
or
overflow:auto;
Out of that, is pretty much like the demo. You add a call to the plugin, similar to what's in init.js.
Let me know if you have any problem. By the way, what's your native language ?
thanks again! cool! now when am i going to get time to dig into jquery a bit more??....
Hi there! It's really great and useful plugin, but I wanna to ask one thing: how can I get number of current position or element that right now in viewport when I scroll page in traditional way with mouse or scrollbar? I mean how can I get a number of current viewed element in http://demos.flesler.com/jquery/scrollTo/old/ for example?
You need a hand made script or another plugin.
ScrollTo doesn't provide any of that.
Sorry to bother, Ariel.
I'm loving the plugin but I'm having trouble implementing it as follows:
What I'm looking to do is have a stack of content windows that, when prompted, will ALWAYS scroll from bottom to top. For instance, suppose I have a target pane (960x600) with 3 pieces of scrollable content sitting just beneath. What I'm trying to achieve is to have each piece of content slide into view from the bottom of the target pane; and then have each subsequent piece of content mirror the same action irrespective of where the target pane is positioned (i.e. the old content will slide up and out of view, and the new pane will slide in from the bottom).
I'm thinking of resetting the absolute position of each piece of content, and calling the scrollto function in an identical fashion. Something like this:
function reset_o(){
/* starting from (600,0), this will slide the current content up and out of view, leaving a blank page */
$paneTarget.scrollTo( {top:1200,left:0} , 500, {
onAfter:function(){
$paneTarget.stop().stop();
$paneTarget[0].scrollLeft = $paneTarget[0].scrollTop = 0;
}
});
};
/*after calling reset, the new page is slid into view*/
$('.button1').click(function(){
reset_o();
$('div#content1').css({'top' : '600px'});
$paneTarget.stop().scrollTo( { top:600,left:0} , 500 );
});
$('.button2').click(function(){
reset_o();
$('div#content2').css({'top' : '600px'});
$paneTarget.stop().scrollTo( { top:600,left:0} , 500 );
});
$('.button3').click(function(){
reset_o();
$('div#content3').css({'top' : '600px'});
$paneTarget.stop().scrollTo( { top:600,left:0} , 500 );
});
I hope this makes sense. I'm trying it at the moment but can't get it to work. I'm still learning jquery/javascript so forgive me for sounding like an idiot.
Hi Ariel! I really dig ScrollTo =) I've used it gratefully in my new portfolio on www.yoeran.nl. Easing events don't seem to work that seamlessly though. But that's something I have to figure out.
Greets from Holland
- Yoeran Luteijn
@AI
I'm not really getting that, maybe you can some sort of demo or something ?
@Yoeran
Looks nice :)
Hi Ariel,
I have been trying for days (without success) to plug into this great script.
I wonder if you could help?
See the demo at(http://www.brthomas.co.uk/files/testscroll/)
When a user clicks on an image (that is NOT above the funnel) I want the image to move to above the funnel. DONE :) (but also would like the belt to stop auto scrolling at this point, ideas?)
When a user clicks on an image ABOVE the funel I need it to run a separate JavaScript function that will cause a flash movie to play, I also need it to pass the div id (which will be unique for each div on the belt) to the JavaScript
I have tried onbefore after function but can’t even get them to fire? Probably due solely to my lack of understanding of java.
I have the JavaScript function to run a flash movie working from a text link, I just cant invoke it from the belt (when over the funnel)
Any help would be greatly appreciated, thanks.
Hi Ariel,
I'm using scrollTo on two pages (a.html and b.html) and want to add some navigation links like this:
a.html - has the scrollTo area and then unrelated text links in a section below it. I want one of the unrelated links to link to b.html section 5 of b.html's scrollTo instead of just going to b.html and then having to click again to get to section 5.
I have no idea on how to make it work. Can you please give some direction on this?
Thank you!
Hey Ariel!
Thank you so much for this amazing code! A brief question: is there a way to scroll "just enough" so that an element becomes visible?
Suppose I have a list of rows in a table and that this table sites resides within an overflowed div. There are many rows, so only a few rows are visible at a time.
Now my goal is that the user can move down the table in a gradual, "non-jumpy" way. If the next row the user wants to see is not visible, I want to scroll *just enough* for it to becomes visible -- rather than have scroll so much that the scrolled-to row is now at the top of the div.
Is there a way to achieve this? I couldn't find a setting that controls this.
Thanks foo much for your awesome work!
James
@Benjamin
I don't fully get the problem.
serialScroll provides a few events to manipulate it from outside (start,stop,etc). You could use those.
@Steve
If you're not using localScroll yet, then that could be the solution. If you add a call to localScroll.hash() on the second page, it will scroll automatically.
@James
You can use settings like 'over' or 'offset' to control this kind of things.
Hi Ariel,
First of all, thanks for the great plugin, it was very useful for a number of my projects.
I am now trying to combine it with an accordion structure (where one block expands after clicking on it, and another contracts), but scrollTo doesn't scroll to the right location in this case.
Here is a demo: http://www.pelmeshkin.com/temp/scrolltoaccoridon/
I guess, this is due to location being calculated before the expand/contract animation happens, but even when I try to pause and wait until the animation is over and only then scroll, it still behaves the same :(
Would you have an idea on how to solve this? Perhaps, it could be done with scrolling first and then initiating exanding/conracting animation via callback, but I do not know how can I pass this object to the callback, which, I guess, is a more general jQuery question, but anyway.
Something like this doesn't work:
$.scrollTo($(this), 1000, function() {
//expand(this); //contract(not(this));
});
Aw man, every time I launch myself into using scrollTo I get a major beat-down and nothing works.
This simple code is not working:
(opening script tag)
$(document).ready(function() {
$("#slider").scrollTo( '-=960', 4000 );
$.scrollTo.defaults.axis = 'x';
//reset scroll on refresh
$('#slider').scrollTo( 0, 0 );//reset all scrollable panes to (0,0)
});
(closing script tag)This should work, right??
I've tried different variations on the above--based on your demos--but none of them work. Once again at my wits end trying to decipher this amazing plugin :(
Ariel, helllp!
...actually I ended up just using animate() for this, but I'm still mystified why that code didn't work.
Ariel I hope to have a demo site for you to link to in the next few weeks...
Nice work and great support, your a good man.
http://www.ezfoamglove.com/dev/tslide.cfm
Two small issues..
1) In FF I cannot seem to remove that left padding in the ul.image_elements, any tips?
2) Click scroll_right once to the end of the ul.image_elements, then click say 3 more times. Now click scroll_left once. There is a additional delay but then the elements scroll. The more times you click beyond the end of the elements the longer the delay. What did I do?
Thanks,
Adrian
@pelmeshkin
You need to call scrollTo either within a callback provided to the accordion plugin (if possible) and else use a setTimeout to delay the scroll a bit.
@Emlyn
The second call to scrollTo will take effect only after the first ended. That's how jQuery animations work. You should start by changing the order.
@Adrian
Not sure about the padding, surely a css thing.
About the other thing, seems the scrollLeft property keeps going up beyond the limit.
You should use another approach, other than relative animations.
Thanks, Ariel.
Yeah, I've already found a way around this by first finding initial coordinates of the elements I'm going to scroll to, putting them into an array, and then supplying these coordinates to ScrollTo instead of element id.
The only drawback is if the user changes the text size, then the coordinates will need to be updated again.
Cheers.
Ariel - your script is simply lovely and smooth. I have a site where I see your script as a better alternative to use than Spry Sliding Panels, but I'm having a problem with overflow.
If you look here: www.bicklerlab.com, you'll see the sliding effect. This is Spry instead of ScrollTo. I'd rather use your script, in addition to using other Jquery ideas, but my attempts fail because adding overflow:auto; to the scrolling panes causes very jagged scrolling in Firefox. The Spry js file adds a CSS element dynamically to hide the overflow:auto temporarily until scrolling stops. I've looked through your files and the comments, and I apologize if I've missed it, but can the scrolling panes have an overflow:auto property that is hidden during scrolling?
That's not a built-in feature (and won't be).
You can do that from the outside though, pretty easily.
Each time you trigger a scroll, change the css overflow to hidden, then within scrollTo's callback, put back on auto.
Awesome to know a solution is possible. Forgive me, though, as I'm much better with CSS than JS. And by 'much better' I mean I know next to nothing about writing JS. Can you give an example of how I'd add this on the 'outside'? Presumably some internal javascript in the head of the page I'm using Scroll?
@Michael
Are you using serialScroll or localScroll as well ?
Hi Ariel - I'm using localScroll in conjunction with scrollTo.
Ok then, something like this:
$.localScroll({
// your settings
onBefore:function(){
$('html').addClass('scrolling');
},
onAfter:function(){
$('html').removeClass('scrolling');
}
});
Then in the CSS:
.scrolling * {
overflow:hidden;
}
Hi Ariel, thank you so much for the amazing script!!
I'm having a little trouble... I'm using ScrollTo - I've got it working mostly, but when I click a link, it just jumps directly to the spot, with no animation.
Do you know what could be causing this? I have a few other scripts running on the page, perhaps a conflict?
You can see it in action here (apologies for the mess, things are under construction):
http://grahamhuber.com/design/clients/myescapades/view/tours/temples_and_tigers/
(scroll down a bit to the "Test It" link)
Thanks for your support!!
Hi Ariel -
Thank you for the js code to insert. I want to show you where I've posted it in hopes of discovering where I went wrong.
This page (http://cms-collaborative.com/pre-publish/profile.html) uses the scrolling. If you click "Origins", you'll see the panel with scrollbar. If you click Scope of Services, and click any of the sub-navigation elements under that, you'll see during horizontal scrolling the jagged appearance (that occurs in Firefox).
The js code you provided I placed in the core2.js file. And the CSS you gave, I renamed to ".panelscrolling", which is in the cms_styles-2.css file. As for the panel, it's a list-item called .section .sub (specifically, a list-item within '.section' that has the class ".sub"). I'm pretty certain I have not done the js code correctly in "core2.js". Are you able to point me in the right direction? And I definitely appreciate this all - localScroll (and scrollTo) are such terrific scripts. Seriously well done.
@graham
The page looks empty (blank).
@Michael
Yeah it's ugly. Not sure why it happens, probably bad browser's redrawing, not much to do except simplify the CSS.
There's a ton of floated elements, that makes it harder to redraw.
Sorry I can't help you more :(
Hi Ariel,
Brilliant script. I`m totally new to js, but am trying to figure it out.
Probably a stupid question, but I was wondering if divs could be used with ScrollTo, instead of (or with) the lists.
I know localScroll and serialScroll go left/right and up/down, and they use divs to seperate the content area's, but ScrollTo does left/right/up/down and would be nice to have it move around to seperate divs within the pane, without being constrained by having to put a whole bunch of images and content within lists.
Any hints/tips would be appreciated.
cheers,
Hi Ariel
I am newbie in jQuery and ScrollTo.
Now, I meet some problem in use ScrollTo, When I am implementing code with ScrollTo, ex.
$('#id').scrollTo();
this code include in file.js but it's not working. I don't know What happen?. Can you help me to solving this problem.
Thank you.
Ariel,
THANKS for all your work on this. I can't say that enough. Quick question, I am getting a small "flash" in Fire Fox each time I click on the link. Not happening in Safari or IE. I am implementing the script exactly like your demo (which I notice it doesn't happen in). Only thing different would be our CSS layout. Any thoughts?
@Storm
None of the 3 plugins has any kind of restriction or requirement over the html elements. Just make sure that the scrolled element has overflow.
@Anon & @claverkid
Can't tell without a demo or something like that.
jQuery crash moetimes on vista. :(
Post a Comment To get help prepare a demo.