Ariel Flesler: jQuery.LocalScroll 1.2.7 released

Wednesday, March 11, 2009

jQuery.LocalScroll 1.2.7 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.

In this release I cleaned up the code a little and added some features. Also removed a few old (aka deprecated) stuff that were still hanging around.

Enhancements

Added some misc enhancements and cleanup the code.
Updated the plugin to take advantage of recent scrollTo additions.

Changes

The element that triggered the scroll cannot be accessed anymore from within the onBefore, you can bind your own click (or w/e) to them in order to add a class or things like that.
settings.persistent is no longer supported (was deprecated).

Features

The set of settings can be accessed from within the onBefore as the 'this'.
The hash (#foo) is set to the URL before scrolling, so the back button works accurately (when scrolling the window).
The option 'hash' doesn't make the window jump when scrolling overflown elements
$.localScroll.hash now resets the element scroll to (0,0) by default. You can set the setting 'reset' to false to avoid this.

Enjoy!

208 comments:

«Oldest ‹Older 1 – 200 of 208 Newer› Newest»

Anonymous said...: Hi Ariel,
thanks for both new versions of scrollTo and localScroll.
Although previous version was working fine for me, I just upgraded to have the benefits of this new releases.
So far, so good, everything has been working like a charm.

About the changes, I wonder if you could elaborate a little more on this:

The element that triggered the scroll cannot be accessed anymore from within the onBefore, you can bind your own click (or w/e) to them in order to add a class or things like that.

I would like to see some code example (no need to set up a full working example) about how to do that binding.

Finally, just to confirm that this changes hasn't affected anything, could you please confirm this chunk of code on onBefore will still work?

Thanks in advance.; March 17, 2009 at 3:18 AM
Ariel Flesler said...: Hi Julian

That snippet will work. The difference now is that, within the onBefore, the this is no longer the clicked element, but the settings object.

That means you can modify the settings after initialization; March 17, 2009 at 9:57 AM
Julián Landerreche said...: Thanks, Ariel.

I'm having an issue on IE6/7, and it seems it was there since scrollTo 1.4.0 and localScroll 1.2.6.

Although, it's weird, I'm pretty sure I've exhaustedly tested the site when it was launched, and I don't remember it to be there.

This is what's happening: for those elements that were outside the viewport when the page was loaded, the local scroll works weird, like if is acting randomly, moving back and forward on each click.

The local scroll seems to work fine for those elements that were inside the viewport when page was loaded.

This can be checked here (a simple setting [1]) and here (a more complex setting using onBefore/onAfter).

BTW, it works properly on FF3 and Chrome

Ariel, I will greatly appreciate if you can take a glance at it.
Thanks.

[1]: I'm using the following code:

$('body.photo-gallery #main, body.news #main').localScroll({
axis:'x',
duration:750,
hash:false,
offset:-120
});; March 17, 2009 at 11:56 AM
Unknown said...: Hi Ariel:

Thanks for your work on your plugins.

I would like to add a class to the target's id...i.e., the hash.

I have a page with content in a left column and a right column, which scroll independently. I have both sides scrolling fine.

My goal is when a link (or actually, a div) is clicked on the right, it scrolls to the location on the left (which works) and the target's id gets a class added that highlights the text.

I'm not exactly sure where or how to add the code that adds the class to the target. Any hints are appreciated!; March 17, 2009 at 10:29 PM
Pablo said...: For any reason when I set the axis:'x' in IE7 the scroll does not work. If I set 'xy' it slides on the y axis. Have you had this issue before?; March 18, 2009 at 7:48 PM
Ariel Flesler said...: Nope, got a demo ?; March 18, 2009 at 8:59 PM
Ariel Flesler said...: @Debra
You have access to all the related elements within the onBefore callback.; March 18, 2009 at 9:00 PM
Ariel Flesler said...: @Julian

Can't figure the problem, I didn't do that many tests on horizontal scrolling, assumed it worked the same way, maybe it doesn't ?

If it's not too complex, you could try removing the floating and testing it on vertical layout, just to see if it works.; March 18, 2009 at 9:12 PM
Unknown said...: Ariel,

Thanks for the wonderful script, I'm amazed how small yet smooth and fully-featured it is.

I've got it working nicely, except for a minor niggle - it refuses to scroll vertically as well as horizontally.

Please look at this demo. the boxes with the green borders are the targets when you click on the black navigation boxes (Ledo, etc.). As you can see, the green boxes come into view perfectly horizontally, but not vertically.

This is the code being used:

$('#winesnav').localScroll({
target:'#content',
axis:'xy',
lazy:true,
duration:3000
});

I'd appreciate any help you might be able to give. Thanks,

Rafael; March 24, 2009 at 6:17 PM
Anonymous said...: Hi Ariel,

First of all, thank you very much!

My question is this:
Is it possible to set the height of the individual boxes to auto height? So that the box height automatically increases if there is more text to display?

I have attempted to do this. But when I set the height to auto in the css file it display all the boxes in a single column.

Please let me know if you understand this or if I should I upload it onto a server somewhere.

Thank You,

John; March 25, 2009 at 12:14 PM
Ariel Flesler said...: @Rafael
The plugin is just doing what you're telling to. I don't see any wrong behavior.
If you want to scroll the window, then delete the 'target' line.

@John
I don't fully understand. Bear in mind that this plugin doesn't deal with styling, just with scrolling.
If you want auto height and stuff like that, you gotta do that yourself with CSS.; March 25, 2009 at 7:03 PM
Unknown said...: Never mind my last comment, I figured it out. However, I have another small problem now. After everything has scrolled, if I try to scroll vertically manually (using the scrollbar), the whole DIV goes back to the original position. This doesn't happen if I scroll it with the keyboard or the mousewheel, only when I click the actual scrollbar. It's very odd and I have no idea why it could be happening. Any ideas? Thanks,

Rafael; March 25, 2009 at 7:03 PM
Unknown said...: Heh, same time posting. I just thought I'd point out that I updated the demo I linked to earlier that shows this new behaviour. To reproduce, click on "Sensorio" link and then scroll down by clicking down on the scrollbar on the right. The #content div should immediately switch back to the original position. Thanks,

Rafael; March 25, 2009 at 7:33 PM
Anonymous said...: Hi Ariel,
an easy one:
I've got this:

$('#nav').localScroll({
target: '#nav',
axis:'x',
duration:250,
hash:false
});

$('#nav-2').localScroll({
target: '#nav-2',
axis:'x',
duration:250,
hash:false
});

Is it possible to to write it just on one "call" to localScroll?
I mean, something like this:

$('#nav, #nav-2').localScroll({
target:this,
axis:'x',
duration:250,
hash:false
});

(I should try it before asking, but the official answer always feels like a bless); March 27, 2009 at 3:28 PM
Ariel Flesler said...: Not like that, but you do:

$('#nav, #nav-2').each(function(){
$(this).localScroll({
target:this,
duration:250,
axis:'x'
});
});; March 27, 2009 at 3:44 PM
Unknown said...: I managed to solve the problem I mentioned above. In case it helps anyone, it turns out it was only affecting Mozilla and that it's due to a documented bug affecting anything containing overflow-x:hidden and overflow-y:scroll (or auto). I had to get around it by not setting overflow-x to hidden and then hiding the horizontal scrollbar by bringing the content below over it. Not ideal, but there's no other way as I had to be able to scroll vertically with the scrollbar.; March 28, 2009 at 6:04 PM
Anonymous said...: hi, is it possible to add a class "active" to the clicked/active link?; April 1, 2009 at 5:23 AM
Mike said...: Hi, I'm wondering if it''s possible to scroll to an item (within a slider) using a class instead of an id?

The reason is that I am using jquery to apply a class of 'selected' to individual items within a list and I would like them to scroll into view when they have this class applied to them.

If you have any thoughts on how I could achieve this I would be very gracious.; April 7, 2009 at 12:51 AM
Jibi said...: Hi and, first of all, congrats !

I use both serial and local (1.2.6) scroll on a site with jquery (1.3.1).
IE6 seems to have a problem with localscroll. A click on the link displays the page but without any scrolling.
I tried the new version of localscroll on a test site, and the page doesn't even displays anymore.

I don't know where the problem is, but you might have a clue ?

the url : http://www.hameka.com; April 7, 2009 at 6:31 AM
Brian said...: Hi Ariel,

This is the strangest behavior, but when I using Localscroll clicking the #footer localscroll link actually causes #footer's background image to be superimposed for a split second over the whole screen with the beginning with the bottom right of the image originating at the anchor's location... any ideas?; April 7, 2009 at 11:51 PM
Ariel Flesler said...: @Anon
You can simply add a separate click binding on the links to do that or code that in the onBefore callback.

@Mike
No, it only works with ids and names. You can simply use scrollTo (without localScroll) and add this special logic yourself.

@Jibi
Not sure what the problem is. If there're no js errors then it's probably a css thing related to the overflow.

@Brian
Got a demo online ? try removing the option 'hash' if you're using it.; April 14, 2009 at 8:48 PM
Julián Landerreche said...: Hi Ariel,

I'm using localScroll in tandem with scrollTo. Yes, I know that localScroll needs scrollTo to work, but that's not what I mean ;)

