Hey,
ich habe eine schöne Funktion bei Mootools entdeckt, nur leider weiß ich nicht, wie ich sowas in eine Homepage einbauen kann.
Die Funktion heißt Fx.Slide. (http://demos.mootools.net/Fx.Slide)
Ich habe mal versucht die css, js und php dateien irgendwie hinzubasteln, es wird auch irgendwie angezeigt wie in dem Beispiel, nur leider funktioniert das alles nicht.
Hoffe dass ihr mir vielleicht weiterhelfen könnt. Folgenden Aufbau haben die Dateien (alle in dem selben Ordner:
index.html
main.css
mootools.js
MfG
Daniel
ich habe eine schöne Funktion bei Mootools entdeckt, nur leider weiß ich nicht, wie ich sowas in eine Homepage einbauen kann.
Die Funktion heißt Fx.Slide. (http://demos.mootools.net/Fx.Slide)
Ich habe mal versucht die css, js und php dateien irgendwie hinzubasteln, es wird auch irgendwie angezeigt wie in dem Beispiel, nur leider funktioniert das alles nicht.
Hoffe dass ihr mir vielleicht weiterhelfen könnt. Folgenden Aufbau haben die Dateien (alle in dem selben Ordner:
index.html
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<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>
</body>
</html>main.css
Code:
body {
background-color: white;
color: black;
font-family: "Times New Roman",Times, serif;
padding-left: 11em;
}
#test {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}mootools.js
Code:
//-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();
});MfG
Daniel
