Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthorMarGera332
- CommentTimeFeb 5th 2008 edited
Hey everyone
I am new to javascript and have been looking at Mootools, but i have been having trouble getting the scripts to work, so i wondered if someone could be so kind as to have a look at my code below, to see where i have gone wrong??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#test {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
#test2 {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
-->
</style>
<script type="text/javascript">
window.addEvent('domready', function(){
//-vertical
var mySlide = new Fx.Slide('test');
$('slidein').addEvent('click', function(e){
e = new Event(e);
mySlide.slideIn();
e.stop();
});
$('slideout').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
$('hide').addEvent('click', function(e){
e = new Event(e);
mySlide.hide();
e.stop();
});
//--horizontal
var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
$('slidein2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideIn();
e.stop();
});
$('slideout2').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideOut();
e.stop();
});
$('toggle2').addEvent('click', function(e){
e = new Event(e);
mySlide2.toggle();
e.stop();
});
$('hide2').addEvent('click', function(e){
e = new Event(e);
mySlide2.hide();
e.stop();
});
});
</script>
<body>
<h3 class="section">Fx.Slide Vertical</h3>
<a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">toggle</a> | <a id="hide" href="#">hide</a>
<div id="test">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<h3 class="section">Fx.Slide Horizontal</h3>
<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a> | <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>
<div id="test2">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Thanks to anyone who can give me some help with this :P -
- CommentAuthoraxe_sosharp
- CommentTimeFeb 5th 2008 edited
If this is the entire HTML then you are missing the link to the Mootools javascript files, normally :
<script type="text/javascript" src="/demos/mootools.svn.js"></script>
<script type="text/javascript" src="/scripts/demos.js"></script>
John
1 to 2 of 2