I'm using scrollTo inside localScroll's onBefore.
I would like localScroll's scrolling to begin just after scrollTo's scrolling has finished (that's why I'm using it inside localScroll's onBefore).

Although you told me once that scroll (localScroll in this case) starts after onBefore "finishes" (probably, when it returns true), in this case the localscrolling happens at the same time that the scrollTo scrollilng.

So far, that's what I've tried

$.localScroll({
(...)
onBefore: function(){
$.scrollTo(0,"normal");
}
(...)
});

and also

$.localScroll({
(...)
onBefore: function(){
$.scrollTo(0,"normal",{
onAfter: function(){
return true;
}
});
}
(...)
});

But no luck yet.
Can you shed some light on this?

Many thanks.; April 18, 2009 at 6:46 PM
Ariel Flesler said...: @Julian
Put this inside the onBefore:

$('#content').queue(function(){
$.scrollTo( 0, 400, function(){
$('#content').dequeue();
});
});; April 18, 2009 at 7:14 PM
Julián Landerreche said...: Many thanks, Ariel.

Just for the record: it works only if "queue" setting (for localScroll) is set to "false".
If not (ie. "queue: true"), it will scroll just one of the axis (the first one declared on the "axis" setting).; April 20, 2009 at 1:35 PM
Charles Cheese said...: Hello, I have one issue i hope you can address.

I am making a website with 4 tabs all sliding on the X axis (Home, About, Portfolio, Contact).Under the Portfolio tab i have 2 sub-sections (Print & Web). I have these sliding on the Y axis. What i am trying to do is if someone is on the Print or Web sub-section and then clicks on the Contact tab i would like it to slide back up on the Y axis to the portfolio tab, and then slide on X axis to the Contact tab.

Any suggestions?; April 23, 2009 at 5:44 PM
Ariel Flesler said...: @Charles
You can change the order by permuting the 'x' and 'y' in the axis setting, also, the way you arrange them in the page will dictate the movement.
The plugin just goes from one to the other in the (axes) order you specify.
Play with the settings & css :); April 23, 2009 at 9:43 PM
roneill said...: Hi Ariel,

thanks for this script, I have been playing around with css and have managed to get the script to work in a way I wanted with each scrolling section taking up the full browser width and content aligning to middle

as seen here demoonly thing is the effect is a little jumpy and im wondering is there anything I can do to make it a bit smoother. My JQuery knowledge isnt great and im not sure i have evrything setup for ideal use.

thanks,

rich; April 25, 2009 at 12:04 PM
Ariel Flesler said...: Hi Richy
It's always about tuning the css to ease on the browser's redrawing process.
First of all, you should set the option 'axis' to just 'x' instead of 'xy'.
You should specify dimensions (width,height) wherever it is possible.
Finally (as far as I know) you should not abuse (CSS) floating and position absolutes.
I'm not saying "don't use them", just keep it controlled.; April 25, 2009 at 1:39 PM
Anonymous said...: Hi Ariel

When, for example, has been clicked on, can I retrieve the information "#top" from within the $.localScroll().

If so, how?
Many thanks.; April 26, 2009 at 3:04 PM
Ariel Flesler said...: Hi, not sure I follow, but as far as I understood you want to retrieve data from the clicked link or the target element.
You can do so by passing an "onBefore" callback. It receives this information.; April 26, 2009 at 7:50 PM
Anonymous said...: Yes, you understand correctly. What variable is this stored in though?; April 27, 2009 at 6:34 AM
Anonymous said...: Sorry, my explanation was probably not brilliant. I was looking for 'anchor.id' in the onAfter function.

Thanks very much for a great plugin.; April 27, 2009 at 8:26 AM
Unknown said...: Hi Ariel,

Great script and works very well for my application. I can't seem to figure this one out though. In IE6 the text runs over the image. I didn't want to populate it anymore until I could fix this issue or figure another solution.my siteHere is a screenshot of the text overlap.

Thanks for any feedback.; May 1, 2009 at 12:11 PM
Ariel Flesler said...: Hi
I'm not a CSS expert (I wish I was). Dunno why that happens on IE but there're surely plenty of hacks out there to fix it. Seems like a common situation.; May 2, 2009 at 12:57 PM
Brian said...: Hi Ariel,

I have noticed that because I am using localscroll to scroll to my footer div via that there is a sudden stop at the bottom, troubleshooting, I found that divs higher on the page still have the gentle, easing stop. I assume this is because localscroll is trying to get the div to the top but is not allowed and so the animation is cut short. Any suggestions for resolving this (I hate to point the link to another div because that will make for an ungraceful degradation if javascript is turned off).

Thanks a bunch!; May 2, 2009 at 4:41 PM
Brian said...: BTW, I think this might be a bug, because it works fine in IE7, even IE6, and was formerly working in FF3 but I think it quit working in the most recent upgrade for FF3.; May 2, 2009 at 5:10 PM
Ariel Flesler said...: Got a test case online that fails ?; May 2, 2009 at 7:27 PM
Brian said...: http://dreamstarstudios.net/wp <--- This is in progress, but you can click "contact" to see. Login with guest / 777; May 2, 2009 at 8:05 PM
Jay said...: Hello Ariel,

I was just wondering if localscroll will work in conjunction with the jQuery.easing.1.3.js? I haven't been able to locate documentation on it.

Thanks; May 6, 2009 at 4:28 PM
Ariel Flesler said...: @Brian
Not sure, you could try using a different doctype ? if you want, put the unminified versions of both plugins and I'll check.

@Jay
Yes, add the plugin, then set the option 'easing' to the name of the equation you want.; May 6, 2009 at 11:19 PM
Jay said...: Thanks a million! I am currently using localscroll on 2 projects and I love it. Thanks.; May 7, 2009 at 5:22 PM
Brian said...: Hey Ariel,

I didn't touch the minified code... I think this is a bug in the current version of Firefox. It works fine everywhere else. I think I might be stuck :( It's a rare problem because the window is trying to scroll the footer to the top of the screen, most people probably don't encounter this. Maybe you can fix it in the next release ;) Let me know if you have any other ideas...; May 14, 2009 at 1:31 PM
Ariel Flesler said...: @Brian
I didn't say you modified the code, but I can't debug with the minified code. I'd have to download the whole page with all the files and replace those minified.; May 14, 2009 at 8:32 PM
Jay said...: Hey Ariel -

I sent you an email with the issue I was having. I am using a temp fix by using an iframe, but I really don't wanna use it unless I absolutely have to due to the way I have it laid out. Any help would be appreciated. Thanks.; May 14, 2009 at 9:52 PM
Brooke said...: Hi Ariel,

Thanks so much for this!

I've previously used localScroll successfully, but I'm now running into trouble while trying to use it with jScrollPane. It seems that when both are called on the same div (or another nested with it), localScroll loses its animation and simply jumps to anchors.

You can see the problem here. Do you know of a solution?; May 29, 2009 at 2:46 PM
Brooke said...: Never mind, I no longer need localScroll on the page. Thanks!; May 30, 2009 at 4:07 PM
aiwazz said...: Oh boy, yes, me again... The reason i pester is I'm designing a whole project around your work, and I'm almost there... Dont worry. Trying to wrap my head around this: i was using scrollto on its own and i would load a different local iframe into a div named reactor below the scrolled element with the onafter function by doing this in it:

document.getElementById('reactor').innerHTML = iframe html code, blogger wouldnt let me post it;

in local scroll is there a way to add a different onafter for each anchor id in the groups function? I sense there is but I am just learning javascript... And how would I write that for best performance? How about I make a donation right now for your help and work, this was turning into a one way street. Thanks for everything Ariel.; June 6, 2009 at 3:30 AM
aiwazz said...: ya that was moi, cthulhumythos23, sorry it couldnt be more, i'm outta work at the moment. ;); June 6, 2009 at 3:49 AM
Unknown said...: Thanks for your work.

I use jQuery.LocalScroll 1.2.7 to move the entire page. To do this I use "$.localScroll();" and it works fine.
Now, I have inserted another application jQuery UI Tabs, but the problem is that the links UI Tabs also move the screen.
Can you explain how the filter to ignore the links UI Tabs?

Thanks.; June 6, 2009 at 9:12 AM
Ariel Flesler said...: @aiwazz
LocalScroll's onAfter is ScrollTo's onAfter actually. The first argument (check ST's docs) is the target element. It will have the id you're seeking.

You can add:
if (elem.id == 'foo')
....
else
....

If you want, send me an email next time. I might reply faster.
Thanks for the donation :)

