Wednesday, October 24, 2007

jQuery.LocalScroll

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.

What does this plugin do ?

This plugin will animate a regular anchor navigation [1] [2].
It will allow your visitors to navigate your site with a smooth scrolling effect.

Each time a link is clicked, the element you decide(can be the whole screen), will gradually scroll to the targeted element, instead of "jumping" as it'd normally do.
jQuery.ScrollTo is used for the animation.

How to implement it ?

That's easy! you need to set links and anchors, that means, set an id to all those elements you want to scroll to.
These are the anchors.
Then add links with the respective id in the href, like this:

<a href="#the_id">your_text</a>
Let's call these "local links".
Lastly, you must call jQuery.LocalScroll on elements that contain our local links, you must wait for the document to be ready.

So if (for example) you have a div with id "navigation" and the local links are inside. You add this inside a document.ready:
$('#navigation').localScroll();
If your links are all spread, you can use:
$.localScroll();
That gets all the local links in the page. Both calls to the plugin accept one optional argument, that is, a hash specifying the settings described below. None is required.

Settings

  • target
    What to scroll (selector, DOMElement, or jQuery Object). If none is specified, the whole window will be scrolled.
  • filter
    String or function filter to ignore some of the links.
  • event
    On which event of the link to react (click by default)
  • lazy
    If true, more links can be added to the matched elements ( by AJAX, jQuery, etc ) and the plugin will also react to them.
  • stop
    If true (default), the plugin will stop any previous animations of the target, to avoid queuing.
  • lock
    If true, the plugin will ignore events if already animating (alternative to 'stop').
  • hash
    If true, the hash of the clicked link, will appear on the address bar once the animation ends.
    Note:This option isn't too cool when scrolling overflown elements, it's mostly recommended when scrolling the window.
  • onBefore
    A function to be called before each scrolling. It receives the following arguments: event object, targeted element and target to be scrolled. The 'this' will point to the set of settings.
  • reset
    Only for $.localScroll.hash(), if true (default) elements' scroll is reset before actual scrolling.
In addition to that, you can use jQuery.ScrollTo's settings!
Check its demo to see all of them.

The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.

How do I use the settings ?

The most important setting is 'target', you might not want to navigate(scroll) the screen, but only an overflowed element(like the demo).
In that case, you specify the target, with a selector or the element itself.
$('#navigation').localScroll({
   target:'#content'
});
Instead of the window, an element with id 'content' will be scrolled.

Finally, a more complex call to show some customization in action:
Let's say you need to scroll on both axes to uncover all the anchors, then we'll need the option 'axis'.
You want to do an horizontal scroll, and then vertical, the code would be:
$('ul.sections').localScroll({
   target:'#content',
   axis:'xy',
   queue:true //one axis at a time
});
Note that 'axis' and 'queue' actually belong to jQuery.ScrollTo, not to jQuery.LocalScroll.

Dynamic content( AJAX, AHAH, or simply jQuery )

The plugin supports dynamically added/loaded anchors and local links. You need to set the option 'lazy' to true. Note that the matched elements (#navigation in the first example) must be preserved in the DOM. But any content inside it can be modified. You don't have this problem if you use the global call.

Troubleshooting

When using the browser's back button, the scroll isn't reverted

This is a known fact when scrolling overflown elements (as in not the window).

When clicking a link, it jumps directly to the target

That's the browser default behavior (no javascript). You either have a javascript error (check with Firebug) or something's wrong in the call to the plugin.

Strange things happen

Try removing the option 'hash' or set it to false. It can cause problems.

Check ScrollTo's troubleshooting.

Links

101 comments:

PHP Programmer said...

Great stuff man :) I search for some jQuery plugin for my page and your is the most helpful :)

Flesler said...

Thanks! :)

PHP Programmer said...

Hi :)
I have one problem and I hope that you could help me :)
On my page i use sample from jQuert.LocalScroll pack.
On page I have menu and content is loaded by ajax to "content" div like:

a href="#" onclick='$.ajax({url: "projects.php", success: function(response){$("#content").html(response);}, dataType: "html"});'

