JavaScript DHTML/Mootools/Slide
Fx.Slide Demo
<!--
MooTools is released under the Open Source MIT license,
which gives you the possibility to use it and modify
it in every circumstance.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h3.section {
margin-top: 1em;
}
#vertical_slide, #horizontal_slide {
background: #D0C8C8;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
}
div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}
</style>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent("domready", function() {
var status = {
"true": "open",
"false": "close"
};
//-vertical
var myVerticalSlide = new Fx.Slide("vertical_slide");
$("v_slidein").addEvent("click", function(e){
e.stop();
myVerticalSlide.slideIn();
});
$("v_slideout").addEvent("click", function(e){
e.stop();
myVerticalSlide.slideOut();
});
$("v_toggle").addEvent("click", function(e){
e.stop();
myVerticalSlide.toggle();
});
$("v_hide").addEvent("click", function(e){
e.stop();
myVerticalSlide.hide();
$("vertical_status").set("html", status[myVerticalSlide.open]);
});
$("v_show").addEvent("click", function(e){
e.stop();
myVerticalSlide.show();
$("vertical_status").set("html", status[myVerticalSlide.open]);
});
// When Vertical Slide ends its transition, we check for its status
// note that complete will not affect "hide" and "show" methods
myVerticalSlide.addEvent("complete", function() {
$("vertical_status").set("html", status[myVerticalSlide.open]);
});
//--horizontal
var myHorizontalSlide = new Fx.Slide("horizontal_slide", {mode: "horizontal"});
$("h_slidein").addEvent("click", function(e){
e.stop();
myHorizontalSlide.slideIn();
});
$("h_slideout").addEvent("click", function(e){
e.stop();
myHorizontalSlide.slideOut();
});
$("h_toggle").addEvent("click", function(e){
e.stop();
myHorizontalSlide.toggle();
});
$("h_hide").addEvent("click", function(e){
e.stop();
myHorizontalSlide.hide();
$("horizontal_status").set("html", status[myHorizontalSlide.open]);
});
$("h_show").addEvent("click", function(e){
e.stop();
myHorizontalSlide.show();
$("horizontal_status").set("html", status[myHorizontalSlide.open]);
});
// When Horizontal Slide ends its transition, we check for its status
// note that complete will not affect "hide" and "show" methods
myHorizontalSlide.addEvent("complete", function() {
$("horizontal_status").set("html", status[myHorizontalSlide.open]);
});
});
</script>
<title>Fx.Slide Demo</title>
</head>
<body>
<h1>Fx.Slide</h1>
<h2>Introduction</h2>
<p>
Here goes a nice introduction
</p>
<h3 class="section">Vertical</h3>
<div class="marginbottom">
<a id="v_slideout" href="#">slide out</a>
|
<a id="v_slidein" href="#">slide in</a>
|
<a id="v_toggle" href="#">toggle</a>
|
<a id="v_hide" href="#">hide</a>
|
<a id="v_show" href="#">show</a>
| <strong>status</strong>: <span id="vertical_status">open</span>
</div>
<div id="vertical_slide">
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">Horizontal</h3>
<div class="marginbottom">
<a id="h_slideout" href="#">slide out</a>
|
<a id="h_slidein" href="#">slide in</a>
|
<a id="h_toggle" href="#">toggle</a>
|
<a id="h_hide" href="#">hide</a>
|
<a id="h_show" href="#">show</a>
| <strong>status</strong>: <span id="horizontal_status">open</span>
</div>
<div id="horizontal_slide">
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>
The Slider-Plugin allows you to drag&drop a knob inside an element to set a value within a certain range
<!--
MooTools is released under the Open Source MIT license,
which gives you the possibility to use it and modify
it in every circumstance.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div.slider {
width: 200px;
height: 16px;
background: #eee;
}
div.slider div.knob {
background: #000;
width: 16px;
height: 16px;
}
div#fontSize {
height: 50px;
}
div.advanced {
width: 400px;
margin: 5px 0;
background: url(images/slider.png) 0 center repeat-x;
}
div.advanced div.knob {
background: no-repeat center center;
cursor: pointer;
}
div#red div.knob {
background-image: url(images/red.png);
}
div#green div.knob {
background-image: url(images/green.png);
}
div#blue div.knob {
background-image: url(images/blue.png);
}
</style>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent("domready", function(){
// First Example
var el = $("myElement"),
font = $("fontSize");
// Create the new slider instance
new Slider(el, el.getElement(".knob"), {
steps: 35, // There are 35 steps
range: [8], // Minimum value is 8
onChange: function(value){
// Everytime the value changes, we change the font of an element
font.setStyle("font-size", value);
}
}).set(font.getStyle("font-size").toInt());
// Second Example
var el = $("setColor"), color = [0, 0, 0];
var updateColor = function(){
// Sets the color of the output text and its text to the current color
el.setStyle("color", color).set("text", color.rgbToHex());
};
// We call that function to initially set the color output
updateColor();
$$("div.slider.advanced").each(function(el, i){
var slider = new Slider(el, el.getElement(".knob"), {
steps: 255, // Steps from 0 to 255
wheel: true, // Using the mousewheel is possible too
onChange: function(){
// Based on the Slider values set an RGB value in the color array
color[i] = this.step;
// and update the output to the new value
updateColor();
}
}).set(0);
});
});
</script>
<title>Slider Demo</title>
</head>
<body>
<h1>Slider</h1>
<h2>Introduction</h2>
<p>
The Slider-Plugin allows you to drag&drop a knob inside an element to set
a value within a certain range.
</p>
<div id="myElement" class="slider">
<div class="knob">
</div>
</div>
<div id="fontSize">
Change the value, to change the fontsize.
</div>
<br/>
<br/>
<div class="help">
<strong>Why?</strong> This is a nice User-Interface-Element to not just let the user set a value
by typing into an input field but limiting the range without further needs to check
the user input (on clientside). With callbacks you can manipulate anything after changing the value.
</div>
<h2>Advanced Example</h2>
<p>
With the Slider it is damn easy to create stuff like an RGB-Color Selector which actually looks good.
</p>
<div id="red" class="slider advanced">
<div class="knob">
</div>
</div>
<div id="green" class="slider advanced">
<div class="knob">
</div>
</div>
<div id="blue" class="slider advanced">
<div class="knob">
</div>
</div>
<span class="b">Selected color: </span>
<span id="setColor"></span>
</body>
</html>