@Jampov
You can use the setting called 'filter' to choose which links are affected. Another way is using $('something').localScroll() instead of $.localScroll(). That allows you to define containers and only the links within them will be affected, all this is explained in the main blog post.; June 6, 2009 at 11:49 AM
Unknown said...: Thank you very much for answering Ariel.

I've tried calling but filter does not work. Am I using right?
The identifier id="content" contains the entire page, so that everything is inside #content.

$('#content').localScroll({
filter:'#tabs'
});

body
div id="content"
......................
div id="tabs"
................
/div
.......................
.......................
/div
/body

I have looked at the main blog but I can not find the solution.
Sorry my bad English.
Thank you.; June 6, 2009 at 12:28 PM
Ariel Flesler said...: Got a demo online ?; June 6, 2009 at 12:30 PM
Unknown said...: Hi again.

I have a demo at: http://www.swimm.host.sk/tabs3/index.html

If I act a few times the tabs, for example (One, Two, Three, Two, One, Three) immediately and can not use either localScroll and the scroll browser. This happens in Firefox and Opera. In Safari for mac press One, Two... scroll ago up.
I want to ignore the links in the tabs.

Thanks again.; June 6, 2009 at 2:43 PM
Ariel Flesler said...: You need to either put a css class to all the links you want to be affected by localScroll or to their containers.

If added to links:
$.localScroll({
filter:'.scrollLink'
});

If added to containers:
$('.scrollContainer').localScroll();; June 6, 2009 at 5:21 PM
Unknown said...: Thanks Ariel. Now it works correctly.

If the demo is worth to someone:

http://www.swimm.host.sk/tabs4/index.html

(The server "host.sk" is very slow. Sorry.); June 6, 2009 at 8:36 PM
John said...: localScroll seems to overshoot by several hundred pixels when scrolling horizontally in Safari 4. See here: http://livingpixeldesign.com/

Compare it with FF 3, in which it works as expected.

Any way to correct this?; June 14, 2009 at 7:21 PM
Ariel Flesler said...: @John
LocalScroll relies on ScrollTo which in fact relies on $.fn.offset.
If it isn't accurate on Safari 4, then it needs to be fixed in the core (the calculations that is).
If you can prepare a test case, without localScroll, just $.fn.offset then it can be reported to jQuery's bug tracker.; June 14, 2009 at 8:08 PM
Dan said...: I think I did everything I was supposed to but I still can't get this plugin to work. I'm not sure if there is a conflict with the jcaption plugin, but I wouldn't think so.

I created an "a" tag with id=top just after the "body" tag and created an href=#top at the bottom of the page. This should cause a scroll effect to the top of the page, right?

I've only tested this in FF3 and Safari4 and both did not work. Click on the following link to test: http://www.fransboetes.com/we-have-worked-for.php

Please help!!!; June 17, 2009 at 1:41 PM
Ariel Flesler said...: There's an inner element "eating" the body's overflow. If you use firebug and hover over the elements, you'll see what I mean.; June 17, 2009 at 4:18 PM
Fenn said...: Hi!

First, thanks for all your amazing work!

Then... I have a very strange cross-browser compatibility issue with LocalScroll.
I'm making a website for a friend who wants a "horizontal design", with links spread everywhere in the page, so I thought that LocalScroll would perfectly fit.
I started the dev with FF, everything was fine. But when I paused my work to run some tests on other browsers, I saw that the scrolling effect doesn't work on IE<7 and Safari (on click, the page jump directly to the anchor).
I opened the localscroll test page with all the browsers, it works perfectly... There is a lot of javascript in the page, my friend love effects ^^' And none of them shown any issue except the call to localscroll, whatever the browser used. So I first thought about a conflict and ran other tests with a very simple page: an overflown div containing a list of three blocks with a float:left; and three links targeting those blocks. I inserted jquery, scrollto and localscroll, and only called localscroll with the default settings (except for the target, my overflown div, and the axis, set to x)...
And it was the same thing, no issue with FF, Chrome, and IE7+, and default browser's behavior instead of scroll effect for Safari and IE<7. A very odd thing is that if I turn on the 'hash' option, when I refresh the page with a hash in the url, it triggers the effect like it should (but still not working by clicking on the links)
The fact that your online demo's working in all browsers show that I'm missing something, but I'm unable to figure it out :/
I tried to copy and paste the js files you use in the demo (in case I just forgot a semicolon or let an extra comma) but obtained exactly the same result.
I'll continue to think and test tomorrow, and I'll post another comment if I find what's wrong or if I give up.
If you have any idea... (I'm quite sure that's an obvious little thing)
Thanks in advance. ^^
(and I apologize if my english isn't totally correct, I'm french and don't often have the opportunity to use this langage); June 17, 2009 at 9:09 PM
Dan said...: Ariel, Thanks for pointing me in the right direction. I had added overflow-y:auto to the html and body tag because of the fixed footer at the bottom of the page. Once again, I most likely blame this problem on IE6.; June 18, 2009 at 12:21 PM
Unknown said...: I don't see how you can say on the jQuery website that LocalScroll is "incredibly easy to implement".
I've been copying/pasting code the last 1/2 hour now and still can't get it to work.

I followed the regular demo page at http://demos.flesler.com/jquery/localScroll/ and copied it down to my localhost.
Then I copied the 3 .js files and 2 .css files and left the one going to googleapis alone.
But it's still not working.; June 23, 2009 at 11:59 AM
Ariel Flesler said...: Hi Phillip
I suppose you skipped the part of the article titled "How to implement it" ?

You just need to arrange a scrollable page with html/css. From there, you just add a call to $.localScroll() for a basic behavior. From there, you can add more settings if you need.; June 23, 2009 at 12:19 PM
Unknown said...: I apologize for my attitude yesterday.; June 24, 2009 at 9:45 AM
Ariel Flesler said...: No problem ;); June 24, 2009 at 12:35 PM
Unknown said...: Hi Ariel,

I am in pain. There seems to be some conflict with different libraries (ScrollTo and localscroll) on our corp site. If you could visit p$j$m.com (remove $ signs plz) and click Glossary (top left), let it load, close it and then try to search (top right), it throws an error in IE7 and IE8. This behavior does not happen in FF or IE6. I am quite new to jquery and js so any help highly appreciated. Thank you!; June 25, 2009 at 11:07 AM
Unknown said...: Hi Areal,

Not sure if you had a chance to look at my issue but I tried to run a test to see if there is memory leak in IE and it came negative. I friend of mine suggested I add some functions to release the memory, any idea what and how I can do that?

Thanks.; June 26, 2009 at 10:16 AM
Ariel Flesler said...: Hi
Note sure what the problem is. You should try to make a minimalistic demo that also triggers the error. Then will be much easier to spot the problem.; June 26, 2009 at 10:56 AM
Unknown said...: Yeah.. the problem is I dont really know how to recreate this problem.. like I said pretty new with jquery... I best way I can explain this problem is on the main site itself :(; June 26, 2009 at 11:01 AM
Unknown said...: Hi Ariel...

First wanna say thanks for all your hard work - you obviously give this code great support too :)

I'm sure you're tired of ppl saying they can't get the code to work, and it's true that I'm not a pro - but I've really tried hard and I seem to have hit a brick wall.

If you have time I've uploaded the page I'm working on to http://www.amls.tv/localscroll/directors.html specifically for you to check it out if you're inclined..

It's frustrating me enormously because I know this plugin is exactly what I'm looking for :p

Thanks again for your time - it's really appreciated!

Piers; June 27, 2009 at 12:13 PM
priscilla said...: Hi Ariel,
is a nice work you have here :)

and since i'm new with all of this, do you mind giving an example how to scroll page1.html in iframe?

thanks for your help :); June 30, 2009 at 7:12 AM
Ariel Flesler said...: @piers
I supposed I took too long to reply, then link is down.

@priscilla
Can you arrange a demo with all you want except the scrolling ? that way it'll be easier for me to tell you how to add it.; July 5, 2009 at 1:19 PM
Anonymous said...: Hi Ariel Flesler,

I am trying to use your script.
(which like very other person, i love!)
What i would like is the following: use 1 navigation to scroll multiple areas (2).

In the demo: http://tinyurl.com/pdlmsh

You can see what i would like, now the top area is scrolling (click the small circkles) But i als would like the content to scroll in the centered blue area (scroll up and down).

So click circkle two, and the top area scrolls to content two but also the secundairy blue area scrolls to content two.

I tried:
var target = $('#scroll-mask, #subscroll-mask').get(0);//the scrolled div

Hope you can help me out, thanks!

Michal; July 6, 2009 at 9:48 AM
Anonymous said...: Ariel im replying to above: maybe something like multiple hashes?

