Friday, February 8, 2008

A new major update of jQuery.LocalScroll has seen the light.
Two minor releases were added after it and is now at 1.2.2. I'll detail them all together:

Optimizations

Replaced a $('[name='+name+']') for a document.getElementsByName(name) to critically improve perfomance.

Small improvements to make the code shorter.

Fixes

The last argument received by onBefore when scrolling the window, is no more $(window) but the real element being scrolled.

Changes

Renamed the option 'persistent' to 'lazy', the latter seemed more adequate. Using 'persistent' will still work (backwards compatibilty)

Features

Added the option 'stop', if true (default), each event will stop any previous animations of the target.

Added the option 'lock', if true, the plugin will ignore events if already animating.

Added $.localScroll.hash( settings ); which will scroll to the given element if the URL contains a valid hash.

Removed the option 'cancel' that wasn't working well, and added the option 'hash'. It does what 'cancel' was meant to do, but in a different way.
After a scroll, the hash( #some_id ) of the link is added to the URL.Note:This setting is not compatible with options like offset and margin, as the browser will natively scroll in the end.
If you use the option 'target'(to scroll an overflowed element) and the window has overflow, setting the hash will scroll the window as well. So my advice is:only use 'hash' when scrolling the window.

jQuery.ScrollTo is now at 1.3.2, it has a new option called 'over', check its demo to see it in action.jQuery.LocalScroll 1.2.x requires jQuery.ScrollTo 1.3.1 or higher.

175
comments:

sorry to bother u againi tested my site in the school mac labs and they were using safari 2 and it didnt work but your demos worked in safari 2. In Safari 2, the scrolls dont work but if you scroll down manually and click on a link, it scrolls to the top.weird. if u can figure out i'd really appreciate it. if u can't, its cool too, you've helped a bunch already.

** Posting this here too in case you're not checking the first post. Sorry for the duplicate...

Thanks for the plugin. I have a question/issue though. Is it possible to NOT have the entire window scroll when you're trying to only have one section of a page scroll. I'm using the #hash method, and in addition to scrolling the small area for my content, the PAGE will scroll to that hash as well, which is an unwanted result. Let me know if I'm not explaining it well enough.

thanks for the quick reply. the problem happens in both ff and ie, and your demo does the same thing. the reason you don't notice it on your demo is because the content is shorter than the browser window. if you can, try your demo at 800x600. you will notice it then. sorry for no punctuation, i'm on my cellphone typing this.

I'm trying to use LocalScroll and can't seem to get it to work. This is my first use of jQuery, but I have experience with javascript. Could you take a look at my sample page and let me know what I'm doing wrong? I'd like to scroll the entire page to the local targets. I must be missing something simple...

Any nav link on the right side (listen, tour, watch, buy, etc..), in FF and IE, scrolls to an element on the left beautifully.. but in Safari 3, nothing happens when you click the link.

not sure why this is... but if i scroll down the page manually in safari, then press a link on the right, it will localscroll back to the top of the page for some reason.. no matter what the anchor of the link is set to??

Hi - Fantastic script - thanks,.. though I am having one slight problem. How can I get the script to work with both mouseover AND click events? right now the over event triggers the scrolling, but if you click, the page jumps to the anchor AND scrolls...

I just wanted to say to those users having trouble with Safari - I spent much time pulling my hair out over this, turns out, at least for me, my test page works perfectly online but not locally (anchors work but no scroll). Have no clue as to why this should be but hope this is helpful to some.

I assume you are also calling this plugin as well (not just that onChange).The plugin doesn't work on selects, that's not a common behavior and it's truly odd to set the value of the options like that.It shouldn't be to complicated but no, LocalScroll won't do for you.

Sorry, I'm new to jquery.Can you please tell me what's the syntax for an anchor to scroll to an absolute pixel position. And where do I write it in my html-file? I don't know where to implement my code...some in the head tag, but where do I write the absolute position etc...

So far I've:

-script type="text/javascript"- jQuery(function( $ ){

$.localScroll(); }); -/script-

in my -head- tag and I do the scrolling with a simple link: -a href="#anchor1"- which scrolls to a div with id="anchor1"

Is it possible to give this div an absolute pixel position. Simple: "Please scroll the div with the id="anchor1" to the position 0x,200y (from top left).However, the scrollbar should scroll too...the window.

Thank you for helping all the people here and I hpe you understand my question, I'm not a native english speaker.

Hi, I really really like what jquery and your plugin can do. I'm unfortunately no programmer, but I'm making this site for some friends of mine: http://www.qualitytime.no/index_new.php - When you click the link "fotos" it should scroll to an anchor i've made that is called "fotosanchor" - but i can't make it work. Is there something essential i'm missing here?

Blimey, what a great tool. I'm totally out of my depth here (no js exp), but I've managed to implement what i persume to be Local Scroll into my one and only website (this took an age and i nearly gave up), it works just as imagined in FF3 and Netscape, however in IE it scrolls vertically instead of horizontally and in Opera it seems to move down the page one line on every scroll.

Would you kindly check out the link:

www.eden-flowers.co.uk/eden.html

I know you must get the same questions over and over again and you've probably posted a solution to the problem somewhere but i was unable to find anything, so would greatly appreciate a novices answer (ie spell it out for me!!!!)

This works fine in Firefox/Safari but doesn't scroll in IE 6 or 7. This is probably because I'm changing the href of the links in #nav from /pagename to #pagename. If I change the href of the links to #pagename in the html it works fine.

Thanks for the speedy response. Lazy is set to true in my example. It seems that any time I change attr("href"), localScroll doesn't work in IE. I'll try appending a new link to the #nav to see if that one works.

I'm using Local Scroll. Everything's working great (great plugin!) except one thing.

The user is going to enter an email address, and depending on the email address they enter, I need to scroll to a separate div. For example, if they enter an email address from AOL, they would go to step4a, but if they enter a gmail address, they would go to step 4b. How can I make this work? When I try manipulating the href attribute through javascript, the scrolling stops working.

Hey Ariel,Just wanted to follow up my previous comments with a big thanks. We just launched http://www.cyberwoven.com/ on Friday and it wouldn't have been possible without scrollTo, localScroll, & serialScroll. Cheers!

Do I need to include both the scrollTo and the localScroll Code in my document? Or do I need to link the plugin in my header? (Not sure if it makes a difference, but up to now the plugin hasn't had an effect, so I figured I might be doing something wrong.)

I am trying to scroll a set of images horizontally. (The body scrolls, but parts of the page use position:fixed.)

Hi Ariel,First of all: Splendid plugins! I love that AJAX DEMO, but can't figure out how to tell the plugin to use the doc on the server to scroll. Can you help me on that. Please, take me by the hand, as I'm just a designer and don't know much about coding.Thank you for your time and willingness!Felix.

I like to have a scroll exactly like that AJAX DEMO. When I saw the source code, I couldn't find any text, so I presume it is loaded dynamically from an external document on the server. Maybe you can give an example as I don't know much of Javascript. Thanks for your help!Felix.

Hi Ariel,I love your work. I am new to javascript (but not to programming), I have a weird problem with the jquery.localscroll plugin, maybe you can help me.This page http://thegraphicdesignschool.com/pages/pre.1.0.html does the desired effect in ALL the browsers I know (Firefox PC/Mac, IE, Camino, Safari PC) but NOT on Safari Mac. I hit my head against the wall!Would you have a clue? Or at least could you indicate me how to debug this?Many thanks in advance. JM

Hi Ariel,A little precision to my question, the effect does work on Safari Mac version 3.1.2, and NOT on Safari Mac 3.2!I also checked other sites that use the same effect with pretty much the same code (like this one http://www.cahababeachofficepark.com/home/) and it works on theirs... That lives me more puzzled.Many thanks, again.

Thanks you for your kind explanation. Though sometimes very short (!), your answers are helpfull and you're always answering. It makes your great plugins more understandable and its usage more divers! Felix.

For reasons that are beyond me, when I used "a.mover" my forward navigation on my scroller breaks, but my backward navigation does not.

I am also not achieving the desired effect.

I'm using the coda-slider plugin from jqueryfordesigners, which bundles your localscroll plugin. Because I am also using the farbtastic color picker on one of my "tabs" and because that plugin does not play nice if there are any other tabs before it, I've assigned a hover function to the color picker which causes all the previous tabs to be set to "display:none".

This works a treat, except that after hiding all the previous tabs I need to move back to the tab that has the color picker on it.

This too, works a treat. The only problem is that it "slides" back to the color picker tab, instead of jumping to it.

In short, it would be better if there was no slide effect for this link, and the page appeared as though it never left.

I am wondering if it would be possible to post sample code on how to display Dynamic content, in other words, the scrolled content is loaded from a local URL. I am not sure how to do this, everywhere I look the scrolled content is contained within the same page. I would like to be able to scroll in content from a different page.Many thanks, marco

Oh, sorry it was not clear. Here's what I mean: say index.html is the page that will display the scrolling items. as in your AJAX example page. The question is how do I load content from different pages e.g. content1.html, content2.html, etc., instead of having the scrolled content within the index.html page itself. Is this possible? If it is, it must be so simple that I fail to see it.

Yes, ok, the demo does load Ajax content from other pages... but how does it do it? It is not apparent from the online examples, nor by viewing the page source. That is what I was hoping to see in an example. The downloads do not seem to include the examples. marco

I cant seem to find your "init" code anywere? I am very much a jquery beginner and have looked over your code repeatedly and you always have something left out. What I have is on the left hand side of the page a list of dynamicaly created links "href" that I need on click to the scroll the content of the page to divs with the correct ids.

Hi Ariel,i'm not very skilled about jquery world...your work looks great and very useful!

Just a question!How can I "highlight" the "li" section elements links on the left column (e.g. "Section 1-b", "Section 2-b"...) when click these links or when click on the "<<" or ">>" navigation elements of the scrolled divs (just to evidence which link is active in this moment) ?

I'm loving the plug in, but i was just wondering one thing. When the browser window is smaller and I click on a link, it creates extra space at the bottom of the window and moves the visitor down the page. I noticed this also happens on the demo page. I tried toying around with the css and a bit with the init.js, but nothing. Just wondering how I would prevent this from happening.

im currently using local scroll just to scroll the entire page, nothing fancy but it works well and is better than the browser default. but now id like to add that little "bouncing" effect you have in your demo located at http://demos.flesler.com/jquery/scrollTo/ in other jquery plugins the effect is called "elastic" i believe. how exactly can i add this to what i have? i looked in your init.js file and it looks like the effect is coming from there, but i couldnt get it to work on my own and the localscroll blog post doesnt go into alot of detail about adding effects. is this already built in and i'm just not activating it or is there something additional i should be doing? thanks

this is the only code im using on my page in addition to calling scrollto & localscroll:

hi there! fantastic plugin!! i am currently trying to use it in combination with a custom horiztonal scrollbar and am having trouble getting things to work at all ... i'm wondering if they are not compatible with eachother or if i might have another option.

Any help is greatly appreciated!! the link to view is http://www.thomascornelius.com/profileInfo -- the vertical list of profile links in the sidebar on the left are intended to scroll the content.

the site is built on the Squarespace platform so i am working with some pre-set html structures.

Hi Ariel, thanks for this GREAT script. My LocalScroll works great in firefox and opera. but not in IE.My pages do slide but after sliding the page always go to the last page. do you have any idea why?

You wrote in an older post about localScroll, that the plugin starts when the DOM is ready. And that's working fine, however I'm creating the menu anchors dynamically on user actions, but because they're not on the page when the DOM is ready, they're not getting indexed by the localScroll plugin. When the user now clicks on one of the anchors, they still see the page, but without the smooth effect of localScroll. Is there a possibility to re-initialize localScroll after a new anchor is added to the page.(I'm using jQuery 1.3 with Live-Events)Thanks for your help

It works perfectly. But I'm wondering if how to add the "selected" class to the first nav anchor on the page when the page loads (so that the currently showing section--the first section is highlighted in the navigation). And, of course, that it's removed once another link is clicked.

Can you give an example of how to use the filter setting? I want localscroll to work for all links on the page except for links within one specific ID. What would the filter look like for that? Please help ASAP!

quick question, and forgive me if I missed it anywhere on this post. How compatible is this scroll animation, or local scroll effect with browsers? Will it work in all browsers? FF, IE, Safari, Opera, etc?

Second, sorry to bug you with this--I'm a JQuery novice and as such my problem is probably really obvious. But I've been ramming my head against this problem for hours and I just can't figure it out.

As far as I can tell, I've followed your implementation instructions correctly--however, NOTHING that I do seems to be able to make the page animate when it slides. I have a horizontal layout and I want to use your script to slide the screen horizontally--instead, it just jumps as if its a normal anchor.

I am trying to play around with your demo for LocalScroll. However i removed the sub-links (section-1b, section-1c..etc) Everything works in IE but in FF, Sections 2 and 3 do not scroll. Sections 1 and 4 scroll fine, even after i scroll to Section 4, then try to go to Section 2, it goes to Section 1.

Thanks for the code. I followed the demo code and one worked perfectly until i created another scroll on the same page. I needed two scrolls on the same page. I defined target: '#content1' for one and target: '#content2' for another. I duplicated everything but changed IDs, but later i realize $.localScroll({..}) on the same page will probably conflict, not sure. When i click on arrow on second scroller, it scrolls on both scroller even if the IDs are different. Hope to get some help with this.

I'm trying to figure out why the site jumps to the top of the slider when clicking on the slider navigation...it's the hash mark (#), that much I can figure out, but how to fix it?link http://www.shop.synergystars.comI'd appreciate any advice.Thanks,Peter

@DamodarInstead of $.localScroll(), you can use $(...).localScroll(). That allows you to define link containers and only those inside them will scroll to THAT target, also, you can use the option 'filter' to choose specific links.

@PeterIt works well for me, except for "Today's special" because of the "'".

I'd like to include all links into LocalScroll, except for one, with a certain ID. Is it possible to exclude this certain ID?It is impossible for me to apply LocalScroll to all other links by class or id...

What a great plugin....my hat is off to you Ariel. :) I've been digging around trying to find a way to also add a custom scrollbar to integrate with LocalScroll. I'm trying to build a custom "glossary" with an "ABC" navigation at the top where clicking on a letter will scroll down to the appropriate content....AND have a custom scrollbar on the right. Here's a link to a screenshot....

http://yfrog.com/0epicture1grep

Anyone have any ideas for me? Could something like this be integrated into LocalScroll?

Thanks for the message...its seems like it might be a bit of a ball of yarn. If this were a requirement to a project you were working on, what would be your next step. Maybe embed that text in Flash? I'm in a bit of a pickle. Any additional advice or hints would be greatly appreciated.

Local Scroll not working in Safari (>4) on Mac with LOCAL files. This bug drove me nuts for days! For some reason the local scroll does not work on a local html files, which is kind of funny ;)

I thought it was something to do with my code and spent more than 10 hours trying to debug it testing different scenarios. It worked with a hash when I refreshed the page, but when clicking on an anchor link it did not scroll properly. So if someone else has a problem with making it work in Safari just upload it to the web and it should work. I can only assume it's something to do with the URL or the way Safari handles local anchor tags?

Hi Ariel!Thank you for all your jQuery Scroll plugins!I was able to implement latest releases of jQuery.LocalScroll and jQuery.scrollTo for a site that has full screen window with hidden overflow.I notice your SerialScroll plugins has features like 'Jump' option (like in demo) and 'keystroke' for arrow keys but not in LocalScroll

I was wondering if there are similar features listed in LocalScroll as well?

HiserialScroll doesn't have a setting called 'keystroke' but I get what you mean.The thing is, there's no logical order when you're using localScroll.

There're just a bunch of links spread through the page. Still, you could do something like that. Grab all the links into a jQuery object and trigger the click event on the one you want to be scrolled each time.

Yeah, I stupidly didn't notice the serialScroll until I was half way through writing my own apparently terrible navigation code. I only asked incase there was something obviously wrong that I could change, I'll use the serialScroll instead, thanks!

I'm one more very happy user of SerialScroll - thanks so much for all the time you spend helping us...

Everything I need is working for me (the doctorate really helped) but there is one thing that bugs me:

When using images as scrolled items, the animation becomes jerky. I actually copied the exact source from your demo (which is not jerky), added images, and was able to reproduce the same effect that I have on my site. If you are interested, I can put up my test page.

Hello, I have been looking at your plugin for several days now, and I cannot seem to get it to work. I am new to jquery so I might be way off here but I do not see in your source code where you call the function. Anyways any help would be appreciated here is a link to the sample site http://www.thebuffalorose.com/RI2009/RI2010/index.html

when you click on the about us button it is supposed to animate to a container with an id of red, but it just jumps.

hi, arielfirst of all, i love your work. really.second - i must say that i never took time to learn jQuery as i should have.now i'm facing a problem with the usage of jQuery.localScroll.i could'nt get it to work, so i tried to copy the demo page to my server, and still - the animated scrolling didn't worked.can you point me to what i'm doing wrong?

of course, i will remove the trial page as soon as i'll get it to work...

Ariel, I've been using jQuery.scrollTo in my website http://www.biologydesign.com and want to change to the .localScroll because it has the vertical and horizontal functionality, just like your demo. Where can I find the example of the scripting you used in that demo? I can't find all the scripting language needed from the .localScroll blog page. Any help would be greatly appreciated.

Hi Ariel,Am using local scroll and it is working very well when linking to a anchor in the same page, but when linking to a anchor in another page it does not scroll to the anchor when the page is loaded.What should I do?Thanks

im using the jquery ui effect 'higlight' with ariel fleslers' local scroll. and i want both functions to run at the same time. the problem is, as for now, the functions are making each other queue. thats what my document.ready function looks like:

Hey Ariel.Quick note to say thank you for the plugin - it saved me lots of time!

Also, a little tech note: I think the .hash() method doesn't work if the URL includes arguments past the fragment (eg: www.example.com/page#section?arg1=val1 ).That's because by the time we get to scroll(e, link, settings) and var id = link.hash.slice(1)The hash still includes the arguments (eg: #section?arg1=val1)

Not a biggie for me right now, but figured I'd let you know (.hash() or .scroll() may want to check for ? and drop anything past it if it's found)

New to jquery and all that and site is under development under localhost, but I think there is a solution to my problem.

I have a topnav menu inside a banner that is 250px deep and fixed to the top of the viewport. I am using the menu with LocalScroll to scroll to divs located below the banner on a very long page. However, the divs scroll behind the banner to the top of the viewport. I want each div to stop scrolling at, say, 270px from the top of the viewport so the reader can read from the top of each div.

I hope I have explained this problem okay. My guess is there is an issue with my knowledge, which otherwise works brilliantly.

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

The smooth scroll does not work when links have anything other than letters, so we need it to work with parenthesis, question marks, colons, etc.

This script is great! Exactly what I was looking for. I'm having an odd issue, I believe with the width of the parent and child elements, that I can't seem to track down. I am using a 1 page layout with 100% height and width "frames". Each click scrolls an entire frame. The issue I'm having is if I have more than 3 LI sections (frames) the navigation gets all screwy. Instead of going from left to right for each LI it ends up jumping around (down, left, right, etc.).

I have each li being resized to the browser width and height automatically and I have .section being resized to 4 times the browser width to accomodate each LI but it seems to break at 4 LI's in a section, 3 works perfect.

http://osw2.dev.thinkfullcircle.com (click Why Onsite Wellness? to see where the issue lies). Each of the subnav items (Activity, Nutrition, Physical Health) should scroll to the right.

Just a heads up, I was using scrollTo in conjunction with localScroll, with jQuery lib 1.8.0 and it wasn't working in Chrome (21.0.1180.83). So I'm loading in jQuery lib 1.7.2 for the time being so it works.

Is there a way to offset the Y axis value when using localScroll? For example, I have a navigation at the top of my HTML page that is position:fixed, so it always takes up 40 pixels of space. When I scroll to an element, the element is hitting the top of the page exactly, so my navigation is hanging over 40 pixels worth of content.

Is there a way to modify this before the event is triggered, to basically say "take where you would normally scroll and add 40 pixels to it to compensate for my navigation"?