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.
Links
- Main post
- Project Page
- Regular Demo
- AJAX Demo
- jQuery.ScrollTo
- jQuery.ScrollTo's demo (must see)
- Changelog
Downloads
- jQuery.LocalScroll 1.2.7 Zip(all files and docs)
- jQuery.LocalScroll 1.2.7 Source(to learn or test)
- jQuery.LocalScroll 1.2.7 Minified(recommended)
- jQuery.ScrollTo 1.4.2 Source(to learn or test)
- jQuery.ScrollTo 1.4.2 Minified(recommended)
111 comments:
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.
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
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
});
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!
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?
Nope, got a demo ?
@Debra
You have access to all the related elements within the onBefore callback.
@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.
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
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
@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.
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
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
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)
Not like that, but you do:
$('#nav, #nav-2').each(function(){
$(this).localScroll({
target:this,
duration:250,
axis:'x'
});
});
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.
hi, is it possible to add a class "active" to the clicked/active link?
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.
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
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?
@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.
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.
@Julian
Put this inside the onBefore:
$('#content').queue(function(){
$.scrollTo( 0, 400, function(){
$('#content').dequeue();
});
});
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).
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?
@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 :)
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
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.
Hi Ariel
When, for example, has been clicked on, can I retrieve the information "#top" from within the $.localScroll().
If so, how?
Many thanks.
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.
Yes, you understand correctly. What variable is this stored in though?
Sorry, my explanation was probably not brilliant. I was looking for 'anchor.id' in the onAfter function.
Thanks very much for a great plugin.
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.
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.
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!
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.
Got a test case online that fails ?
http://dreamstarstudios.net/wp <--- This is in progress, but you can click "contact" to see. Login with guest / 777
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
@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.
Thanks a million! I am currently using localscroll on 2 projects and I love it. Thanks.
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...
@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.
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.
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?
Never mind, I no longer need localScroll on the page. Thanks!
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.
ya that was moi, cthulhumythos23, sorry it couldnt be more, i'm outta work at the moment. ;)
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.
@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.
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.
Got a demo online ?
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.
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();
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.)
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?
@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.
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!!!
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.
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)
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.
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.
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.
I apologize for my attitude yesterday.
No problem ;)
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!
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.
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.
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 :(
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
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 :)
@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.
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
Ariel im replying to above: maybe something like multiple hashes?
(i am the writer from above post)
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...
Okay... that's weird - I just uploaded it and it works from the server in Safari, but not from local files...
@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.
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
Hi, it works well for me on FF.
@Ariel:
Got the 1 nav 2 areas working with scrollto. Thanks for the advice!
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
@Florian
No, the plugin only works with a and area elements.
You can use "just" scrollTo without localScroll instead.
Great Plugin, many Thanks!!!
http://www.context.fjofjo.net
Thanks :)
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!
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.
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
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.
Yeah, the problem was in easing equation(elasout not working but easeOutElastic works fine).
Tnx
Can you prevent the browser jumping down to content that is below the window level? E.g. only scroll left right?
Set 'axis' to 'x'.
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.
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.
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 :)
Hi Ariel, if you meant the sliding panel was part of the problem, you were right. Thanks I solved it.
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.
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.
Hi Ariel,
Is it possible to make buttons that scroll a specific amount of pixels instead of to anchorpoint-ids?
You can, by using just scrollTo and relative animations.
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
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...
@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.
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.
@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.
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
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
Is there any way to navigate to an element based on element index instead of the id.
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
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
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.
Post a Comment To get help prepare a demo.