(i am the writer from above post); July 6, 2009 at 10:57 AM
Unknown said...: I thought you might have taken a look but decided my messy coding made me a lost cause :)

I've got it working in FF but not Safari (4b)... that's kind of surprising as I built the css separately and it was all working cross browser - but when I plugged it into the page it failed in Safari.

I've put it up again at http://www.amls.tv/amls/directorsamls.html

If you get time perhaps you can check it out and see what you make of it...; July 6, 2009 at 1:05 PM
Unknown said...: Okay... that's weird - I just uploaded it and it works from the server in Safari, but not from local files...; July 6, 2009 at 2:38 PM
Ariel Flesler said...: @Anon
I was planning to add support for a situation like this, some time ago.
Turned out to be somewhat problematic so I dropped it, at least for now.

You prolly can make this manually, just using scrollTo. Note that you can't repeat ids in a page, but you can do so with names.

@piers
Yeah, some ppl posted about local files and Safari before.; July 6, 2009 at 8:35 PM
Anonymous said...: Hi Ariel, thanks for your plugin but unfortunately I have had problems trying to use the localscroll. Really I don't have idea why it isn't working in this page 'cos I tried in another and it worked. So I would be very pleased if you could have a look at my page to try to find the error. the url is http://tocoimobiliaria.freehostia.com/anuncio.php?id=2 and it should scroll when you click on the orange button (informacion, fotos, facilidades, etc).Thanks I will reaaly appreciate ur help; July 6, 2009 at 8:57 PM
Ariel Flesler said...: Hi, it works well for me on FF.; July 7, 2009 at 2:10 AM
Anonymous said...: @Ariel:

Got the 1 nav 2 areas working with scrollto. Thanks for the advice!; July 7, 2009 at 8:05 AM
Florian said...: Hi,

is there a change to activate localScroll also with other elements than a-tags? I have a label with the id "business". When I click the label the page should scroll down to footer to reveal the submit button. Would this be possible?

thx
Florian; July 10, 2009 at 7:23 AM
Ariel Flesler said...: @Florian
No, the plugin only works with a and area elements.
You can use "just" scrollTo without localScroll instead.; July 10, 2009 at 8:07 PM
fjckls said...: Great Plugin, many Thanks!!!
http://www.context.fjofjo.net; July 17, 2009 at 10:12 AM
Ariel Flesler said...: Thanks :); July 17, 2009 at 1:17 PM
Peter said...: Hi Ariel,
Thanks for the plugin, first of all! I was using some non-jQuery code called softscroll from http://scripterlative.com/files/softscroll.htm before, and LocalScroll has been so much better to work with.

Is there any way to essentially "queue up" a couple of anchor destinations? In this case, I have a large page with a bunch of absolutely positioned divs. I'd like to be able to click a link to #square2 from a div called square1, and instead of scrolling directly to square2, the viewport first scrolls to div#in-between before starting the effect again and moving to #scroll2. So with axis set to xy and queue set to true, the viewport would scroll 4 times total before arriving at #square2. Is that possible?

This is just for a fun, "arty" side project that I'm working on, so it's by no means urgent.

Thanks again!; July 24, 2009 at 1:22 AM
Ariel Flesler said...: Hi Peter
LocalScroll only works with clicks on links/areas.
You can generate scroll animations by triggering the click event on the desired links.
If you keep the settings 'lock' and 'stop' as false, animations should queue up.

Maybe you should consider trying serialScroll for the sequential scroll.; July 24, 2009 at 10:23 AM
Anonymous said...: Hi,

I am trying to make anchor navigation with easing but firebug gives me this error:

o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function

jQuery 1.32, jQuery.LocalScroll 1.27, jQuery.scrollTo 1.42

Help; July 29, 2009 at 8:37 AM
Ariel Flesler said...: Hi
You seem to be using an easing equation that is not registered.
Check what you put in the setting called 'easing'. If this is the problem, you need to either remove the easing or include the easing plugin.; July 29, 2009 at 9:34 AM
Anonymous said...: Yeah, the problem was in easing equation(elasout not working but easeOutElastic works fine).

Tnx; July 29, 2009 at 1:13 PM
jamus said...: Can you prevent the browser jumping down to content that is below the window level? E.g. only scroll left right?; July 31, 2009 at 7:21 AM
Ariel Flesler said...: Set 'axis' to 'x'.; July 31, 2009 at 9:15 AM
Ignacio said...: Hi Ariel, awesome script !

I was wondering if it's normal that the scroll lost the smooth movement if there about 15-20 rather heavy images in the page.

I noticed like there's an interrupted movement, not totally smooth, while the window is scrolling down.

It's possible that the browser lost some time trying to render the images ? I have no other explanation, since I used the script in a text-only site and it worked perfectly.

You can see here a sample, and click in CONTACT at the top.

I'm using Cufon for the headings, but the problem remains there even without it.

Many thanks if you can give me some tip.; August 6, 2009 at 8:37 AM
Ariel Flesler said...: I just see a form being shown as the scroll goes down. It's quite expected the whole glitch, you're scrolling to the bottom and it (the bottom) moves down as the window scrolls, the whole effect seems odd to me.; August 6, 2009 at 10:12 AM
Ignacio said...: Hi Ariel thanks for answering.

Yes, this is intended to be like that. Which was strange to me was another thing : the scroll movement is not as smooth as I knew it : it shakes and it trembles a little bit.

This is the strange thing.

Did you found a normal scroll in there ?

I use Firefox as a browser (running on Windows Vista), and I see a trembling scroll, not so cool as your demos if I could say.

I fear that the images are the problem ?

Forget the opening form, that's just calculated :); August 6, 2009 at 1:09 PM
Ignacio said...: Hi Ariel, if you meant the sliding panel was part of the problem, you were right. Thanks I solved it.; August 6, 2009 at 3:19 PM
Darren said...: Hello Ariel,

Have used and JS scroller in the past but need a smooth scroller like yours.

However Jquery is still a mystery to me.

I created the anchors as specified but can't get the code to work.

I downloaded jquery.js and jquery.localscroll-1.2.7-min.js, put them in a scripts folder.

Added a script tag in the head:

script src="Scripts/jquery.js" type="text/javascript" /script

script src="Scripts/jquery.localscroll-1.2.7-min.js" type="text/javascript" /script

Also added the addtional script tag:

script
$(document).ready(function() {
$('#nav').localScroll({
target: '#nav',
axis:'x',
duration:250,
hash:false
});
});
/script

Created a link on a nav bar:
a href="#nav">Resources /a

which corresponds to a local anchor further down the page:

a name="nav" id="nav" /a

Needless to say it doesn't work due to something fundamentally wrong with my silly code.

The local anchor is nested in 4 div wrappers. Could that be the problem?

Any pointers would be gartefully recieved.; August 7, 2009 at 8:07 AM
Ariel Flesler said...: Hi Darren
You need to include scrollTo as well. If you use Firebug, you'll probably get an error "jQuery.scrollTo is not defined".
If you have any other problem, please post a link to a demo if possible.; August 7, 2009 at 11:12 AM
anders said...: Hi Ariel,
Is it possible to make buttons that scroll a specific amount of pixels instead of to anchorpoint-ids?; August 9, 2009 at 2:11 PM
Ariel Flesler said...: You can, by using just scrollTo and relative animations.; August 9, 2009 at 4:43 PM
Unknown said...: Hi Ariel

Thanks for a great script! I have a problem though. I've used the Coda Slider tutorial: http://jqueryfordesigners.com/coda-slider-effect/ To get the horizontal slide effect.
It works like a charm in all a-grade browsers EXCEPT IE8. I've tested and tested but can't seem to figure it out.
The problem is that the scroll 'resets' after my first click. I've placed #-links inside my divs to guide the user forward in a 3-step process. My guess is the problem has something to do with the hash part in the address line... You can see it here (but the problem only exists in IE8): http://bit.ly/RRU9h

Any advice would be greatly appreciated! Thanks in advance.
. Johan; August 18, 2009 at 4:43 AM
Unknown said...: Hello, and thanks for looking a this! I know it's probably really simple, but I just can't find exactly what I'm looking for:

All I want is to look at the hash tag in the url, and scroll the page to a place a certain number of pixels above the element on the page.

I gather I would use the $.localScroll.hash() for this, but how to tell it to scroll to the specified place above the element?

Thank you so much for helping with this! My project is being held up for this tiny detail and it's killing me! Wish I wasn't such a jQuery n00b...; August 18, 2009 at 8:15 PM
Ariel Flesler said...: @Johan
Not sure where should I be looking, note that you have a javascript error, check with Firebug.

@Gabriel
$.localScroll.hash({
offset:{top:-10,left:0}
});

