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!

Links

210 comments:

«Oldest   ‹Older   1 – 200 of 210   Newer›   Newest»
Maniqui 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.

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

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
});

debra 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!

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?

Ariel Flesler said...

Nope, got a demo ?

Ariel Flesler said...

@Debra
You have access to all the related elements within the onBefore callback.

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.

Rafael 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

John 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

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.

Rafael 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

Rafael 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

Maniquí 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)

Ariel Flesler said...

Not like that, but you do:

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

Rafael 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.

Anonymous said...

hi, is it possible to add a class "active" to the clicked/active link?

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.

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

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?

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.

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.

Ariel Flesler said...

@Julian
Put this inside the onBefore:

$('#content').queue(function(){
$.scrollTo( 0, 400, function(){
$('#content').dequeue();
});
});

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).

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?

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 :)

Richy 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

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.

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.

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.

Anonymous said...

Yes, you understand correctly. What variable is this stored in though?

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.

Specialk 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.

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.

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!

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.

Ariel Flesler said...

Got a test case online that fails ?

Brian said...

http://dreamstarstudios.net/wp <--- This is in progress, but you can click "contact" to see. Login with guest / 777

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

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.

Jay said...

Thanks a million! I am currently using localscroll on 2 projects and I love it. Thanks.

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...

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.

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.

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?

Brooke said...

Never mind, I no longer need localScroll on the page. Thanks!

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.

aiwazz said...

ya that was moi, cthulhumythos23, sorry it couldnt be more, i'm outta work at the moment. ;)

jampov 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.

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.

jampov 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.

Ariel Flesler said...

Got a demo online ?

jampov 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.

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();

jampov 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.)

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?

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.

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!!!

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.

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)

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.

Phillip 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.

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.

Phillip said...

I apologize for my attitude yesterday.

Ariel Flesler said...

No problem ;)

xoail 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!

xoail 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.

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.

xoail 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 :(

piers 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

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 :)

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.

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

Anonymous said...

Ariel im replying to above: maybe something like multiple hashes?

(i am the writer from above post)

piers 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...

piers said...

Okay... that's weird - I just uploaded it and it works from the server in Safari, but not from local files...

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.

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

Ariel Flesler said...

Hi, it works well for me on FF.

Anonymous said...

@Ariel:

Got the 1 nav 2 areas working with scrollto. Thanks for the advice!

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

Ariel Flesler said...

@Florian
No, the plugin only works with a and area elements.
You can use "just" scrollTo without localScroll instead.

fjckls said...

Great Plugin, many Thanks!!!
http://www.context.fjofjo.net

Ariel Flesler said...

Thanks :)

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!

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.

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

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.

Anonymous said...

Yeah, the problem was in easing equation(elasout not working but easeOutElastic works fine).

Tnx

jamus said...

Can you prevent the browser jumping down to content that is below the window level? E.g. only scroll left right?

Ariel Flesler said...

Set 'axis' to 'x'.

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.

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.

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 :)

Ignacio said...

Hi Ariel, if you meant the sliding panel was part of the problem, you were right. Thanks I solved it.

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.

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.

anders said...

Hi Ariel,
Is it possible to make buttons that scroll a specific amount of pixels instead of to anchorpoint-ids?

Ariel Flesler said...

You can, by using just scrollTo and relative animations.

Johan 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

Gabriel 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...

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.

Dean 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.

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.

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

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

Karega McCoy said...

Is there any way to navigate to an element based on element index instead of the id.

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

leon 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

leon said...
This comment has been removed by the author.
stephen 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.

Satya said...

Nice post, keepup with the good work, i have subscried to your blog

Celebrities in Avatar getup http://gisnap.com/celebrity/celebrities-in-avatar-getup/

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.

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?

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

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?

macgyver47 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

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?

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

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

Marty said...

PS. I have the vertical page scrolling working, but I can't get the horizontal scrolling within a div to work.

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.

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.

Web Design said...

Really helpful JQuery thing dude.
it saved me lots of time.
Thanks.

terry.chisholm 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?

Gareth 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

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.

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

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.

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!!

Piero 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

Piero 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...

Ryan 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?

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.

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

drukelly 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?

omarcio 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!

Antoine 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

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

Dan said...

Any reason I am getting "this.scrollable().each is not a function" after the first scroll using localScroll?

Ahmet Sali said...

thanks for this great plugin :)

Jon said...

Hi there. This works in all browsers except for Safari for me. Am I doing something wrong?

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?

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.

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.

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" >

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.

Tony said...

Thanks a lot Ariel ! It's just amazing

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?

peter said...

is there anyway to stop the flickering in firefox

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?

Bryan Paul said...
This comment has been removed by the author.
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.

submit 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

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)

peter said...

you need to have jquery. download from the jquery site

put it in a script tag like you have the scrollto script

Vincent Mans said...
This comment has been removed by the author.
Vincent Mans said...
This comment has been removed by the author.
Christian 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?

Ne7ven 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 ?

Tim said...
This comment has been removed by the author.
Tim 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

Martin 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.

Micheal 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.

Verweij 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

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

magenta per chi non si accontenta said...
This comment has been removed by the author.
acer152 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!

techguy152 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;
})

mail 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

Paulius said...

Hi Ariel, nice plugin!!!
But.. I cant get it working.
My website url is http://bit.ly/mNoDKS. thanks!

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

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?

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?

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
});
});

Tim Lukian said...

Awesome plugin, thanks so much for developing this!

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

sparetimedev 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.

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

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

bw_left said...

Hi! Great thanks for plugin

If to get anchor it's need to scroll window and then container - how can i do that?

Ankur 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.. ???

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

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

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

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

Allison 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!

Allison 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.

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

Ariel Flesler said...

It does work with name as well. If you check the source, there's a document.getElementsByName()

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/

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!

seanjacob said...
This comment has been removed by the author.
seanjacob said...

Ok a working version the Ajax way -

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

Remember to download and use your own js files.

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.

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?

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

darek said...

Hi,
Ariel, can you tell me how to change "offset" from within the onBefore?
I am trying but no success so far:/

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

Ariel Flesler said...

Thank you, just fixed the url

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