when I scroll content to 5-th section and then click "projects" menu I don't see content, I can see it if I back to previous site and scroll to 1-st section and then click "projects" menu

It is strange, I don't know why this content is hidden. Mayby I should add some more action to code which I paste upper, to change "content" div properties ?

I know that it's complex to explain what I mean but maybe you understand

Flesler said...

It is complex to understand, could you give me a link to it, or create a similar situation so I can see ?

Just in case you are interested, you could replace that html with:
a href="#" onclick='$("#content").load("projects.php");'..

Let me know if you have an example..

PHP Programmer said...

ok :)
visit site http://ryznar.eu/
on left click "o mnie"
next on right click "section 5"
then on left click "projekty"
you don't see content

now come back to "o mnie"
then click "section 1"
and again click "projekty"
now you see content

I think that I should reset some properties of "content" div when I click "projekty" but I don't know which

Flesler said...

Ok, get the last release, that will be fixed now. Thanks :)

PHP Programmer said...

still if I choose in "o mnie" a section other than "section 1" and next choose "projekty" I don't see content


maybe I hould tadd there something to scroll "content" div before updating ?
a href="#" onclick='$.ajax({url: "projekty.php", success: function(response){$("#content").html(response);}, dataType: "html"});'


but in new release is one advane :) i I click "o mnie" and then in first click content is scrolling, not jump like before

Flesler said...

That's because the div#content, keeps the scrollTop value that had before, meaning..
In Projects, the height of the content is, let's say, 200px. But the div is "scrolled" 800px. So you don't what's inside.
You must set the scrollTop of #content to 0, every time you reload the content.

Also, I don't know how "exprimental" is the state of the page, but you keep those 5 anchors there, and they point to non-existing elements when you are not in "o mnie"...

PHP Programmer said...

there's no problem in Opera, I don't know how in IE. I use FF


Flesler: "You must set the scrollTop of #content to 0, every time you reload the content."

How can I do it? I'm a beginner in jQuery :P

PHP Programmer said...

I do it in this way:
a onclick='$("#content").scrollTo(0);$.ajax({url: "projekty.php", success: function(response){$("#content").html(response);}, dataType: "html"});'
but I don't know it is right or not

Flesler said...

Try:
<a onclick="$('#content').attr('scrollTop',0).load('projekty.php');return false;">projekty.......

PHP Programmer said...

I have one more problem, I promise that is last :P

visit site http://ryznar.eu/
for example if I click "Pozostałe"
content is scrolling

next if i choose "projekty" and back to "o mnie" and again click "Pozostałe" page is not scrolling but jump in some section

I think it jump not scroll because of ajax loading content
a onclick="$('#content').load('omnie.php');return false;"
but how can I change it ... ?

Flesler said...

The problem is that when you click "Projekty", you are loading some new html inside the div #content, then you go back to o mnie, and you expect those anchor to keep scrolling. But those are not the same anchors you bound before. Meaning, there's no 'click' handler on them. Check this link, you will understand:
http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_Ajax_request.3F

One solution would be, instead of calling load on #content, to call the load on #o_mnie, and hide #navigation, this way you don't destruct the original anchors, then when you click projekty again, you show #navigation.

Cheers.

Noah said...

Dear Ariel,
Thanks for Your great plugin!!!
I'd like to ask You a question about the onAfterFirst function:
Unfortunately it doesn't work in my homepage...
I want to scroll the entire page and I did put the following script in the head of the html:

jQuery(function( $ ){
$.localScroll();
});


Furthermore i did chance axis:'x' to axis:'xy' in localscroll.js (line 38) and did write settings.queue = true; in scrollto.js (line 62)...

But it still scrolls x and y at the same time.

I would be very thankful for Your help!!!
Best Noah

Flesler said...

Hi Noah
First of all, I'd advice you not to touch the original code, instead, modify $.localScroll.defaults from the outside.

The hash of settings you send to localScroll, is then passed to scrollTo.
The defaults of localScroll have priority over those in scrollTo.

So, if you will only call localScroll once, I think you'd better pass a hash of settings, like this:
$.localScroll({
queue:true,
axis:'xy',
afterFirst:function..
});