You can of course change those values. The offset setting is documented on scrollTo's post.; August 18, 2009 at 9:20 PM
Unknown said...: My apologies for being so dense, but in the Ajax demo, where is the content coming from? I don't see in the source code any links to the actual content that's loaded. I know, I know, you all are laughing at me! But this seems so cool, I thought I'd show my ignorance and ask ... so I can use this great thing.; October 24, 2009 at 6:04 PM
Ariel Flesler said...: @Dean
The code within init.js is generating the url based on the link's hash (#section2). That's just an example, you can load the content any way you want.; October 28, 2009 at 8:58 PM
Robert said...: Hi Ariel,

First, thank you for the beautiful js plugin. I think it is wonderful. I currently have it going on http://utngtrust.org/ So, take a look at the contact tab and be proud.

One problem I noticed was that although it works perfectly in IE 7+ and the latest Firefox, it appears to not work at all with Chrome. Do you know of any issues, or did I do something quirky that confuses Chrome?

Thank you again!

Robert; November 5, 2009 at 1:55 PM
dhirajgupta said...: Thanks for the awesome work in your LocalScroll plugin, our users are *really* loving it! :)

We've implemented LocalScroll plugin in our Cyn.in product, for things like doing local scroll for the generated Table of Contents for Wiki pages, Goto Top links, and so on. It's really excellent!

Have a look at how we're using it, here: http://www.cynapse.com/community/home/cyn.in-users/microsoft-active-directory-services-integration; November 12, 2009 at 3:38 AM
Karega McCoy said...: Is there any way to navigate to an element based on element index instead of the id.; November 16, 2009 at 7:37 PM
dawbs said...: Hi, thanks a lot for this post it is brilliant!
I am trying to put it into a site of mine and am just wondering if it is possible to set where the scroll stops. So instead of having it stop at the left edge of the screen could it be centered because I want the header and footer to be centered on the page and for the scrolling content to line up with this.

Thanks again; November 26, 2009 at 9:46 PM
Unknown said...: Hi Ariel

thank fo a cool plug in.
I need some help, hope you can have a look at this for me.

http://www.unicornhouse.com.au/

click on gallery of works >

as you can see there is a serial scroll on that gallery. the next and back button works, but the nav to the 3 secations
* current projects
* commercial
* residential

seem to go to some random elemet.
pritty sure I have done it the same as you. I have spent hours trying to find the cause. I really need the nav to go to the corresponding id. any ideas

cheers Leon; November 27, 2009 at 1:26 AM
Unknown said...: This comment has been removed by the author.; November 27, 2009 at 1:26 AM
Unknown said...: Hi

Nice work but I am having a few problems - - hoping for some help - - I apologize for the long post but I hope to give complete info here.

It is a little complicated, basically my deal is this:
1) within multi-step form, (on a certain page of the form), upon a radio click, I ajax-load a long list of selectable items (there are number of radios and each fetches a different list);
2) once a user selects from the list, they may leave this "page" of the form and go to the next "form page" (I am using this "page" terminology since this is what is in jQuery Tools scrollable plugin which I am currently using) - - note that this selection is stored in an object called "currentState" as a property called "childId";
3) if the user navigates back to that page BUT has scrolled down further in the list (so that the current selection is not visible), I need to "scroll to" that selection within this ajax-loaded div;

So, net-net, at the right moment (and I can detect this), I would love to use localScroll to make certain that the current selection is always in view.

Here is the test set up (driven by "click" event at the moment for testing):

//testing section
//currentState.childId; is the id of the current selection
var childId = currentState.childId;
//#subkind-target-wrapper is the ID where I load the ajax-fetched list
var theTarget = $("#subkind-target-wrapper #"+childId+"");
var scrollToOptions = {
target: theTarget
}

//test-scroll-to is the id of a test link on the page
$("#test-scroll-to").live("click", function () {
$.localScroll(scrollToOptions);
});

The jQuery syntax seems correct and it correctly the variable "theTarget" correctly returns the target jQuery object.

But this does not seem to work - - cannot find any errors in Firebug, though. Seems like the init is correct.

Any help at all would be appreciated, but I suspect that even though the ajax-target wrapper is present when the dom is loaded, the actual selected child was not - - this is why I use "live" to bind the click to the new element.; December 22, 2009 at 8:13 AM
Mithgol said...: Instead of simple

$.localScroll({
hash: true,
})

I had to use

$.localScroll({
hash: false,
onAfter: function(targ, settings){
location = '#' + ( targ.id || targ.name );
}
})

Otherwise, CSS rule ":target{...}" does not take effect for the link target (in Firefox). MediaWiki footnotes, for example.

You may want to rewrite LocalScroll's if(settings.hash){...} to fix that.; January 8, 2010 at 2:04 PM
joop vos said...: Ariel, thanks for all.
Everything is working OK at this page!
Except that a:visited{text-decoration: none;color: purple;} doesn't work. Can it work?; January 28, 2010 at 12:38 PM
Xeross said...: Hey,

I have the problem with localscroll not working in IE7.

My page gets loaded using ajax, after that I use a few loops to add the prev/next links to it, and after that I call localScroll.

It works fine in IE8 and FF3.5 but IE7 doesn't. The page can be found here

Thanks for your time, hope we can figure it out, Xeross; January 29, 2010 at 11:45 AM
Quazzer said...: Hi Ariel, I'm experimenting with a page like your LocalScroll demo, but on initial load (or a refresh) of a url that has a hash I want it to go to the first anchor as it would do if the root page is loaded. Any ideas please?; February 13, 2010 at 1:56 PM
mcgyver47 said...: Hi
I have
div1 class="post"
div class="title"
div2 class="post"
div class="title"
div3 id="post"
div class="title"
....
div10 id="post"
div class="title"
I am trying: clicking on div#title belonging to div1 scrolls to
div#title belonging to div2 and so on
to cut a long story short clicking on div#title scrolls to the next
div#title and so on
I have tried and not succeded so far
Any help will be very much appreciated
jean; February 20, 2010 at 12:57 PM
Fabian said...: Hi Ariel,

first of all - thanks for ur great work.
I managed to get the scroll-effect to work, but I got an issue. When one clicks on a link it doesn't start scrolling right away - for a second or two nothing happens and then it scrolls.

Any idea how to fix this?; February 22, 2010 at 6:33 PM
Steven Brumby said...: Hi Ariel,

Thanks for your great jQuery plugins. I have created a mini-site using LocalScroll which you can see at
http://202.174.100.170/~alpacaca/index.php
I checked it out several browsers including IE6 and Safari (4.0.4) and the scrolling works OK. My problem is that my client says that on these two browsers (IE6 and Safari 4.0.4) the site works OK but without scrolling.
Any suggestions you have would be greatly appreciated.

Steven; February 22, 2010 at 11:31 PM
Marty said...: Hi Ariel,

I want to scroll the page vertically, and within a certain section of the page scroll horizontally within a div.

How do I do this?

Thanks; February 23, 2010 at 6:14 PM
Marty said...: PS. I have the vertical page scrolling working, but I can't get the horizontal scrolling within a div to work.; February 23, 2010 at 6:16 PM
Anonymous said...: Hi Ariel and congrats to this great script. I'm using it on a site, and if I use it only with the default call $.localScroll(); it works perfectly. Nonetheless I need to exclude one element from being scrolled to when clicking a link, so I put it the following way:

$.localScroll({filter:'#element-not-to-be-scrolled-to'});

Well, when doing that the script stops working alltogether, it just doesn't do anything at all, as if it was not present in the code. Do you know of any reason why that could be? I've double and triple checked all the code, no open tags, no javascript errors, as said it works perfectly with no argument but not with the filter argument.; February 27, 2010 at 11:28 PM
Benoit Essiambre said...: Hi There, I was having the same problems as others where localSroll does not work in safari when opening files directly.

I think i found the issue which is that when safari opens a local file location.href returns a path with filenames that are not urlencoded while in the filter() function of localscroll, this.href returns a path that is url encoded.

In my case, the problem occurred for a file that had a space in the html file name (I know bad idea).

Adding the following lines in jquery.localscroll.js:

if(URI.indexOf('file://') ==0){
URI='file://'+escape(URI.substr(7));
}

made the script work for the particular file in safari. However, I realize that it probably breaks things for other browsers that already escape the characters in location.href. I'm a javascript newbie. I'm not sure how to integrate this so that it works with all browsers.

Maybe the best solution is simply not to use page names with characters that need to be escaped.; March 1, 2010 at 8:51 PM
Web Design said...: Really helpful JQuery thing dude.
it saved me lots of time.
Thanks.; March 2, 2010 at 1:02 PM
Unknown said...: Hi Ariel,

Amazing stuff here! You rock!

Is there a way to have the demo at
http://demos.flesler.com/jquery/localScroll/

autoplay and go from #section1 to section2,3,4 then repeat back to section1?

Kinda like a bit of a slide show, until the user clicks something or an on/off play/stop button...

