30 days of MooTools is a collection of tutorials to learn to use the MooTools javascrit library, first published in 2008 by ConsiderOpen.
The lessons are actually 23, as they where interrupted after this day.
As the original site is currently offline, the tutorials have been collected using the Wayback Machine to make them available to everyone interested in learning to use MooTools.
The tutorials are based on MooTools 1.2 so some parts could be deprecated and they should be updated and expanded based on the new MooTools versions.
The copyright (and gratitude) for the original lessons is hold by ConsiderOpen.
Idea Paolo Manganiello. Licence CC 3.0.
If you haven’t already, be sure and check out the rest of the Mootools 1.2 tutorials in our 30 days series.
Welcome to day 7 of 30 Days of Mootools. Today we are going to look at how to manipulate styles with Mootools 1.2
Combined with what we have learned in the last few tutorials, this will give you a lot of control over your UI. Dealing with styles is very simple, but there are going to be a few twists today. For example, we are going introduce the idea of a key/value object. We are also going to pass variables outside of the domready, liked we learned how to do in the functions tutorial.
From here on out, the tutorials are going to slowly ramp up in complexity to introduce a few necessary programming concepts. If you are new to JavaScript or learning Mootools for the first time, be sure you understand the previous articles and feel free to ask us any questions you may have.
This function lets you set a style property of an element. We have used this one before in some of the previous examples. All you do is tack .setStyle(); onto the end of your selector and it will change the style property of a single element or an array
//define your selector
//add .setStyle
//define the style property and the value
$('body_wrap').setStyle('background-color', '#eeeeee');
$$('.class_name').setStyle('background-color', '#eeeeee');
<div id="body_wrap">
<div class="class_name"></div>
<div class="class_name"></div>
<div class="class_name"></div>
<div class="class_name"></div>
</div>
Again, this does pretty much what it says. .getStyle(); will return the value of a style property of an element.
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');
If we ran this code on the example above, it would return ‘#eeeeee’ to the variable styleValue.
.setStyles(), as you can imagine, lets you set multiple style properties onto a single element or an array. The syntax for .setStyles(); is a little bit different so that it can allow for multiple style properties.
//start out by creating your selector, then add .setStyles({
$('body_wrap').setStyles({
//the pattern to follow is 'property': 'value',
'width': '1000px',
'height': '1000px',
//IMPORTANT: there is NO COMMA after the last property
//will mess up cross browser if you leave the comma
'background-color': '#eeeeee'
});
Note: You do not actually need the ’single quotes’ around the property selector unless there is a ‘-’ in the property, like in ‘background-color,’ but to keep it simple, its easier to remember to put them on every property selector.
Also Note: There is more flexibility with the property value (like ‘100px’ or ‘#eeeeee’). Aside from strings (just a series of characters, but we will get into that deeper in a later tutorial), you can also pass it numbers without quotes (which will eventually be interpreted as px in most cases) and variables:
//this passes the variable firstBackgroundColor the STRING '#eeeeee'
var firstBackgroundColor = '#eeeeee';
//you can pass a variable to another variable,
//making backgroundColor equal the string '#eeeeee'
var backgroundColor = firstBackgroundColor;
//this passes the variable divWidth the NUMBER 500
var divWidth = 500;
$('body_wrap').setStyles({
//in this case, variables are words without quotes around them
'width': divWidth,
//numbers are, well, numbers without quotes around them
'height': 1000,
//another variable
'background-color': backgroundColor,
//strings are a series of characters inside 'single quotes'
'color': 'black'
});
This lets you get multiple styles in one fell swoop. This works just a little bit different than what we saw above as it holds multiple SETS of data, a key (the property) and a value (the property value). This set of data is called an OBJECT and .getStyles(); makes it very easy to throw multiple styles into these objects and keeps it simple to get them back.
//first define a variable for your object
//next create a selector
//then add .getStyles to your selector
//finally create a comma separated list of style properties
//be sure to keep the properties inside single quotes
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color');
//first we create a new variable to hold the property value
//then we call a particular property by its key, which in this case, is the property name
//put the property name inside of [brackets]
//and be sure to put 'single quotes' around the property key
var bgStyle = bodyStyles['background-color'];
If we have the following styles in our CSS file:
#body_wrap {
width: 1000px;
height: 1000px;
background-color: #eeeeee;
}
then bgStyle will contain the value ‘#eeeeee.’
Note: when you want to get a single property from your object of styles, first state the object variable (in this case, bodyStyles), then use brackets and single quotes (['']), finally place the property key (such as width or background-color). That’s all there is to it.
In this example, we are going to use a few of the methods we learned above to get and set styles. More than the use of style property manipulation, please note the structure itself.
To separate our functions from our domready, we need to pass those functions some variables that are set within the domready event. We accomplish this through adding a parameter to the function inside the domready, then referring to that variable outside of the domready.
Notice that the click events use anonymous functions - this lets us pass the variables from the domready event to the functions that are outside. Don’t worry if this doesn’t make sense on your first read through, the example below should make it more clear.
//here are the functions
//notice that this function has a parameter "bgColor"
//this is passed from within the domready event
var seeBgColor = function(bgColor) {
alert(bgColor);
}
var seeBorderColor = function(borderColor) {
alert(borderColor);
}
//we pass in playDiv giving the function access to the element
//also keeps us from having to use the selector repeatedly
//very useful when dealing with complicated selectors
var seeDivWidth = function(playDiv) {
//we are getting the style again,
//separate from the getStyles we use in the domready
//because we want the current value
//this keeps the width alert accurate
//even when it has been changed after the domready event has passed
var currentDivWidth = playDiv.getStyle('width');
alert(currentDivWidth);
}
var seeDivHeight = function(playDiv) {
var currentDivHeight = playDiv.getStyle('height');
alert(currentDivHeight);
}
var setDivWidth = function(playDiv) {
playDiv.setStyle('width', '50px');
}
var setDivHeight = function(playDiv) {
playDiv.setStyle('height', '50px');
}
//note that this parameter can be named anything at this level
//and it will be passed whatever value/element/what-have-you
//that is placed within the () of the function within the domready
var resetSIze = function(foo) {
foo.setStyles({
'height': 200,
'width': 200
});
}
window.addEvent('domready', function() {
//since we use this selector a lot, it saves us writing time to pass it to a var
var playDiv = $('playstyles');
//here we create an object of several style properties
var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color');
//you can retrieve a style by calling the key and passing the result to a var
var bgColor = bodyStyles['background-color'];
//here we use an anonymous function so we can pass a parameter outside the domready event
$('bgcolor').addEvent('click', function(){
seeBgColor(bgColor);
});
$('border_color').addEvent('click', function(){
//instead of passing the style parameter to a variable,
//you can call it directly here in this alert
seeBorderColor(bodyStyles['border-bottom-color']);
});
$('div_width').addEvent('click', function(){
seeDivWidth(playDiv);
});
$('div_height').addEvent('click', function(){
seeDivHeight(playDiv);
});
$('set_width').addEvent('click', function(){
setDivWidth(playDiv);
});
$('set_height').addEvent('click', function(){
setDivHeight(playDiv);
});
$('reset').addEvent('click', function(){
resetSIze(playDiv);
});
});
Here is the html
<div id="playstyles"> </div> <br /> <button id="bgcolor">See background-color</button> <button id="border_color">See border-bottom-color</button><br /><br /> <button id="div_width">See width</button> <button id="div_height">See height</button><br /><br /> <button id="set_width">Set weight to 50px</button> <button id="set_height">Set height to 50px</button><br /><br /> <button id="reset">Reset size</button>
Here is the css
#playstyles {
width: 200px;
height: 200px;
background-color: #eeeeee;
border: 3px solid #dd97a1;
}
To learn more about styles, take a look over the Element.Style docs.
Check in tomorrow for Day 8 - Input Filtering Part 1 (Numbers).