If you will call it several times, you can alter the defaults.
$.localScroll.defaults.queue = true;

I hope this solves your problem, else, try to prepare an example so I can check it.

Cheers.

Flesler said...

Hi Noah

My mistake it should have been:
jQuery(function( $ ){
 $.localScroll({
  queue:true,
  axis:'xy',
  onAfter:function(){
   alert('Got there!');
  }
 });
});

The code I gave you was untested, I tested this time :)
I made a small upgrade, please get the last release at http://plugins.jquery.com/project/LocalScroll.

Noah said...

Hi Ariel,
works perfect!!!
Without Your help, I hadn't been able to make it work.
Thank You very much!
Cheers :-)
Noah

sullof said...

Hi Ariel,
great plugin!
Thanks.

Xavier said...

It's amazing!!!! Great plugin for JQuery!

Regards,

Xavier

Flesler said...

Why, thanks to both! :)

M&M said...

Can this plugin also be used with an Iframe? I tried it but it won't work...
Thanks in advance

sparkybarkalot said...

Thanks for a great plugin, Ariel. I am having a problem when my divs contain scrollbars (because I've got overflow:auto declared on them in the CSS). The scrolling gets very shakey in that case. For example, imagine that the numbered boxes on your demos have overflow:auto declared on them, and a few paragraphs of text so that a vertical scrollbar appears in each numbered box. When you then scroll, it is not smooth... but rather very shaky. My only solution so far has been to also use the jScrollPane plugin, and when I do that there is no longer any shakiness when moving between divs. Any thoughts or suggestions?

Flesler said...

@M&M
It won't capture the links inside an Iframe, as jQuery doesn't include these natively. If you describe the situation a little more, maybe we can figure out some kind of workaround.

@sparkybarkalot
I'm not sure how could we improve that, is it an MSIE thing ? or for every browser ?
You could try to use a longer animation (thus slower), maybe you could try different easing functions to see if that fixes it more or less.
If you wanna try the easing option, search for jQuery+easing in Google and try the plugin.

Cheers.

sparkybarkalot said...

ariel, thanks for the quick reply. I just did more testing, and at the moment it ONLY happens in Firefox 2. The following show no problems in Windows XP: IE6, IE7, Opera, Safari 3, NS 7.2. Weird huh. Changing animation speeds doesn't help, but I may try your suggestion about easing... though my sense is that there is something else going on. Thanks!

Flesler said...

Hi sparkybarkalot
 In my opinion, this lack of smoothness in the animation is caused by the browser. Firefox seems to be a bit deficient at animations, I read somewhere that it's specially bad when the animations have floating point number.
I have one idea you could try, is not the best solution but well. You could hide the scrollbars while animating (only for FF?) like this:

$('#links').localScroll({
  .....
  onBefore:function( e, link, $pane ){
   if( $.browser.mozilla )
     $pane.addClass('ov-hidden');
  },
  onAfter:function(){
   $(this).removeClass('ov-hidden');
  }
});

Then, in the CSS:
.ov-hidden *{
   overflow:hidden;
}

Well.. let me know if you try something new.
Cheers.

M&M said...

Ariel thanks for the quick reply..
I uploaded my testing situation:
the links are:
http://www.miquil.com/lab/scrollTo/
http://www.miquil.com/lab/scrollTo/frame.html

In both the index (iframe holder) and the frame.html i put the same javascript files and code...

any pointers on how to let your scrollTo script work with the iFrame???

Thanks again...

Flesler said...

Hi M&M
I've been actually trying a few things like.
$('iframe').contents()
.find('#links').localScroll(...);

That could actually work, I was doing it all with JS and got messed up.

The thing is there's a document.getElementById in the code. And I'm not sure which document will it point to. You could try in that direction. If you want, we can talk about this by IM.
GTalk: aflesler(at)gmail(dot)com
Msn: flesler(at)hotmail(dot)com

I'll check your demos and will get back to you.
Bye.

setiawanthea said...

dear flesler,
My web got Fisheye interface menu, how can i combine it with ur localscroll.?

Perlaws said...

Hello :)

I use you plugin in my site, your plugin is really cool)))