If that's possible at all and you can help me figure out how... than I'd love to paypal some cash your way! What's your freelance rate?; March 2, 2010 at 4:43 PM
Unknown said...: Hi Ariel,

I need to taget two separate containers. Their ID's are #1 and #2.

In document ready I'm doing this:

$('#1, #2').each(function() {
$(this).localScroll({
target: this,
duration: 250,
axis: 'x'
});
});

I'm also adding this to init.js:

$.localScroll({
target: '.slider-content', // could be a selector or a jQuery object too.
queue: false,
duration: 1000,
hash: true
});

Problem is both are targetted at the same time. Thus, they both rotate at the same time.

Is their a way to target individual sliders?

Thanks,

Buzzard; March 3, 2010 at 2:44 PM
Brandon said...: Hi Ariel.

I've successfully used both your localScroll and serialScroll plugins. However, I'm wanting to incorporate the two together. I need the full window scroll capabillity of localScroll with the next/previous functionality of serialScroll. What is my best option for doing this?

Thank you.; March 5, 2010 at 4:28 PM
zbs said...: Hi, Ariel.

Great plugin! I'm using $.localScroll.hash on document.ready to scroll to 'after the jump,' it seems to work fine in Firefox but gives me a flicker in Safari, like the browser is autoscrolling it down to the anchor and then the plugin is bringing it back up. Do I need to disable the browser's behavior somehow or does the plugin do that already?

http://plyzine.com/articles/32/#more; March 9, 2010 at 1:13 PM
Duncan said...: Hi Ariel,

I've recently used scrollTo & localScroll on a site. I have a list of links on the left and the area to the right scrolls through the content (much like your demo).

I would like to be able to append a css class to the link that is currently active. Is this possible? -- I haven't been able to find a solution.; April 17, 2010 at 10:39 AM
briznad said...: This is great. I'm using localScroll with the hash option and this is exactly the script I was looking for.

Thank You!!; April 29, 2010 at 2:25 PM
Uxable said...: Hello Ariel,
Thanks so much for your wotk on this plugin.

I'm having a serious issue with it in IE8 however, where the last link in my horizontal scrolling navigation never completely scrolls. It works perfectly in IE7, FF, Safri, Chrome, etc. But I simply cannot figure out why it's not working in IE8.

My demo is linked below. Somply remove the $'s. Thanks in advance for any help!

You can see a demo here:
www.ux$ab$le.c$o$m/_dev/_localscroll; May 1, 2010 at 7:27 PM
Uxable said...: NOTE: I seem to have resolved the issue by changing the 800px right margin to right padding for each page(I do this to space them), but I'm still not clear why the right margin did not work in IE8 but worked fine in IE7 and all others browsers...; May 1, 2010 at 8:23 PM
Unknown said...: Fantastic plugin. I'm using it a BUNCH in my various projects. Question -- let's say I want to set 2 elements to scroll (both with overflow set to hidden). Is this possible using this plugin?; May 5, 2010 at 11:50 AM
sou;ohn said...: Is there anywhere I can find some source files or a tutorial on how to create a LocalScroll effect using AJAX to load the information?

This would be really helpful to me right now.

Thanks.; June 9, 2010 at 9:57 PM
Unknown said...: Hey Ariel,
I love your plugin, but it keeps caching so people can click many nav links and it will go to them in order after the scrolls are done.

I've tried adding all your stop, lock, and queue options to no avail.

Is there any way you could help me with this? It's been plaguing my site for a few days now and I can't figure it out.

http://pastie.org/1030726
http://www.pressedweb.com/beta; July 5, 2010 at 12:58 AM
Unknown said...: Ariel,

Great work with this plugin! However, I'm not having any lucky with marking a section active. I've read on the previous comments; to refer to onBefore/onAfter events.

I imagine it would be as simple as addClass/removeClass on the corresponding event. But that didn't work. Any thoughts?; July 13, 2010 at 9:58 PM
Sr. Astato said...: Hi Ariel. First of all, thank you very much for your plugin. It's look really great.

I just have a question about it, better, it's a problem.

In my case, some of the sections has different number of subsections.

Do you have any idea about how to solve it?? I mean, about: .section width in the style.css

Thank you so so much Ariel. You looks like a very good "software developer" ;)

Greets!; July 19, 2010 at 4:34 PM
Unknown said...: hello Ariel,

that's a good jQuery plug-in !

I try to use it with < a href="" >< /a > no problem !

But when I try it with a < button > or an < input type="button" >
it doesn't work !

Could you help me please?
Thanks
--
Antoine; August 11, 2010 at 3:09 PM
HD4you-Blog said...: Hi Ariel

on my site
http://www.gold-gold-gold.de/karriere

I have included your plugin
serialScroll & localScroll.
I must say, both went fine, very beautiful.
In the footer I have put a link to your page.
Good work must be rewarded.

Greetings Werner; August 15, 2010 at 8:19 AM
Dan said...: Any reason I am getting "this.scrollable().each is not a function" after the first scroll using localScroll?; August 23, 2010 at 5:45 AM
... said...: thanks for this great plugin :); September 1, 2010 at 11:18 PM
Unknown said...: Hi there. This works in all browsers except for Safari for me. Am I doing something wrong?; September 2, 2010 at 6:01 PM
Angelchrome said...: To all those who are having problems using this on Safari, simply upload it and it should work fine (for some reason doesn't work when viewing offline).

I'm also having problems being able to exclude certain # references. Any way to get around this?; September 5, 2010 at 2:37 PM
Richard said...: Hi Ariel,
Firstly, thanks for a great plugin. I've used in on a couple of sites now and love it.

I have recently spotted a couple of issues, which really only are applicable to Mobile Safari and very specifically the iPad.

When using localscroll for links up and down the page, they just don't work properly. Say for example, if I have a link to the top of the page, if I click it jumps to the top, but then animates back down to where I clicked the link.

I appreciate that you may not support this, but I have used this method for a single page site and basically it's not useable on the iPad and not great on the iPhone.

Any help would be appreciated.

Thanks, Richard.; September 15, 2010 at 7:17 AM
pien said...: Hi Ariel,

Thanks so much for our awesome jquery scroll thingy :)

one question, I might be an idiot but i cant figure it out.

http://leftdesign.nl/test/hora/
this is the site im using your jquery on, and my question is this.

It moves horizonally like it's suppost to.
But in the boxes for example i need it to scroll vertical. and only in those boxes.

How do i do that, i've been at it for 2 days now (i hate asking stuff) but i really can't figure it out.

It would be great if you could help me out.; September 21, 2010 at 9:47 AM
Xara said...: hi Ariel! i m really in trouble. I have this code and it doesnt work... can you check it??? thanks in advance!

#block {
position:absolute;
background-color:#abc;
left:50px;
width:800px;
height:500px;
margin:5px;
}

$("cinframe")._scrollable();
$("#right").click(function(){
$("#cinframe").scrollTo( '+=340px', { axis:'y' } );
});

$("#left").click(function(){
$("#cinframe").scrollTo( '-=340px', { axis:'y' } );
});

< div id="block">< iframe src="http://www.ipolistonkosmo.gr/theater.php?all=yes" id="cinframe" name="cinframe" frameborder="no" width="100%" height="100%" scrolling="auto" >; September 23, 2010 at 10:52 AM
Ebi Atawodi said...: Hi Ariel

Thanks alot for this fantastic plugin.

I just wanted to point something out with regards to the filter: option for anyone else who might have trouble with it. The filter: option lets you specify on option for items you would like to scroll, and every other which would normally scroll is ignored. So that say you had:

$.localScroll({
filter:'scroll)'
});

This will only scroll links with the class="scroll" are clicked.

If however you wanted to set it so that you are able to scroll everything else and exclude a set of classes (as in my case where I wanted to ignore localScroll for a set of links that would hide/show a bunch of divs with # tags). You simply set:

$.localScroll({
filter:':not(.noscroll)'
});

This will basically scroll all other applicable links but items with the class "noscroll". I hope that is clear. I've banged my head against the wall all morning with this trying to figure this out as this was not clear to me from any of the posts or comments. It seemed to me that filter: 'noscroll' would do exactly what I intended.; October 4, 2010 at 2:20 PM
Tony said...: Thanks a lot Ariel ! It's just amazing; October 6, 2010 at 11:40 AM
peter said...: Is there any way to stop the flikering that occurs when animating in firefox...i don't know if this is a preload issue or anything like that?; October 14, 2010 at 5:50 PM
peter said...: is there anyway to stop the flickering in firefox; October 14, 2010 at 5:51 PM
Domenico Serio said...: Hi use this code:

$.localScroll.defaults.axis = 'x';

// Scroll initially if there's a hash (#something) in the url
$.localScroll.hash({
hash:true,
target: '#caruselWrapper', // Could be a selector or a jQuery object too.
queue:true,
duration:2500,
reset:true
});

/**
* NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I
* also affect the >> and << links. I want every link in the page to scroll.
*/
$.localScroll({
target: '#caruselWrapper', // could be a selector or a jQuery object too.
queue:true,
duration:1000,
hash:true,
onBefore:function( e, anchor, $target ){

},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
}
});

