Fixes
- Fixing max calculations for regular DOM elements.
Features
- The plugin support percentages as target ('50%' or {top:'50%', left:'45%'}).
- Exposed the max() calculation as $.scrollTo.max.
Enhancements
- Renamed $.fn.scrollable to $.fn._scrollable to avoid conflicts with other plugins.
Links
Downloads
- jQuery.ScrollTo 1.4.2 Zip(all files)
- jQuery.ScrollTo 1.4.2 Source(to learn or test)
- jQuery.ScrollTo 1.4.2 Minified(recommended)
61 comments:
Hi! First off, thank you for this amazing work, i really love it! I just started trying this out and i am getting some funky twitchy behavior on diagonal movement between divs in internet explorer 7... All other browsers are fine... Wondering if anyone had any thoughts?
testpage:
http://64.15.138.52/~funck/prototype6/index.php
using this version and localscroll 1.2.7
and the function (i am no java freak, just getting started)
jQuery(function( $ ){
$.localScroll.defaults.axis = 'xy';
$('#navigation').localScroll({
target: '#container',
duration:1000,
onBefore:function( e, anchor, $target ){
},
onAfter:function( anchor, settings ){
}
});
});
Hi Aiwazz
That looks odd! browsers suck at redrawing. You'll need to try playing with the css, it'll probably work faster without the absolute positioning (just guessing).
If nothing works, you could opt for using the 'queue' setting.
Thanks Ariel! I did so last night (queue:true) and got everything smooth in all browsers... I'll play around with dif scroll methods/css though to find the culprit. What a great script, thanks again!
You need to return false to avoid the default behavior.
Just wanted to say thanks for helping me with that Ariel. I know bearing with java dorks like me for people at your level must be a bore but I appreciate it immensely!
Hi Ariel.. Got the mousewheel implemented. Pretty awesome. Thanks so much..
@aiwazz
You're welcome :)
@Arthur
Glad it worked!
Is there any method to using this plugin with newly created DOM elements (after page load)?
Hi Ariel,
This is really awesome stuff, very good job.
I am trying to get New Ticker (vertical scroll) in my application. With a top->bottom scrolling animation. I cant get this working based on News ticker sample app you have. The animation works bottom->top, but not the other way??
Your comments would really be appreciated. Thanks again.
@Synd
The plugin works for new elements (scrollTo). If you mean localScroll or serialScroll, then there's a setting called "lazy" for that.
@Kapil
It's hard to tell without a demo.
ScrollTo in action: www.dishplay.com
So-so design, great plugin. Tx :)
Pretty cool Emlyn :)
Ariel,
Any way to know when the end of scrollable region has been reached? For an example, check out either Blog, Awards, or Mission at http://gdad.sva.edu - I'd like to display a message like "Bottom of page" when the user clicks Next towards the bottom of the screen and nothing happens (because there's no more scrolling to be done).
The psudo-code I'm using is basically :
$(".scrollNext").bind("click",function(){
$.scrollTo("+="+$aCertainAmountToGetToTheNextItem+"")
}
Thanks.
Maybe something like this:
var $elem = $(...);
var current = $elem.scrollTop();
var max = $.scrollTo.max(
$elem[0], 'y'
);
if (current == max)
....
I've been trying for the better part of two days to get jQuery.ScrollTo to work for me. But, I don't completely understand javascript, so I'm not exactly sure what I'm messing up with--except that I absolutely cannot get the slow scroll going--though I CAN get basic navigation working. But the effect I want is to slowly move over a large page.
Basically, I'm trying to achieve the navigation effect of http://melissahie.com/ with 4 quadrants, rather than 6.
I've loaded my test page on my sandbox: http://www.azzcatdesign.com/azzcatdevelopment/Dovetail@Azzcat/indexAlt.html
This is exactly what I needed today. Tku tons for developing this. Your demos are really clear and a great resource as well.
this is such a brilliant script. some time back i saw a site that used this script to great effect.
How do you create the min-versions? I want to create some for my plugin http://startbigthinksmall.wordpress.com/2009/05/28/beautyofcode-jquery-plugin-for-syntax-highlighter-2-0-by-alex-gorbatchev/
@Lars
I used to do hand-made minification using Dean's Packer, it was a bit tedious.
I now use the YUI compressor and run it using the command line (the Makefile's in there).
Now that it is automated, it's so much nicer.
Hey Ariel, Thanks for addding the scrolling limit, that came in handy.
Hi Ariel,
First of all, I'd like to thank you for this, it's wonderful!
Secondly, I want to reiterate what someone above said: it took me quite a while how to figure out how to make things work. The problem was that I was unaware of the necessity of an init.js file; I don't think it was referred to anywhere in the documentation (or I just missed it). For those of us who are relatively new to javascript/jquery, it might be helpful to mention this somewhere. This is not a complaint by any means, just an observation.
Lastly, I've been experimenting with the plugin a little bit and I'm having some issues. Essentially what I am trying to do is create a horizontally-oriented website that scrolls (horizontally) to the appropriate content. I have that working just fine. Additionally, I want there to be a "More Info" section that scrolls (vertically) to some content immediately below. This is where I am running into issues. What is happening it seems is that the page reorients itself to its origin and then begins to scroll vertically down from that location rather than that of the link. Sorry if that's a bit confusing, I have an example here:
http://bencabot.net/AH/
If you click the first link, "About Anna's Hope" it will scroll you to the next section. There click the last link, "More Info" and it will instantly (as opposed to scrolling) return to the origin and THEN scroll down instead of scrolling down from where the "More Info" link is.
Any ideas?
Sorry if this is an obvious question, I'm still learning :D
Thanks!
Sweet tool.
I created 2 DIV tags and I wanted to slide the DIV on the right under the DIV tag on the left.
Works well in IE 7 but on FireFox 3.51 I get a ripping effect when text from the right div slides under the left div.
Does anyone know how I can avoid that?
Thank You
@Ben
I'll see what I can do about it once I'm a little more free.
@eyeCoder
Got a demo online ? if you kept the scrollbars, they're known to bust the animation in firefox.
Please, cand you show me (us) an simple example, make me understand more fast and easy?
The demo has a huge source!
I`d like to see how do i scrool in an div with width 3000px at his middle orizonatly
Hi
ScrollTo's demo is meant to show all the settings you can use.
To scroll a div to the middle do this:
$('#the_div').scrollTo('50%',900, {axis:'x'});
That's the basic.
I've been using scrollTo for quite some time, but am now looking to change things up a bit.
I am using the coda slider, serial scroll, scrollto, and localscroll.
What I want to do is load a specific panel, the middle one or #center on loading the page. So it will be basically coming in to that panel with two above it and two below. By the way I have vertical scrolling activated.
My sandbox is here:
http://www.solutionarts.net/spindex.html
I've played with various settings, checked related posts and jquery documentation and cannot for the life of me figure this out.
I'd appreciate a punt in the right direction, but understand if you have better things to do.
Thanks for all your hard work.
Damon
Hi Ariel, thanx for the great plugin... i've used it in a website for both horizontal and vertical scrolling and it is working perfectly fine in all the browsers except opera. The problem is what the ajax calls. Whenever a portion of the page is updated using .net update panel, the page scrolls back to the first panel. Can you help me in this? Thanks
I've used the plugin to create a simple scrolling text pane. At the bottom of my text pane I have an 'up' arrow and a 'down' arrow, which the user clicks to make the text 'slide' up or down. This was very easy to set up and works perfectly.
However, is there any way to hide the 'up' arrow if the text is at the top or hide the 'down' arrow if the text is at the bottom?
Thanks :)
@Nomados
Ok, the links below are working, the one that says "Blog" throws an error when clicked (check with Firebug).
I'm not sure I understood what is that you need and what's the problem.
@Test
Only in opera ? odd. You could call scrollTo after refreshing to reset it ? do you have anything online for me to see ?
@Matt
If the text is enclosed in certain elements, like divs, you could use serialScroll with has that option as a snippet. If you don't, then you'll need to check what's the scrollTop and see if it's at the limit.
If you get me a link I'll check.
Ariel,
I'm sorry for not being clearer.
My page, http://www.solutionarts.net/spindex.html has 5 panels (top, centertop, center, centerbot, bot) using the coda slide and your associated js goodies. When the page loads the "top" panel is visible, which is the default (top down structure). I was hoping that there was a way where I could use ScrollTo to change the default behavior and have the "center" panel become visible after page loads. This would put the visitor to the site into the middle of the panels, so that they could choose to either go up the panel tree or down. ( I do not have the graphical links for the in-panel navigation created yet) I can accomplish what I want by pointing my A record to http://www.solutionarts.net/spindex.html#center but would rather use ScrollTo to make the change if that is possible.
I tried first changing in SerialScroll start: from 0 to 2 (center panel) but there was no effect. So I thought that the ScrollTo held the ability to make the changes I desired.
Thanks again for your time
Hope that is clearer.
@nomados:
just use this:
$( document ).ready( function() {
$( '#yourContainer' ).scrollTo("#center", 500 );
} );
I have a different question though. Can you scroll to different DIVs in such a way that they would be centered on the page?
Example: http://www.kreatorij.si/themes/scroll/
I'd like the grey boxes to show in the center of the screen.
Thanks for the help.
@Bostjan - Sorry for the green behind my ears, but where do I put this code?
In the HTML file? the scrollTo.js?
Again I apologize for my lack of knowledge. I've tested it out in a couple of different places. I believe my #container is called scrollContainer so maybe I am calling it out wrong. But I'm not getting any of the desired effect.
Thanks for your time,
Damon
I got it, was calling wrong container.
Thanks for your help.
d
hi there.
is it possible to scroll the body 100px to the right each time on a click on a certain id?
know what i mean? not scrolling to a fix coordinate or anchor...
thanks and kind regards,
m.
@nomados: glad I could help
anyone have a suggestion towards my problem?
Hi! Could someone please help me...? I've seen the examples, and read lots of comments.. search the web and still haven't managed to do the following:
I have a div, with fixed height and width (not published online.. so i can't show it :( ), and i want to scrollTo a span Id inside the div.
So far so good! I can do it!
My problem is.... since the div is bigger then the available screen if the span i'm scrollingTo is at in the last row of the div it's going to be hidding.. since the browser doesn't scroll down to follow it.
The div is to big to center it in the middle of the screen...
I'm only using the following code:
$(document).ready( function(){
$('#Div_Id').scrollTo('#span_Id'); });
(hope it's not something simple i just haven't notice..ehehe)
@Bostjan
You seem to have figured it out ?
@Flip
So you need to scroll the window as well if necessary ? that's not too hard, but not trivial either.
You'll have to do some fun calculations using jQuery's width, height, scrollTop and scrollLeft to achieve this, good luck :)
I'm sorry, i jumped the gun and emailed you and didnt realize you had a very nicely active support area on the comments.
My issue is the same as BEN's
I have a scrolling horizontal website using the Tiny Scroller (http://www.centralscrutinizer.it/en/design/js-php/horizontal-tiny-scrolling/)
I wanted to use YOUR code to create a neat tabbed type effect for the content within the individual divs. The issue is that both of these plugins use the anchor tag to fire the effect.
So what happenes is that I click on an anchor link on the main navigation, it scrolls horizontally to the div it anchors to using this
Nav. Text
When I land on the page with your code on it (by clicking the link on my home page for "services") you will see the secondary navigation and beneath that the content that I would like for that page.
So if you click on those links for your code, you will see that the effect works just fine, it scrolls nicely and the content expands and contracts. I LOVE IT!!
But i think the Tiny Scrolling might be effecting it, because it also moves to the right as if it's looking for a div that is not fixed in the center.
I tried absolute positioning and stuff.. no such luck.
HERE IS THE LINK TO MY WEBSITE
http://design.bscphoto.com
I REALLY hope you can help me with this.. I think this addon is awesome.
also, do you get annoyed with the people yelling at you for not telling them step by step on how to work it into their own individual website? The tone in some of these comments is a little well, asshole-ish!!!
ok.. sorry.
I think I got a LITTLE bit of an idea what is going on thanks to FireBug.. but I am completely and utterly confused now.
When i view my site using FireBug, I see the your div "panel" has an element.style width of 3500px.
This is NOT in the css, and i did a find of ALL of the documents and NOTHING showed up that gives it 3500px width. So my guess is some whacky javascript code that I dont know about.
Changing this 3500px width to about 650px in firebug ALMOST fixes my problem. Instead of scrolling all the way over, it only moves the content a tiny bit, which I have a feeling, once we get this settled, a little bit more css (maybe with your help ::WINK WINK::) this issue can be completely fixed!
Sorry if i flood this area with posts, but I want to try and give you as much info as possible so that when/if you do look at it, it is a little but easier.
again here is the link:
bsc design
Hi
It's a little confusing to have both scripts. The content shows messed up on my browser (FF2).
There's a huge white margin on the right. You seem to be including jQuery twice (no need) and thw.js is throwing an error.
Based on what you've done, I think localScroll would fit perfectly. You should check it out (and maybe remove thw?).
ok.. I would be fine with working with a different script that does the same thing if it's that easy.. I havent gotten to the point of trouble shooting in differernt browsers yet, I assumed Tiny Scrolling worked in your browser because the plugin creator SAID IT DID!! (but dont they always?)
So with the local scrolling, I can use BOTH scripts successfully on the same page with no issues?
Oh yea, and I called jquery twice cause i quickly copied and pasted.. OOPS!
I am going to recreate the site using your localScroller and come back and see if there are any issues..
in the meanttime, I am going to head over to browser shots and see what my site looksl ike in firefox2. It looks ok in FF3
this is weird. I uploaded localScroll (not minified) to my lcoal computer and linked it to my index.html using dreamweaver and its saying that there is a synax error on line one of locaLscroll.js
Where can I see this ? (let's move on to emails)
Just wanted to post a big giant THANK YOU for the help you gave last night. My website will now be functioning the way i envisioned and all SHOULD be well.. thanks So much..
now to head over to the donations area...
I was able to stack the DIVs on top of each other by giving the position: block to the proper divs code and removing the float:left from the encompassing #panel div...
But it seems to be reacting strange and I'm not sure if this is how it is supposed to react.
When you click on the link, you will see that the div FIRST adjusts the height to fit the next div and then scrolls to it. When it does it, it shows some of the other div that is beneath it before scrolling..
Is this because I removed the float? or is this what it's supposed to do> I would prefer the height to change once it lands on the div that you clicked on
You can see here:
http://design.bscphoto.com/#panel-3
Here is a hack to get scrollTo out of the way of Drupal sticky headers:
When you're scrolling up, use the relative syntax. Ugly, but workable:
if (up == 1) {
$.scrollTo(’-=100px’, {
axis: "y",
onAfter: function(){
}
});
}
});
Hello Ariel I am attempting to use scrollTo() I am simply doing this...
jQuery('.navto').bind('click', function() {
$.scrollTo(jQuery(this).attr('rel'));
return false;
});
This does not work. All the page does is jump and scroll bars appear then nothing.
@Karega
Are you doing this within a document.ready ? if you can't solve it, try to get me a demo so I can see.
Good plugin, thank you. I'm so pleased it works on so many browsers.
Showing off my implementation:
http://solutionarts.net
Thanks for the great plugin.
Quick question. I am trying to scroll on both axis. When I put in pixel values for each axes, as in the demo, it only uses one of them. i.e. It scrolls to the same place on x and y according to the number I place for x and ignores the y coordinate. I think I am just having a problem writing proper javascript syntax, but it seems I am writing similarly to your demos which work great.
I think the demo below will illustrate it well.
http://ajbohac.com/mistynew/
@Pocky
For some reason, your demo seems to be 404 for me :(
@Ariel Flesler
Thanks for reading my question. I"ll post my relevant javascript below. But my link works if you copy and paste it. Here's the link again:
test page
Relevant javascript:
$(document).ready(function() {
var $paneTarget = $('#screen');
$('#logo-home').click(function(){
$paneTarget.stop().scrollTo( 0 , 0, {duration: 1200, easing: 'swing'} );
});
$('#mainnav li#button-home').click(function(){
$paneTarget.stop().scrollTo( 0 , 0, {duration: 1200, easing: 'swing'} );
});
$('#mainnav li#button-films').click(function(){
$paneTarget.stop().scrollTo( 0 , 1600, {duration: 1200, easing: 'swing'} );
});
$('#mainnav li#button-links').click(function(){
$paneTarget.stop().scrollTo( 0 , 3200, {duration: 1200, easing: 'swing'} );
});
$('#mainnav li#button-press').click(function(){
$paneTarget.stop().scrollTo( 3200 , 0, {duration: 1200, easing: 'swing', queue: 'true', axis: 'yx'} );
});
$('#mainnav li#button-blog').click(function(){
$paneTarget.stop().scrollTo( 1200 , 1600, {duration: 1200, easing: 'swing'} );
});
});
Original question:
am trying to scroll on both axis. When I put in pixel values for each axes, as in the demo, it only uses one of them. i.e. It scrolls to the same place on x and y according to the number I place for x and ignores the y coordinate. I think I am just having a problem writing proper javascript syntax, but it seems I am writing similarly to your demos which work great.
Thanks again!
@Pocky
You're trying to use jQuery and fancybox within javascript.js and it is included before the other 2.
Note that you don't need to include both versions of fancybox.
Most of the calls to scrollTo that you make are scrolling to (0,0) and the second 0 is the duration (check the main post to see the right way to use it).
I'd advice you to try localScroll (also on this blog) for this.
What happened to my question?
I delete support requests when I take too long to reply, assuming most people just solved it in some other way. In order to keep this comment list readable.
Feel free to send me an email with your problem and I'll check that asap.
it's possible to nidify a scroll box inside another scroll box?
how to do this?
thanks
Ariel - How can I bind mouse wheel scrolling to a div that has height set and overflow hidden? Your examples don't really show how to do this, they all focus on logging the events that happen. I tried putting
$('#scroll-auth').mousewheel(function(event, delta) {
if (delta > 0)
log('#test2: up ('+delta+')');
else if (delta < 0)
log('#test2: down ('+delta+')');
return false; // prevent default
});
but it doesn't scroll.
What an idiot I am - I meant to post that to the mouse wheel page! sorry
Ariel - Fantastic plug in! Hello single page design with easy maintenance.
I'm having troubles understanding how to specify which #anchor gets shown when the page loads (Section 3b for example, instead of 1a).
I added Bostjan's code to the init.js file but I'm not getting anywhere...
$( document ).ready( function() {
$( '#content' ).scrollTo("#section3b", 500 );
} );
(#content is my viewer div)
Thanks for any help
Post a Comment To get help prepare a demo.