But i have one little problem and i hope you can help me:
i want to put prev and next links into separate DIV

Then it doesn not work((

i see here (your demo page)

$content.find('li a') //MAYBE I HAVE TO CHANGE HERE? i tried, but also doesnt work((
.filter('.next').bind('click', 'next', move )
.end()
.filter('.prev').bind('click', 'prev', move );


Help please!!!

Flesler said...

@setiawanthea
Hi, what problem arises when combining both plugins ?
Could you make a simple demo ?

@Perlaws
I actually changed that part of the code in the demo, to remove the calls to ScrollTo and make it "pure" LocalScroll. Could you re-check the source code of the demo ? then tell me if you have any problem.

Cheers.

Nelson said...

hi flesler

i'm trying out jquery.localscroll on my page and it works in IE7 but not in FF2.

the page is http://greatlinks.neonspice.net/jquery_test.html

i'm really new to jquery so would appreciate if u could guide me through this, thanks!

my e-mail is neonspice@gmail.com

nelson said...

hi flesler

i fixed it by converting all my anchor tags to div tags, but then now it doesnt work in safari.

http://greatlinks.neonspice.net

am i able to use anchor tags with your script?

please help, thanks

Ariel Flesler said...

Hi Nelson
  You surely can use anchors, I tried your code and discovered FF has a weird bug, it throws an error when accessing the 'hash' attribute of a named anchor..
I added an extra check for this, please get version 1.2.3 from the project page, this should work now.
Also a tip.. if you have all the navigation links inside that div#float, you can call $('#float').localScroll....
That will be faster..

Cheers, let me know if it still fails.

Nelson said...

hey flesler

thanks so much for the fix!
really appreciate it, although there is still one more problem: the scroll effect doesn't work in safari. Is there something wrong with my code, or is jquery.localscroll just incompatible with that browser?

thanks once again.

Ariel Flesler said...

Hi Nelson
  LocalScroll should work on Safari.
I tested your site with my Safari 3 beta Windows and it works like a charm.
Check my 2 demos with your Safari and see if it works.

For everyone:
This got full up. From now on, on any matter related to jQuery.LocalScroll, please post here
Cheers

Anonymous said...

I'm embarassed at how long it took me to realize I had to roll my own css to get scrolling to work within a box. I'm so spoiled by jquery plugins doing it all for me, I forgot I actually need to earn my paycheck.

Perhaps it's just me but I think a mention of the css involved would be helpful.

Ariel Flesler said...

Hi

Well.. I specified in the demo, that this plugin is not a premade widget, it can be used for any html(and css).

For what it's worth, I don't do plugins for spoiled people :)
All of them are oriented to be... tools, not solutions.

Cheers

Julien Brassard said...

Hello,

First of all, thanks for this js, I love it!

I need help if you can:
See my site: http://www.jbrassard.com/
I would like to have multiple local scrolling, that is, each project scrollable with its own thumbs...

I can I approach this?

Thanks!

Ariel Flesler said...

Hi Julien

You surely can, you call the plugin as many times as you want.
On different links containers, using different targets.

You could do something like:
http://flesler.pastebin.com/f613c19fb

Cheers

Julien Brassard said...

Hi again,

I tried your suggested script and I think it's not working the way it should... I'm a javascript noob so please forgive me :)

First of all, I can't have smooth scrolling, even if I specified my settings.

Second, it seems I can't see neither the middle picture nor the first after clicking a thumb, it's locked..

Can you point me in the right direction ?

Thank you very much for your time!

Anonymous said...

Its not working!!

Where do you define the content in local scroll? I can't see anything. I've tryed to copy the stuff in the demo but it's not working!

Ariel Flesler said...

It certainly works, it worked for hundreds of users, so it-s likely to be your fault.

Check the documentation, it says how to specify the content, and everything else.

Anonymous said...

Perhaps I'm just a "noob". But this isn't working.

I can't seem to find the:

"Nullam et sem eget massa pellentesque dapibus. Nulla sollicitudin enim quis odio. Quisque ipsum lorem...."

