Ariel Flesler: jQuery.ScrollTo 1.4.2 released

Monday, May 25, 2009

jQuery.ScrollTo 1.4.2 released

Notice

I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article.

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.

243 comments:

«Oldest ‹Older 201 – 243 of 243 Newer› Newest»

Justin said...: Great plugin!
Quick question though, do you know if this works on mobile devices? I'm using jQuery Mobile for a mobile-version of a website, and need to add some scrollTo effects, but it does not seem to be working. Not sure if it's my code or yours.
Thanks in advance for any help you can provide!; September 16, 2011 at 12:17 PM
Prashant said...: hi....

First of all, really great plugin.

But i haming some problems in firefox 6. Can you help me in resolving that. Here goes the problem :-

Open the following demo in firefox 6

www.ktj.in/new/

Now open firebug and allow the vertical scroll by typing $('body').css('overflow', "auto");

n see the same website again, everything works as expected.

However, it always in any other browser (even IE) and its previous version without any modifications in the site.

So, can you suggest how to deal with this problem. Its your plugin, so you can tell where i am going wrong.

Thanks a lot :)

Expecting some suggestions....

Btw, horizontal scroll works absolutely fine at www.ktj.in; October 5, 2011 at 12:43 AM
satheesh said...: Hi,

Need Cycle option in jQuery.ScrollTo 1.4.2".

Regards,
Satheesh kumar.M; October 10, 2011 at 11:07 AM
Will R. said...: As Carl M. Gregory stated in his comment,
there's sometimes an issue with IE7 that returns this error:

'slice' is null or not an object

For me, this error happens when I try to ScrollTo the .prev().prev() of an element. A single .prev() does not cause the error; but 2 .prev()'s chained together does.

To reproduce this error, see http://jsfiddle.net/gAuXg/7/ and test in IE7.

IE8 handles the chained .prev()'s without error.

In Carl's comment he uses 'b' as the variable in question, but in v1.4.2 of ScrollTo, 'n' is the correct variable. In my copy I've modified the plugin as so:

if(n=='max')n=9e9;/**added for ie7*/else if(jQuery(n).length==0)return;/***/

Note: in the Source (un-minified) version, 'n' is known as 'target';

Hope this is helpful to someone.; October 24, 2011 at 1:20 PM
Piero said...: Hi, great plugin! I can't get enough of it! :)

I just finished a site using the plugin:

http://avsf.org/speculation/

but the scrollTo plugin isn't working with Safari Mobile...

Any idea why?; November 8, 2011 at 6:12 AM
Left Lib said...: This comment has been removed by the author.; November 8, 2011 at 1:35 PM
Left Lib said...: This comment has been removed by the author.; November 8, 2011 at 1:58 PM
X3msnake said...: Finally got sidescrolling working
Sharing my findigns here.

the $ code:

// Start the sliding panels Script $('#menu').localScroll({ target: '#panelview', stop: 'true', axis: 'x' });

The Css:
#page .pagecontent #panelview /* this is the tareget div (window) that scrolls to the menu hastags*/
{
height: 390px;
width: 771px;
overflow: hidden;
clear: left; /* without this the scrollTo plugin does not work*/
background-color: #FFF;
margin-top: 30px; /* fix panel position because of menu h30px absolute positioning*/
}

#page .pagecontent #panel_holder /*The panel assembly that will be scrolled*/
{
width: 6168px; /* the total size of the width of number of panels*/
height: 390px;
}

#page .pagecontent .panel
{
height: 390px;
width: 771px;
overflow: hidden;
background-color: #FFF;
float: left;/* without this the scrollTo plugin does not work*/
}

The HTML Snip:

content
content
content

Hope this helps :); December 1, 2011 at 5:34 PM
anon said...: hi fles, thanks for simple and nice works,

btw every time i refresh the page it slide to the last position,
ex.
when i'm in 3rd page then i refresh the page, it'l refresh from first page then sliding to the 3rd, can you tell me how to make it go to 3rd directly when it refreshed.; December 16, 2011 at 4:01 AM
Rajesh Sawant said...: is it possible to keep a section not scrollable with absolute positioning.

Right now i have a header section and i wan it to be non scrollable. which it is but then it is giving problem in ipad i cant click on the navigation link for second time. i have to scroll manually or do some other activity before i click on the second navigation.; December 30, 2011 at 4:21 AM
Jakub Jarabica said...: Hello, I'm experiencing bug described here: http://stackoverflow.com/questions/4125805/ipad-flicker-on-auto-scroll-using-jquery-and-scrollto-plugin - on iPad every scrollTo call will jump page to top and then start scrolling. It is unpleasant and offered solution(using animate and scrollTop) isn't nice. Are you aware of this bug? Is it possible to solve it? Bug happens on this (not mine) site: http://www.identica.co.uk/case-studies/ as well. Thank you for your input!; December 31, 2011 at 7:33 AM
The Ignorant American said...: Great thing to have, but how do I use it with loaded user controls with post back buttons, to scroll to the last user control that a button was clicked in?