$("#caruselWrapper").scrollTo('li:eq(0)', {speed:2500});

but when the page loads without the anchor name Initial works the slide of the first element
but if the url of the page contains an anchor name
starts doing the slide page up at Anchor name and then immediately returns to the first element with this code: ("# caruselWrapper). scrollTo ('li: eq (0)', {speed: 2500});
how to solve?; October 18, 2010 at 9:16 AM
Bryan Paul said...: This comment has been removed by the author.; October 21, 2010 at 6:38 PM
John W said...: FYI, FF and IE behave differently with the 'this.href'.

if your page link looks like this:
<a href="#pg2" ...

in FF this.href will be "http://myfulldomain.com/mypage#pg2"
in IE this.href will be "#pg2"

So the filter function in localscroll will fail to bind in IE because it fails test #3:

this.href.replace(this.hash,'') == URI

Once I changed my short urls to full urls, IE magically worked.; October 26, 2010 at 7:04 PM
Unknown said...: Hi Ariel

Thanks for the great tutorial. Could you please tell me how to have the localscroll always position in the centre of the screen. I'm working to a screen resolution of 1024x768 and the object is in the centre. But when I increase the screen size the object is not in the centre.

Thanks

Oliver Bannister; November 2, 2010 at 6:24 PM
d_func said...: Hello Ariel,

I'm totally new to this sort of coding.
I hope you can help getting started.

I want to scroll the whole window.

Example here:
http://janriggert.com/lt/

But it doesnt work. What did I wrong?
Probably something simple and stupid!
;-)

Kind regards,
Jan (from Germany); November 6, 2010 at 12:29 PM
peter said...: you need to have jquery. download from the jquery site

put it in a script tag like you have the scrollto script; November 7, 2010 at 8:05 AM
Vincent Mans said...: This comment has been removed by the author.; November 15, 2010 at 4:33 PM
Vincent Mans said...: This comment has been removed by the author.; November 16, 2010 at 8:11 AM
Unknown said...: Hey,

I tried your plugin with the iPad and unfortunately it doesn't work.. the browser first jumps to the link than then does the scrolling to the opposite side. It's strange because with Safari it just works fine.

Do you have any ideas what could be wrong?; November 30, 2010 at 11:48 AM
Unknown said...: Hi Arial,

How to implement your plugin for 2 or 3 div scroll in a page and a scroll div contain sub scroll div in a page work fine ?; December 30, 2010 at 4:58 AM
Unknown said...: This comment has been removed by the author.; January 5, 2011 at 5:34 PM
Unknown said...: Hi Ariel,

I have a page using the localScroll with a fixed menu and a fixed header (css = position:fixed;). I am scrolling the whole window and the content area gets hidden behind the top header when scrolling the window.

Because the header is fixed, I am offsetting the anchors by the height of the header in the localScroll settings. This works perfectly when clicking on the localScroll menu! Thank you! =)

The only thing I noticed is that if I am on another page within my site or try to go to a hashed url directly by typing it in the browser location bar such as...

www.example.com/mypage#myanchor

...the offset from the top is not applied. So, what happens is the content is hidden by the height of the header.

Behavior works as expected if I am clicking through my localScroll menu and use the browser back button, the offset is applied correctly. Only when I link directly to my page with the #hash does it not get applied.

My settings are as follows...

$('#myMenuID').localScroll({
hash:true,
offset:{top:-150, left:0}
});

Thanks for reading!
-Tim; January 5, 2011 at 5:37 PM
Unknown said...: Hi Ariel

I've a question is there any possibility to make both axes scroll on an iPhone or iPad?
For me your script is perfect and it works in every browser I've tested it so far except mobile devices there it only works for the Y axes not for X.

do I've done anything false or is this a commen problem:

http://www.antibla.org/wip/ - if you go in this site you'll have a demo.; January 9, 2011 at 3:04 PM
Unknown said...: Hey Ariel, these plugins are just what I was looking for to add the desired effect on my clients site. I have been trying to add a mask to the container so only one box shows at any given time with no horizontal scrolling bar. I used overflow:hidden in the css for the mask div which worked visually for hiding the other boxes but now the scrolling animation has stopped working. I'm sure there is something in the JS I can change to get this to work but I have no clue. Could you please point me in the right direction? Thanks in advance for your help.; January 27, 2011 at 10:27 PM
Unknown said...: Is it possible to make the menu items scroll horizontal and the submenu items scrolling vertically? Exactly the opposite of the demo...

Great plugin btw; February 10, 2011 at 10:45 AM
Oytun Tez said...: I had a problem with my localScroll. It was aligned very well when clicked on one of the trigger links, but it was aligned a little bit to right when the page loaded with no hash or no click was done on the menu.

So, here is how i solved the issue:
(for those Googlers, keywords: align problem margin right left preload hash default local element to scroll window.load onload document.load $(document) $.() javascript hash example retrieve get and set hash #)

script type="text/javascript"
if(location.hash == "" || location.hash == "#" || location.hash == " ") {
location.hash = "#myLI_to_scroll_when_loaded";
}
/script

*** add "<" and ">" before the script tags; February 16, 2011 at 6:33 PM
magenta per chi non si accontenta said...: This comment has been removed by the author.; March 1, 2011 at 4:54 PM
Unknown said...: I'm using your scroll plugin, and it's real nice.

Can you tell me how I would scroll to an anchor in a parent window, when a link is click in an iframe on the page, all in the same domain?

Thanks!; March 24, 2011 at 5:09 PM
Unknown said...: Figured out solution for my previous questions about scrolling in parent to anchor from iframe. Answer is here:

$('.someselector').click(function() {
window.parent.$('html,body').animate({ scrollTop: window.parent.$("#someselector").offset().top }, 'slow'); return false;
}); March 25, 2011 at 10:28 AM
Unknown said...: Hi Ariel,

first of all, thanks for your great work!

Today, I have found a little bug in jQuery.LocalScroll. After the scrolling was done, Firefox (only FF!) automatically made a redirect and gave me a 404 page.

So I checked what page FF is looking for and came up with a request to "#myhash". That's all. No URI, no domain, no path, no file. FF just requested the hash "#myhash".

I checked your code and found the line "location = link.hash". This triggers FF to reload a location that only contains the hash "#myhash".

I have changed this line to "location = URI + link.hash" and now it works great. Even in IE and other browsers. So you might consider to adopt this change.

Best regards
Thomas; April 12, 2011 at 9:42 AM
Unknown said...: Hi Ariel, nice plugin!!!
But.. I cant get it working.
My website url is http://bit.ly/mNoDKS. thanks!; May 6, 2011 at 1:02 AM
Andreas said...: Hi Ariel,

thank you very much for thw, I am building a portfolio site and your script just works perfect!

I have solved the slow-scrolling-problem by reading the comments, but now I have one question left: how do I get the background-color-change done? There is one line commented out in the script, I filled out the hex colors and the time, but I still get an error.. Could you please just post me an example of that line that will work so I could use that function of your script, too? Would be great!

Thanks a lot for your work and caring!
Andi; June 5, 2011 at 9:04 PM
Sean Dooley said...: Hi Ariel

I can't get the page to scroll using this code http://pastebin.com/6X7XmZPX

Both the onBefore and onAfter events are being triggered, but no scrolling is occurring.

Any ideas?; June 7, 2011 at 6:56 AM
markilfin said...: Hello, Ariel,
thanks for your work, really nice plug-in.
Just one question...is there any way to load specific slider when page is fully loaded? For example, I have 5 slides on the page and I want the 3-th slider to load first. How can I do that?; June 20, 2011 at 1:30 PM
Cho said...: Hi
Thanks for the plugin.

'Stop' and 'Lock' seems to make no difference though. The clicks keep queuing up. What could be wrong?

$(document).ready(function(){
$('#ch-menu').localScroll({
stop: true,
duration: 2000
});
});; July 15, 2011 at 11:36 AM
Anonymous said...: Awesome plugin, thanks so much for developing this!; August 20, 2011 at 4:02 AM
kyllle said...: Hi I was wondering how I could kind of do the reverse of the localscroll demo, what i would like to do is have the main links scroll horizontally and the sublinks scroll vertically, how could this be done? Would I have to float the sections to the left and remove the float from the list items and then set the axis differently from the defualt xy?

Cheers
K; September 12, 2011 at 2:27 PM
Unknown said...: apologies if this is a novice question, but how can I get localscroll to fire automatically to auto-rotate my images? I've tried a number of options to no avail. Thanks in advance.; September 14, 2011 at 3:38 AM
Sven said...: Hi Ariel,

thanks for your plugins.

In the moment I have an weird issue in Opera. If I have scrollTo/localScroll and FlexSlider(http://flex.madebymufffin.com/)on one page, Opera shifts the content to the left so everything sticks on the left border of the content box.
It's only in Opera and only if I use both plugins.
Here's a demo http://daddy-cool-party.de/testlauf .
I've already talked with Tyler Smith who developed FlexSlider, but he has no clue why this happens.
Maybe you can see the problem.
Thanks in advance.

Sven; September 21, 2011 at 12:32 PM
claude said...: Hi,Ariel, my question should be stupid for you but i'm pretty weak with javascript.

I realy like your demo http://demos.flesler.com/jquery/localScroll/ajax/,but i get no clue on how you call let's say the remote page for the content. I look the source code of the demo page and i was not able to find where is the folder and the page to call.

Claude; September 26, 2011 at 12:53 AM
Anonymous said...: Hi! Great thanks for plugin

If to get anchor it's need to scroll window and then container - how can i do that?; October 13, 2011 at 4:34 PM
Alex said...: Hi Flesler,

I only want to scroll from right to left.. As of now its y, x, x movement. I only need X movement on each link.

Can you help me with this.. ???; November 5, 2011 at 4:51 PM
Thomas und Susi said...: Hi Ariel, thanks for this amazing tool! I am working with a background image which size I am adjusting to the monitor resolution. Therefore I use the following css...

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#background {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
background-image: url(/images/background.jpg);
}

#backgroundframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
overflow: auto;
}