Text anywhere. I've tryed to define it but it's not working for me :(

Robin said...

Hey Ariel, just wanted to say thanks for creating ScrollTo and LocalScroll - they really are a pair of awesome plugins! You might be interested to see the site I recently built with them in mind for my university: http://www.pittvilledegreeshow.org. Cheers!

Ariel Flesler said...

Hi Robin

Thanks for letting me know!
Looks really good, very colorful and the scrolling effect is really noticeable :D

Will add a link to it later.
Cheers

james said...

hi ariel

thank you for sharing such a terrific plugin, i have a question to ask, i hope its not too stupid (needless to say i am a absolute novice with scripting)

before i start implementing your script into a page, i wanted to check if the scroll will work the same way with a horizontal layout web page, rather than the more typical vertical? ie. will the scroll slide across the page, rather than down?

once again sorry if this is a really stupid question!

many thanks

Ariel Flesler said...

Hi James

If you mean whether it can scroll horizontally.. then yes.

It can scroll on any direction and even both at the same time, or one and then the other.

To achieve that, use ScrollTo's setting called 'axis'.
Just add axis:'x', to the hash of settings.

Cheers

James said...

thanks for the quick reply ariel

this is my very first time attempting to use jquery, ive been trying all morning to use the plugin, but im getting nowhere.

this is my call code, is there anything that you can immediately spot that is wrong with it? apologies if its blindingly obvious

after calling "jquery.scrollTo-1.3.3-min.js" and "jquery.localscroll-1.2.6-min.js" in head

$(document).ready(function(){
$('#content').localScroll({
axis:'x',
});
});


thank you for your time

Ariel Flesler said...

Hi James

You need to include jQuery, then ScrollTo and LocalScroll.

You need to call LocalScroll on the element that contains the links.
For now.. just try this:

$.localScroll();

This will scroll the window. If you want to scroll a dom element instead, you need to specify it as 'target' option.

$.localScroll({ target:'#a_div' });

Try the first one and see if it works. Send me an email if you have more questions.

Cheers

Parel said...

AMAZING Plug in!
Do you have a working example on how to call a new page (file), with ajax and .LocalScroll ?

I'm working on a iPhone prototype page, and i want that when a user click's a element ( li ), the page calls a new one with ajax and thes uses .LocalScroll to present it, is that posible?

James said...

Ariel,

Thank you for your response, i really appreciate it, but i think i am out of my depth here, i can't tell one piece of code from the next and have tried reading through it all quite a few times but i still dont understand.

I know you must be busy, so id just like to say thanks for your script and the help you have given.

Think ill just stick to my CSS and HTML, leave the javascript for another day.

James

Andreas said...

hi, I have a problem.

In Firefox and IE it works fine, but everytime i click a link in opera the page scrolls to the top.

http://andreasflick.de/inhalt_neu_test/

Can you help me?

Thanks,
Andreas

Ariel Flesler said...

Remove the option that says:
hash:true,

Andreas said...

sorry, it did not work. ;-(

Andreas

Ariel Flesler said...

Then you probably have a js error. Do you have this online ?
Make sure you don't have errors before posting, you can use Firebug.

Anup said...

Hi,

The plugin is really neat. One slight problem however:

It seems that while the hash does indeed update the URL, the history is not working quite right -- pressing back does not have an effect the first time, although the URL does change.

A usage scenario is a page that has a table of contents. Making the table of contents "localscroll" is nice for usability, but you can't then press the back button (or, more accurately, when you do, the URL changes, but the user is not taken back).

I knocked up a quick test page with it enabled:
http://www.onenaught.com/tests/localscroll/localscroll-test.html

Click any table of item contents or back to top links and they work very nicely.

But, click on the browser back button once.
- URL changes correctly. But no scrolling
- Click again
- It seems to go back, but to the previous location
- It seems like it is off by one.

Hope that made sense!

Ariel Flesler said...

Hi

Setting the hash has different behaviors among browsers.
IE doesn't add history entries when changing the hash.
Hitting back doesn't modify the scroll position... that's how it turns out.
Cheers

guest384 said...

Hi

This is a really good plugin and precisely what I want for my site. It isn't the first time I'm using jQuery plugins or something but for reasons completely beyond me, I've been trying for two days but canNOT get scrollTo to work, neither when I try localScroll nor when I try the serialscroll.

I've checked your demos, scanned the code where others are using it, seen the documentation, I just don't seem able to start it up and I can't see what I'm doing wrong.

I've written up a very simple try at both localscroll and serialscroll.. do you think you could possibly have a look-see and let me know what I'm doing wrong?

The try is at http://smartlink.com.sa/test/scrollto/

I would seriously appreciate it.

guest384 said...

Update:
ok at least something's gone right - now at least the scroll is taking the delay I specified, however there is still no easing or visible scrolling going on, it's still "jumping".

Ariel Flesler said...

Hi

Sorry to hear it is hard to implement for you. Maybe I should exemplify the plugin with a big customized call.

Just try this:
jQuery(function( $ ){
$.localScroll();
});

You have some errors:
* You're including scrollTo twice.
* Calling localScroll twice.
* The href of the "Jump to red square" should be "#red".
* The id of the anchors doesn't need to have # and you don't need to give them names, just id.

The jump is due to the option 'hash' which sets the hash of the url.

Anabelle said...

Hi, Im trying out localscroll but i can't get it to work.

You can see it in:

http://diez.com.co/?wptheme=diezsite

and then jumbing to another page like:

http://diez.com.co/index.php/servicios/#enc

I've checked all troubleshooting that you mention but it still doesn't work.

Im using the code:

$.localScroll.hash({
duration:1000,
hash:true
});

Can you please tell me what Im doing wrong?

If I try to run the function from a console, the scrollbar in the page disappears for a second and then comes back, is all that happens.

Thanks for any help-

Ariel Flesler said...

Hi

The problem is due to 2 things.
One is that you need to reset the scroll position to void the native behavior of the browser.

Add something like this before the call to hash().
window.scrollTo( 0, 0 );

The other problem is that the accordion is moving the element #enc.
So it's possible that localScroll is scrolling to the former position of #enc.
Try calling hash() with a setTimeout or something like that.

Anabelle said...

Thanks for your suggestions, I done what you tell me and it still doesn't work.

I'm reseting the scroll, and that works, I also added a timeout (exagerated 20 seconds) and it still didn't work (just disappeared and reappeared the scrollbar when executed).

So I totally removed the accordion so that it wouldn't get in the way of #enc, and still. Just a blink of the scrollbar when localscroll is executed.

Ive checked my CSS and I have not a single absolute position either, and the doctype is right, it even validates without errors.

What can be messing your plugin up?

guest384 said...

Hi

Thanks very much! Firstly, I really appreciate how you're offering prompt individual help to the plugin users!

I removed the silly errors I had put in the demo in my frustration - the the basic localscroll is working now. Queue is set to true. Hash is false.

But there are two issues:
1. It works on one-axis only. It will scroll down as far as need be to reach the element, but it will not then scroll right, at best it will only jump right.
2. When I set the target's overflow to hidden/scroll, it simply doesn't work.

Here is my little demo:
http://www.smartlink.com.sa/test/scrollto/

I then got this very simple template from Snipplr, and you can see how it looks when I pasted and edited it:
http://www.smartlink.com.sa/test/scrollto/template.html

Again, scroll only covers one axis, even though section06 and section07 require not just horizontal but vertical scrolling as well, and queue is set to true.

Thanks.

Ariel Flesler said...

Hi
You really need to check the docs. It lists all the possible settings. You can use any scrollTo setting on the call to LocalScroll too.

One of them is 'axis', you need to set it to 'xy' or 'yx'.
Check the docs.

About the demos: demo1 has a javascript error. Debug your code before posting here please.
You can use Firebug on Firefox to do this.

You didn't change the id/name thing I mentioned. And you're putting <br>'s inside an <ul>, that's not legal html.

Ariel Flesler said...

@Anabelle

The page is behaving oddly, that is probably due to the inclusion of Interface. It's not supported by the last versions of jQuery (and it's doing something weird each time I try to scroll).

Take out Interface, if the accordion needs it, then you'll need to use another accordion (like Joern's).

