[jQuery] MooTools to Query
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 -->