I have ID's set for each of the user controls; January 3, 2012 at 9:39 PM
tr said...: Thanks for the scrollTo plugin! It is successfully being used at
http://carbounce.com; January 19, 2012 at 1:39 PM
Adam Jackett said...: I've been using this plugin for a few projects now and it works great... until now. I have an area that is set to scroll when the user changes a select box. This works fine, however this area also scrolls with a custom scroll bar. This also works. What didn't work was getting the scroll bar to scroll at the same time as the content when you choose something in the select box. All I needed to know was what the destination value was going to be and from there I could animate the scroll bar independently. I added a new callback, onStart (or maybe it should be onBefore to be consistent with your naming convention). I just added

if(settings.onStart){
settings.onStart.call(this, target, settings, attr);
}

right before the animate() function. This gave me the attr object, and I was able to animate my scroll bar to be consistent with the scrolling content.

I know it's been a couple years since there was an update, but I think it would be good to add this in as this plugin is pretty widely used still.; January 27, 2012 at 3:45 AM
flighttime said...: Would ScrollTo work just as a way replace anchor tags without a trigger? As in....
$(document).ready(function(){

$().scrollTo({top:150,left:200}, {
duration: 750
});
});
TIA; February 15, 2012 at 10:36 AM
Pfeifakopf said...: Hi,

could someone explain, what's wrong with this?

$('#button_next > a').click(function() {
$.scrollTo('+25%' , 500 , {axis:'x'} )
});

Nothing happens, if i click on #button_next. The own way, that worked until now, was to insert +100px. But i need in percentage.; March 1, 2012 at 12:07 PM
m. yarlung said...: Thanks very much for this script, we're using the localScroll with scrollTo on our university wiki and it's made this task very easy.

There is one issue I've not been able to resolve:

When the headers on our wiki include parenthesis, exclamation mark or question marks, etc the smooth scrolling effect does not work. (The headers & #links have automated anchors tags on them in the wiki that match the header text)

/marco; March 4, 2012 at 1:34 PM
Rick Bond said...: Amazing plugin! Has anyone had any luck applying this to a site with a fullscreen background? I am finding that on a site with 8 or 9 pages, and a very large background image
(approx 1024 x 20000) I'm getting some strange things going on. The image will load, and scroll but in the transitions the entire page goes black.; March 16, 2012 at 5:22 PM
Rich Telford said...: Could you include a feature to cancel the scrollTo anim if the user scrolls the mousewheel or some other user input? Maybe definable?

I understand may be tricky.

Rich; March 19, 2012 at 2:05 PM
aTax said...: Hey, awesome script.

Could someone please show me how to make the offset work? I can't seem to get it done. Everytime I click a link the matching div or box scrolls to the edge of the window. I want to make a window in the middle of the page in which this scrolling will happen. On all other parts of the page the scrolled content will be "invisible". How can I achieve my goal? I've been trying the settings for hours...

Please help; March 30, 2012 at 12:44 PM
Unknown said...: aTax: try working with margin-left and margin-right. when you click an element, set its container's margin-left or right depending to what direction you want it to move. please see this. mervinnnovera.clanteam.com :) hope it may help you.; March 30, 2012 at 1:34 PM
aTax said...: Hey Mervin, thanks for the reply.

Actually I tried margins too. The only thing I could achieve with them was that there was a margin before scrolling. As soon as I clicked an anchor in the navbar the script just scrolled the container to the edge of the window again. I found a temporary solution by embedding the scrollable container in an iframe this way the script only scrolls to the edge of the frame, but I'm sure this is not the way it should be done.

I've added margins to the "#container" as well as the ".box" divs but no use.

Oh, and nice page you have, the navbar is somewhat like what I want to achieve.; March 31, 2012 at 8:38 AM
pál said...: Hi!

I'd like to use this plugin with Drupal7, but if I load it in usual form (in the .info file defined), I get 'val is undefined' error in line 161. Why? How to solve? -- Thank you!; April 10, 2012 at 11:58 AM
Rui said...: hi, i'm having a problem with chrome... i've got a 3840x2400 image and the first time that the script is used, jumps the animation and goes to the #id point. in IE and FF its ok.

btw, great work, and thank you.; May 16, 2012 at 2:28 PM
Anonymous said...: Hello. This is an amazingly useful plugin.

Would you please add a property switch that would prevent any scrolling if the target was already in view?

Ex: noScrollIfAlreadyInView: true; July 5, 2012 at 11:16 AM
cory church said...: i must be missing something too. I've read over the post and the demo and mine looks like the demo but its not working.

i have the js referenced and jquery in the index.html, my menu link is:

$.scrollTo( '#contact' );" href="#contact">Contact<

and later down the page I have:
div id="contact" class="row"
-h2-Contact-h2-

its not working. can someone please help?; July 18, 2012 at 2:34 PM
Unknown said...: I'm having a lot of trouble getting this to work properly with my Wordpress installation.

Basically, it's not animating the scroll - it pauses the length of time that the animation is defined to take, then skips down, but doesn't actually animate.

I've posted full details here:

http://stackoverflow.com/questions/11580960/scrollto-anchor-link-not-animating-but-rather-delaying-for-the-length-of-the-an

I wonder if anyone would be able to help with this issue?; July 20, 2012 at 12:41 PM
Unknown said...: Fixed nav... I used offset parameter. I was mistake somewhere. Now everything works great. Big thanks.; July 26, 2012 at 8:52 PM
HWC Blog said...: Hello. I have a script that highlights a table row based on today's date. I would like the page to scroll to that row when it is off the page. Can you please tell me what I can add to my script to do this. Thanks very much. The page is http://www.itsmyturnnow.com/HWC/BRP/08.htm

Thanks!; August 23, 2012 at 1:49 PM
Unknown said...: Hi
Thx a lot for your plugin!
I have a question, is it possible scroll to selector with by example 50 px more or 50px less.

Thx for your help!; September 2, 2012 at 2:06 PM
Shaikh Nadeem said...: Hi Ariel Flesler and all, I need immediate help so please reply soon, its working fine with firefox but not working in google chrome(ver. 21.0.1180.89 m). don't understand why?; September 17, 2012 at 10:27 AM
Raze said...: Great work, thank you for such a great plugin. But im in a serious ditch right now, ive included it in the head tag , created links and everything works fine in every browser except opera(latest) can you please help me?; October 6, 2012 at 4:33 AM
monkeyboy79 said...: Hi, firstly great work.

I am however experiencing a little problem. I have got it all set up however,I have to click the link or button twice in order for it to move correctly.

The first click seems to move about 30px and then stops but the second click fires it properly.

I must mention that when i say click twice it is in quick succession, if you click wait and the click again, it doesnt work.

Any help that you could suggest would be much appreciated.

Many Thanks; October 14, 2012 at 9:28 AM
Unknown said...: hi i have a site with your scroll but i woul like to know how to slow down the scrool , www.and-re.pt; January 9, 2013 at 11:32 PM
Lakshman said...: check out this demo...
ScrollToTopDemo; February 12, 2013 at 4:53 AM
Estrella.picks said...: I love your plugin, but how do i use it with adobe edge animate? Edge animate calls for a preloader.js that, when included, breaks your plugin and prevents the page from scrolling. Any ideas? I have a copy of the preloader.js here

Thanks in advance for any advice!; April 22, 2013 at 6:14 PM
Anonymous said...: Hi,
Love the idea but I'm new to JQuery...
How do I create an animated scroll to the #header....with a duration specified from an <a link at the bottom of the page?

Thanks, Can't wait to get this working...
So many bad tuts on the net, this plugin seem like the best option and best solution.
BTW I do not know JavaScript and will be happy to donate if this works ;)