LocalScroll would surely work without these other scripts.

Erik said...

First and foremost, thanks for providing this great plugin and a forum to get help for newbies such as myself. I am a complete jQuery rookie and have decided, as a designer, it was time to expand my skill set. Unfortunately, if something doesn't work properly, I am clueless as to the steps to figure out what I am doing wrong.

Enough of my blabbing. On to my problem. I am revamping my website and am trying to implement local scroll on a particular page to no avail. The page is http://www.lucidmotives.com/v4/about. The links contained in div#studio_tour should allow the user to scroll directly to the content indicated in the href, but nothing happens. Also, when clicking on the top icon, the user's browser should return the the div#studio_tour. Am I doing something wrong or am I just an idiot as I am beginning to feel like?

My last question is regarding easing. I like the bounce effect in your demos. How exactly is that achieved? Do I need to use a separate plug in for that effect?

Thanks again and I hope you can help.

Erik said...

Sorry, I didn't activate the link to the page I am testing.

Test Page

Ariel Flesler said...

You're calling the plugin twice. Remove the first call.

The problem is that the path of the script including jquery.scrollTo is wrong.
You should use Firebug on Firefox to check stuff like this.

jQuery has 2 easing equations built-in (swing and linear).
For more equations, check the easing plugin.

thenorton said...