I don't know why, but the smooth scroll doesn't work with my settings. Does anyone know how to solve this problem? Thank you so much! Thomas; November 15, 2011 at 7:13 PM
Thomas said...: Hi,

Can you help me get local scroll working? Working on a sudent web-site.

http://thefuturaisnow.com/scrolling_test.html

Thank you!

Thomas; December 3, 2011 at 7:05 PM
Jan said...: Hallo, Unfortunately it doesn’t work.

My code seems like this

$(document).ready(function(){
$('#navigation').localScroll({
target:'#Text'
});
});

And I have one div called id="navigation" and a second called id="Text" - in this div are the links that I call through a link. What may I do wrong?

More under: http://www.internistenpraxis-osterstrasse.de/leistungen.html.

I hope you can help me. With best regards, Jan; December 6, 2011 at 12:17 PM
matt said...: Hi there,
first of all, thanks a lot for both scrollto and localscroll, great work!

I would like to change to change the sliding duration in a localscroll slide dynamically.

I know there is a default setting "duration", but is it possoble to change the duration depending on the anchor-linkclicked, meybe onbefore the localscroll?

thanks for your help.
matt; January 17, 2012 at 2:47 PM
Anonymous said...: Hi Ariel,

Your plugins saved me on a current project - thanks for developing them. I'm having a curious issue:

Like another recent commenter, I have a fixed header and horizontal menu and the content scrolls up underneath it. There can also be a few other elements which show up between that horizontal menu with my links and the content area with my anchors. I spent a lot of time doing the math to figure out the offset for each case, but there's one thing that's still not working: on the page, if the anchors are too close together, then the scrolling isn't accurate.

What I mean by that is that we want to have the anchor come right up under the menu (or other element if it's there), but if the space from the chosen anchor to the next one is small, then the page scrolls up too far.

This doesn't make much sense to me, since it seems like we're getting an array of the top posisions of the anchors and scrolling to each one, minus the offset, so it doesn't seem like it should make any difference how far apart each of the anchors are.

The content being linked to varies widely, so I can't set a min-height to correct this. Any insight would be much appreciated!; January 31, 2012 at 6:08 PM
Anonymous said...: Actually, I mis-stated my situation in the last comment (as well as misspelling "position") - the scroll is actually working correctly. I'm simultaneously trying to place an arrow pointer under the link that was just clicked and that logic is based on where the anchor is on the page and sometimes, the pointer does not match...so I'm not sure if this is a question for you or not.

Basically, it still comes down to a problem when anchors are too close together - the script which detects where the anchor is kind of breaks and then in turn, my arrow positioning breaks (doesn't get assigned to the link which was just clicked).

If that makes any sense at all, and you (or anyone reading) has any ideas, that'd be great.; January 31, 2012 at 7:37 PM
Ian Jones said...: This is brilliant. Exactly what I was after. Thank you!

My only suggestion would be to allow the target to be a standard anchor rather than element id: <a name="test"/>. This would allow this plugin to follow more standard behaviour, and would degrade gracefully on browsers with JavaScript turned off.
Just a thought...

Thanks,
Ian; February 7, 2012 at 5:09 PM
Ariel Flesler said...: It does work with name as well. If you check the source, there's a document.getElementsByName(); February 8, 2012 at 11:44 PM
Roberto Osorio Nones said...: Hi Ariel, first of all thanks for the great work.

I've been trying to implement your plug-in, but I'm not to much of an expert.

Main issue:not working.

No console errors.

Can you take a look and see if there's something not correctly implemented.

I'm using tags and tags, should this be an issue if I'm pointing to any of these with id's?
I guess not, but..

Thanks in advance for the help.

code's here.

http://ron04.com/beta/; February 13, 2012 at 10:56 PM
becky imbecile said...: Hi Ariel,
Just wanted to give you a big THANKS for posting such a helpful chunk of code! I have been scratching my head for weeks trying to solve a problem involving smooth scrolling with an added jquery opacity change plugin and your script did the trick!

I literally ran around my house screaming after I figured it out. Oh, the joys of coding!

Thanks again! Keep up the awesome work!; February 28, 2012 at 3:52 PM
seanjacob said...: This comment has been removed by the author.; April 12, 2012 at 11:28 AM
seanjacob said...: Ok a working version the Ajax way -

http://jsfiddle.net/seanjacob/SSN5N/

Remember to download and use your own js files.; April 12, 2012 at 12:10 PM
seanjacob said...: So I found out what the problem is with IE and the Ajax version is that you can't target the anchor by name it has to be by ID!

Wasted a whole day figuring this out :( hope this helps someone and gets updated.; April 12, 2012 at 12:41 PM
Michael Shaw said...: Hi Ariel, Great plugin,

I am having a difficult time embedding a localScroll within another. My attempted solution was to create a second init.js (initA.ja), and change the target: to '.about'. The first problem is that when I use the about navigation, the div class .about moves around a bit, x then y. When using the about navigation after that, there is sometimes additional y x scrolling. Lastly, since .about is within #content, using the main navigation causes .about to scroll.
Any ideas?; May 2, 2012 at 12:52 PM
Nicolas said...: Hi, thank you for this.

I have a question i don't find a solution.

localscroll is working well but with another plugin like a TAB one it's still moving the tab vertically in ie7.

I would like to exclude the tabs from localscroll.

In the comments i found the comments for Jampov but his demo is offline and don't find a way to use filter or exclude the tab section,...

Can you help me please ?

Do i made a mistake ?

my code :

$(document).ready(
function () {
$.localScroll({
duration :2000,
axis: 'y',
filter: '.domtab'
});
}
);

HTML :

div class="domtab"
ul class="domtabs"
li a href="#t3" exemple1 /a /li
li a href="#t3" exemple2 /a /li
li a href="#t3" exemple3 /a /li
/ul

div
a name="t1" id="t1" /a
/div

div
a name="t2" id="t2 /a
/div
/div; June 20, 2012 at 7:02 AM
darek said...: Hi,
Ariel, can you tell me how to change "offset" from within the onBefore?
I am trying but no success so far:/; August 8, 2012 at 10:36 PM
jfisch said...: Getting an error on the Source download for localScroll. This is a 404 - http://flesler-plugins.googlecode.com/files/jquery.localScroll-1.2.7.js; September 18, 2012 at 7:21 PM
Ariel Flesler said...: Thank you, just fixed the url; September 18, 2012 at 9:15 PM
Unknown said...: Great Examples! Thank you.

Just one note: to my mind the localScroll JS does not always work as expected. For example: scrolling from 1 to 2b should first scroll to 2 and then to 2b. Otherwise it's kind of disorientating.

Greetings from Germany, Klaus; September 30, 2012 at 6:06 AM

«Oldest ‹Older 1 – 200 of 208 Newer› Newest»

Post a Comment To get help prepare a demo.

Ariel Flesler

Wednesday, March 11, 2009

jQuery.LocalScroll 1.2.7 released

Notice

Enhancements

Changes

Features

Links

208 comments:

By Category

Donate to my blog

Recent

Links

Some sites using these scripts

Followers

Ariel Flesler

Wednesday, March 11, 2009

jQuery.LocalScroll 1.2.7 released

Notice

Enhancements

Changes

Features

Links

208 comments:

By Category

General

jQuery Plugins

Scripts

Donate to my blog

Recent

Links

Some sites using these scripts

Followers