http://webdesignerbrisbane.biz; May 19, 2013 at 9:05 AM
Anonymous said...: Hi and thanks for the great plugin!
I'm new to this and would like to know how to create an animated scroll to the #header div from an anchor link at the bottom of the page with a class of .top?

BTW I don't know JavaScript and couldn't understand the demo page, well it didn't work when I tested it (My Mistake no doubt)
I'm happy to donate too.
Cheers; May 19, 2013 at 9:08 AM
Unknown said...: Hi Ariel
Thanks for your amazing work! I had to add in a feature for the page to scroll whenever the cursor is moved to the edges. Your plugin worked very well for me. :); July 15, 2013 at 1:59 AM
Criss said...: Hi Ariel, I hope this message is reaching you and that you are available for support.
I have tried to use your plugin on several sites but never really succeded. I'm now giving it a new try.

It's a simple website (www.agendadelvolo.info) and I need to have 2 different scrollings triggered by the same link on the menu.
On the index.html page I somehow managed to replicate the effect but it spoils all the layout.
On indextest.html the layout is at it should be but the scrolling is not implemented yet.

Please view the source code and tell me what should I add to the following script:

$(document).ready(function(){ $.localScroll.defaults.axis = 'x';
$('#menu').localScroll({
target:'body',
offset: -225});
});

thank you. Criss; August 16, 2013 at 5:29 PM
Unknown said...: Dear Ariel!
I have baught a template that uses your Jquery code. see link attached below:

http://leoraetgar.com .

My question is, how can i run the scroller to move SLOWER than it is working at the moment.

Thank you and G'd bless-
Zvika.; August 23, 2013 at 5:24 PM
contact.karthikc said...: Ariel

I have an iframe its src is in domain b which I am placing in another domain a, will your scroll plugin work in iframe.

Thanks; September 8, 2013 at 8:41 AM
Банана said...: Great job! Thank you!; September 18, 2013 at 5:45 AM

«Oldest ‹Older 201 – 243 of 243 Newer› Newest»

Post a Comment To get help prepare a demo.

Ariel Flesler

Monday, May 25, 2009

jQuery.ScrollTo 1.4.2 released

Notice

Fixes

Features

Enhancements

Links

243 comments:

By Category

Donate to my blog

Recent

Links

Some sites using these scripts

Followers

Ariel Flesler

Monday, May 25, 2009

jQuery.ScrollTo 1.4.2 released

Notice

Fixes

Features

Enhancements

Links

243 comments:

By Category

General

jQuery Plugins

Scripts

Donate to my blog

Recent

Links

Some sites using these scripts

Followers