I realy try, but i don't know how implement the code to do local links in href works fine!
Maybe a step by step more detailed...

Thank you in advance.

Ariel Flesler said...

There is sort of a step-by-step. It has the title "How to implement it ?".
That, together with the list of settings and the demo should show you how.

Have you read the docs and checked the demo ?

jsdtechnology.co.uk said...

Hi Ariel,

Thanks for writing a very useful set of plugins. I'm using your plugins on a new website and I'm having trouble figuring out how to use the onBefore event to to mark the clicked (or hovered over) link during an autoscroll event.

I've read your explanation at http://plugins.jquery.com/node/2024#comment-1254 but I still cannot figure it out.

I'm a programmer but my experience is with is BASH, Perl, VBS, VBA and PHP in the past 10 years. Even so I'm not an expert at any language. I find jquery a bit difficult to follow so far (I've spent 2 days learning so far).

Would you mind taking a look please? The website is at http://test2.jsdtechnology.co.uk/

It's my first commercial project as a website designer. If I get paid for it I will donate to you.

Many Thanks

James

Ariel Flesler said...

Hi

Set this as the onBefore:
http://flesler.pastebin.com/f30cfc40

I'd set the option 'lock' to true (instead of false) or add stop:true.
That is, in the scrollOptions object.

Note that you're not using LocalScroll, though the upper navigation isn't coded yet.

Cheers

jsdtechnology.co.uk said...

Thanks Ariel. I tried that but it does not seem to take effect. I mean that when the image scrolls to the next one, the relevant button along the bottom row of buttons does not get highlighted/marked (as if a mouse pointer was rolled over it).

Am I missing some additional required code somewhere, please?

jsdtechnology.co.uk said...

I mean that when the image automatically scrolls after 5 seconds the button at the bottom doesnt highlight.

Ariel Flesler said...

The code you use (from Remy) adds a css class 'selected' to the active link.
You need to style a.selected according to your needs.

jsdtechnology.co.uk said...

Thanks Ariel, I'll see if I can figure that part out.

Are you referring to Remy Sharp (http://remysharp.com)?

To be honest I nabbed the code from http://www.f-prot.com.

Cheers

James

jsdtechnology.co.uk said...

Ariel thanks it works very well. I will not forget to donate when they pay me for the website.

mmcglynn said...

it is actually very difficult to get this to work. I just burned and hour, with no animation.

Ariel Flesler said...

Did you read the docs ?
Got something online ?

Catalina said...

Hi, I'm new at this and I just can't figure out why this is not working. Can you please take a look at this demo?
http://catadeleon.com.ar/testing/

I want the links in the portfolio section (web, print, branding, other) to trigger the scroll, but nothing happens. Any idea why this is?

Thanks for your help!

Ariel Flesler said...

Hi Catalina

Just replace #scrollContainer for #scroll.
The target should be the element with overflow.

Catalina said...

sos argentino, no? Muchas gracias Ariel, no puedo creer que simple, puedo jurar que habia probado eso, no se que paso...ahora funciona perfecto, mil gracias!!

Ariel Flesler said...

De nada :)

Aamir Afridi said...

Hi Ariel!
I have div with vertical scroll bar

When u change something down that div, the content of whole div reloads (refreshes) via ajax

NOW: i have id of that div to which i want that div to scroll automatically after refreshing, but this plugin needs a click somewhere. Can i just scroll that div by just saying:

$('#itemNum34').localScroll();

while itemNum34 is the id of a span down in that div.

Ariel Flesler said...

Well...
The logical way would be:

$('#pane').scrollTo( '#itemNum34', 1000 );

You can customize that with any additional setting.

It's sort of like the ajaxForm/ajaxSubmit difference on the Form plugin.

Aamir Afridi said...

Sorted!!!! huuhhh its looking great... thanks

Anton said...

Is there anyway you can use this together with the heartbeat plugin? What I want to do is autoscroll a div with overflow:auto when it's been populated with new content.

Any help in that direction is very welcome!

cheers,

/Anton

Ariel Flesler said...

Hi

It's not so straight forward doable on LocalScroll. But if you use SerialScroll instead, you can trigger custom events (prev,next,goto) manipulating the scroll from the outside.

Darren said...

Hi here is what I have inside my html page, but when i click on the link, nothing happens... help pls!!!

<script type='text/javascript' src='jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='jquery.localscroll-min.js'></script>
<script type="text/javascript">
jQuery(function( $ ){
$.localScroll();
});


</script>

Anonymous said...

Hi Ariel,
First of all thank you for this nice script (LocalScroll). It really works always..if you understand how to implement it!
Well, I've got it on the rails, but I don't know how to make the same refresh effect as in youre demo, i.e. I want the section C stay open no matter the page refresh. What should I do?
Thank you for youre time and help!
Felix.

Felix said...

So that's my name and of course NOT anonymous!
See my previous comment...

Ariel Flesler said...

@darren
It's hard to tell by just that. That's obviously correct. Can you get this online so I can see ?

@felix
I noticed some sort of difficulty to implement this. Maybe because it requires an implicit markup (which is described on the docs).
Let me say that the demos are not THE way of using the plugins. Both demos I sort of improvised them.
On the AJAX demo, if you want it to start with a certain section based on location.hash, then simply do that by changing init.js.

The whole loading thing is not something that actually belongs to the plugin, is just something I made as a demonstration.

Catalina said...

Ariel, perdon por molestarte devuelta, pero estoy con otro problema. Quiero ahora scrollear también verticalmente y solo funciona en IE7, no en firefox:

http://catadeleon.com.ar/testing/

El link "more" es el link del que hablo.

¿Tenes idea porque?

Ariel Flesler said...

Hola Catalina
Tenes que ponerle height a los ul.gallery y va a andar.
Saludos

Matt Wilcox said...

Hi there,

Thanks for such a good plugin :) I'm having a bit of trouble using it with the filter parameter properly though, so I wondered if you could clear let me know where I'm going wrong.

I'm trying to use the filter to specify anchors to ignore: eg;,

$.localScroll({
filter: '#tabs_menu a', // don't watch these links
axis:'y', // 'x', 'y', 'xy' or 'yx'
onAfter: targetHighlight,
offset: {top:-20, left:-20}
});

It doesn't work though, and I can't suss out how to make it NOT match those links.

Ariel Flesler said...

Hi Matt

Filters on jQuery have to be simple, that is, they can't have spaces, >, etc.
You'd use a class instead.

Dirk said...

Hi!

Nice plugin!!

Any news on using it with iframes?

Greets
Dirk

Ariel Flesler said...

In what way exactly ?
The latest release of ScrollTo adds massive support for Iframes.

What functionality do you need ?

Dirk said...

Hi Ariel,

thanks for your response.

I check the new version then...

Sebastien said...

Hi !
I send you a message at your gmail box.

I hope you receive it.

Sebastien.