As with most things, there are different ways to achieve what you
want. This is just one of them...
Assumption: you have some styles defined along the lines of:
<style type='text/css'>
#demo-wrapper {height:250px; overflow:hidden;}
.scrolling-content {height:250px;}
</style>
(actual values are not relevant, and overflow could be auto, but
without something similar there is no point to the scroll!)
Include the following scripts:
- jQuery
- the Easing plugin (for jQuery)
- the ScrollTo plugin (for jQuery)
Script:
jQuery(document).ready( function($){
$('#buttons a').bind('click', function(){
this.blur();
var n = this.id.match(/(\d+)$/);
if(n){
$('#demo-wrapper').stop().scrollTo( '#content' + n[1],
{duration:1000, easing:'easeInOutQuad'} );
}
return false;
});
});
The above has been tested and works, and does not require changing the
html.
On May 20, 8:23 pm, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> jQuery.LocalScroll:
> http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
>
> --
> Ariel Fleslerhttp://flesler.blogspot.com
>
> On 20 mayo, 08:27, Michael <[EMAIL PROTECTED]> wrote:
>
> > Hi,
>
> > I have a coda slider working using mootools, but want to use JQuery as
> > my main library.
>
> > I have this code for my slider:
>
> > window.addEvent('domready', function(){
> > var scroll = new Fx.Scroll('demo-wrapper', {
> > wait: false,
> > duration: 1000,//Speed to slide
> > transition: Fx.Transitions.Quad.easeInOut
> > });
>
> > $('link1').addEvent('click', function(event) {
> > event = new Event(event).stop();
> > scroll.toElement('content1');
> > });
>
> > $('link2').addEvent('click', function(event) {
> > event = new Event(event).stop();
> > scroll.toElement('content2');
> > });
>
> > $('link3').addEvent('click', function(event) {
> > event = new Event(event).stop();
> > scroll.toElement('content3');
> > });
>
> > $('link4').addEvent('click', function(event) {
> > event = new Event(event).stop();
> > scroll.toElement('content4');
> > });
>
> > $('link5').addEvent('click', function(event) {
> > event = new Event(event).stop();
> > scroll.toElement('content5');
> > });
>
> > });
>
> > The slider works fine with mootools.v1.1.js, but want it to work with
> > jquery (I've tried putting it with jquery.1.2.3.pack.js) but it
> > doesn't work. What 'mootools' code is in the above javascript and what
> > would be the jquery equivalent?
>
> > And the HTML:
>
> > <div id="demo-wrapper">
> > <div id="demo-inner">
> > <div id="content1" class="scrolling-content">
> > <div id="user1">
> > Lorem ipsum dolor sit amet, consectetur
> > adipisicing elit, sed do
> > eiusmod tempor incididunt ut labore et dolore magna aliqua.
> > Ut enim ad minim veniam, quis nostrud
> > exercitation ullamco laboris
> > nisi ut aliquip ex ea commodo consequat
> > </div>
> > </div>
>
> > <div id="content2" class="scrolling-content">
> > <div id="user2">
> > Lorem ipsum dolor sit amet, consectetur
> > adipisicing elit, sed do
> > eiusmod tempor incididunt ut labore et dolore magna aliqua.
> > Ut enim ad minim veniam, quis nostrud
> > exercitation ullamco laboris
> > nisi ut aliquip ex ea commodo consequat
> > </div>
> > </div>
>
> > <div id="content3" class="scrolling-content">
> > <div id="user3">
> > Lorem ipsum dolor sit amet, consectetur
> > adipisicing elit, sed do
> > eiusmod tempor incididunt ut labore et dolore magna aliqua.
> > Ut enim ad minim veniam, quis nostrud
> > exercitation ullamco laboris
> > nisi ut aliquip ex ea commodo consequat
> > </div>
> > </div>
>
> > <div id="content4" class="scrolling-content">
> > <div id="user4">
> > Lorem ipsum dolor sit amet, consectetur
> > adipisicing elit, sed do
> > eiusmod tempor incididunt ut labore et dolore magna aliqua.
> > Ut enim ad minim veniam, quis nostrud
> > exercitation ullamco laboris
> > nisi ut aliquip ex ea commodo consequat
> > </div>
> > </div>
>
> > <div id="content5" class="scrolling-content">
> > <div id="user5">
> > Lorem ipsum dolor sit amet, consectetur
> > adipisicing elit, sed do
> > eiusmod tempor incididunt ut labore et dolore magna aliqua.
> > Ut enim ad minim veniam, quis nostrud
> > exercitation ullamco laboris
> > nisi ut aliquip ex ea commodo consequat
> > <div>
> > </div>
>
> > </div>
> > </div>
> > </div>
> > </div>
>
> > <!-- Start of Menu Buttons -->
> > <div id="header_buttons_wrap">
> > <div id="header_buttons">
> > <div id="demo-bar">
> > <ul id="buttons">
> > <li id="but_intro"><a id="link1"
> > href="javascript:void(0)"
> > name="link1"
> > class="active"
> > onfocus="this.hideFocus=true;">Text</a>
> > </li>
>
> > <li id="but_flexible"><a id="link2"
> > href="javascript:void(0)"
> > name="link2"
> > onfocus="this.hideFocus=true;">Media</a>
> > </li>
>
> > <li id="but_support"><a id="link3"
> > href="javascript:void(0)"
> > name="link3"
> > onfocus="this.hideFocus=true;">Table</a>
> > </li>
>
> > <li id="but_pro"><a id="link4"
> > href="javascript:void(0)"
> > name="link4"
> > onfocus="this.hideFocus=true;">Link</a>
> > </li>
>
> > <li id="but_w3c"><a id="link5"
> > href="javascript:void(0)"
> > name="link5"
> > onfocus="this.hideFocus=true;">Link</a>
> > </li>
> > </ul>
> > </div>
> > </div>
> > </div><!-- End of Menu Buttons -->
