In this post I want to suggest you three simple and useful ways to hyphenate text on your web pages using JavaScript or PHP. If you take a look at W3.org documentation you can find this explanation about hyphenation:
"In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur. Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character. For operations such as searching and sorting, the soft hyphen should always be ignored."
To hyphenate text I found the following practical solutions:
Hyphenator.js
This script automatically hyphenates texts on websites and runs on any modern browser that supports JavaScript and the soft hyphen (­). It runs on the client in order that the HTML source of the website may be served clean and svelte and that it can respond to text resizings by the user. The result is really great:
The usage of this script is really simple. You have to include the script into your pages in the <head> tag:
...then you have to invoke the script adding this code after the previous code:
...and use this HTML code to active hyphenation:
Take a look at this example for a live preview.
You can also choose the language changing the property "lang" (actually the script support 16 languages, for the full list take a look here).
phpHyphenator
The phpHyphenator is a PHP port of the JavaScript hyphenator.js by Mathias Nater for automatic hyphenation in web pages using soft hyphens. The hyphenation algorithm needs large pattern files for doing the hyphenation and and using JavaScript can slow down page loading. PHP instead is doing hyphenation directly on the server wihtout sending the pattern files to the client.
Online Soft Hyphenation Generator
You can also try this interesting on-line HTML Soft Hyphenation Generator a configurable automatic hyphenation (soft or hard) generator for HTML text based on phpHypenator.
Any suggestion about this topic? Please leave a comment, thanks!
"In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur. Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character. For operations such as searching and sorting, the soft hyphen should always be ignored."
To hyphenate text I found the following practical solutions:
Hyphenator.js
This script automatically hyphenates texts on websites and runs on any modern browser that supports JavaScript and the soft hyphen (­). It runs on the client in order that the HTML source of the website may be served clean and svelte and that it can respond to text resizings by the user. The result is really great:
The usage of this script is really simple. You have to include the script into your pages in the <head> tag:
<script src="hyphenator.js" type="text/javascript"></script>
...then you have to invoke the script adding this code after the previous code:
<script type="text/javascript">
Hyphenator.run();
</script>
Hyphenator.run();
</script>
...and use this HTML code to active hyphenation:
<p class="hyphenate text" lang="en">
Your text here...
</p>
Your text here...
</p>
Take a look at this example for a live preview.
You can also choose the language changing the property "lang" (actually the script support 16 languages, for the full list take a look here).
phpHyphenator
The phpHyphenator is a PHP port of the JavaScript hyphenator.js by Mathias Nater for automatic hyphenation in web pages using soft hyphens. The hyphenation algorithm needs large pattern files for doing the hyphenation and and using JavaScript can slow down page loading. PHP instead is doing hyphenation directly on the server wihtout sending the pattern files to the client.Online Soft Hyphenation Generator
You can also try this interesting on-line HTML Soft Hyphenation Generator a configurable automatic hyphenation (soft or hard) generator for HTML text based on phpHypenator.
Any suggestion about this topic? Please leave a comment, thanks!
In the last weeks I frequently received a question about how to use CSS3 border-radius property to draw HTML elements with rounded corners in Internet Explorer. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer.So to draw rounded corners in IE you have to use some trick, for example using CSS classes with a background image (take a look at this post).
The simpler and quick solution I know to draw rounded corners in every browser is to use a mix of CSS3 and JavaScript. CurvyCorners is a free JavaScript library for creating gorgeous rounded corners for HTML elements. The final result looks like this:
The big advantage of this script is that lets render rounded borders in Safari, Chrome and Mozilla (which support rounded borders via -webkit-border-radius and -moz-border-radius) natively with CSS3 property and in IE and Opera with JavaScript.
The only thing you have to do is to include curvycorners.js into the <head> tag of your page:
<script type="text/javascript" src="curvycorners.js"></script>
Then you have to write a CSS class like this:
.roundedCorners{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
At this point add the following code into the <head> of your page, after the previous CSS code:
<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
</script>function initCorners() {
var setting = {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}
tl, tr, bl, br are: top-left, top-right, bottom-left, bottom-right borders.
If you have different CSS classes (ex. roundedCorners, roundedCorners_1, roundedCorners_2) you can apply them changing the previous code in this way:
...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...
Now if you want to apply rounded corners to a DIV element use this code:
<div class="roundedCorners"> </div>
This is the result in every browser:
I think this is actually the simpler and quick solution to implement rounded corners in every browser. Ok... and what's if JavaScript is disabled? Sincerly I think this case is not so frequent... but if you don't want to use JavaScript, the most realiable solution is to use CSS classes with background images. Any suggestion about this topic? Please leave a comment, thanks!
Download the source code here:
A frequent question I receive from my readers is about how to implement a simple script to drag elements in a web page. So in this post I want to illustrate the simplest method I know and use to drag everything in HTML pages, using just three rows of Javascript code.
In this post I provided a very basic script quick to reuse and customize in your web projects (in the live preview I added some little additional features respect the content of this tutorial). This is the result:
Download this tutorial 
Live preview
HTML code: HTML code is very simple. You have to add a main layer with an ID (I used "draggables") and some DIV layers inside that layer. In this way all layers contained inside the layer "draggables" will be draggable when you select them. This is the structure:
Copy and paste this code in your page:
JavaScript code: Now take a look at this simple code which enable drag features. Before all add a link to MooTools farmework in the <head> tag of the page:
Now, copy and paste this simple unobtrusive code:
Simple no? Just in three rows! In this way when you click on a div element contained inside the layer #draggables it will be draggable. In this tutorial I used DIV layers for my draggable elements but you can use every tag you want (p, h1, h2, ul, li....). The only thing you have to change is HTML code and DIV - with the tag you use (p, h1, h2, ul, li....) - in this line:
You can also add a custom style to your draggable elements using a simple CSS class I called "drag". For example, change the previous code HTML with the following:
...and CSS code could be something like this:
That's all! Try it and download the source code ready to use in your porject.
Download this tutorial Live preview
In this post I provided a very basic script quick to reuse and customize in your web projects (in the live preview I added some little additional features respect the content of this tutorial). This is the result:
Download this tutorial 
Live previewHTML code: HTML code is very simple. You have to add a main layer with an ID (I used "draggables") and some DIV layers inside that layer. In this way all layers contained inside the layer "draggables" will be draggable when you select them. This is the structure:
Copy and paste this code in your page:
<div id="draggables">
<div>Some content Here...</div>
<div>Some content Here...</div>
<div>Some content Here...</div>
</div>
<div>Some content Here...</div>
<div>Some content Here...</div>
<div>Some content Here...</div>
</div>
JavaScript code: Now take a look at this simple code which enable drag features. Before all add a link to MooTools farmework in the <head> tag of the page:
<script type="text/javascript" src="mootools.svn.js">
</script>
</script>
Now, copy and paste this simple unobtrusive code:
<script type="text/javascript">
window.addEvent('domready', function(){
$('#draggables div').each(function(drag){
new Drag.Move(drag);});
});
</script>$('#draggables div').each(function(drag){
new Drag.Move(drag);});
});
Simple no? Just in three rows! In this way when you click on a div element contained inside the layer #draggables it will be draggable. In this tutorial I used DIV layers for my draggable elements but you can use every tag you want (p, h1, h2, ul, li....). The only thing you have to change is HTML code and DIV - with the tag you use (p, h1, h2, ul, li....) - in this line:
$('#draggables div').each(function(drag)
You can also add a custom style to your draggable elements using a simple CSS class I called "drag". For example, change the previous code HTML with the following:
<div id="draggables">
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
</div>
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
</div>
...and CSS code could be something like this:
.drag{
border:solid 6px #DEDEDE;
background:#FFF;
width:200px;
height:150px;
...
}background:#FFF;
width:200px;
height:150px;
...
That's all! Try it and download the source code ready to use in your porject.
Download this tutorial Live preview
After my previous post about the Art of reusing code in your web projects I received many messages which asked to me to release an improved version of the slider I illustrated in the example number 3 of that post.
So, in this tutorial I'll explain a simple step-by-step way to implement an ultra versatile slider with horizontal scrolling and animated effects using MooTools. This is a basic proposal you can improve how you prefer. I included a link to the source code you can customize and reuse quickly in your web projects. The result is something like this:
Take a look at the live preview and download the source code.
Download the source code Live preview
Add this code:
Simply, no? Now you have to add some elements (boxes) into that container using a simple <ul> list and some <li> elements. You have to set #slider-stage width to a certain value (for example 600px) and use owerflow property to create a "mask" like the following:
In this way you have a visible area and an invisible area. To set overflow property take a look at the next step which defines CSS properties. So...this is the code for the list:
You can add all boxes you want simply adding a new <li> element in the previous code. Within each <li> element you can add all you want (text, images, videos...)
Now, after the previous code, add buttons to slide content to left or right using this code:
Make attention do not change the name of buttons ID property (previous and next)!
If you have 3 visible boxes in your slider to set #slider-stage width you have to consider the box widht, padding and margin-left. So, #slider-stage width will be:
In the following case #slider-stage width is 632px (200*3 + 4*2*3 + 4*2):
Now, copy and paste this code below the previous line of code to enable scrolling features (you can also copy this file in an external Js file and import it into the page):
If you have some familiarity with MooTools and JavaScript it will be very simple to understand:
...is the horizontal increment when you click the button previous or next. It's equal to the width of <li> element (200px) + padding (left + right = 4px+4px = 8px) + margin-right (4px).
...is the maximum increment from left to right. Why (-6)? Because I added 9 elements into the slider; default view display 3 elements each time; so to reach the element 9 you have to press the button "next" 6 times! Naturally you have to change this value if you change the number of <li> elements.
It's all! Take a look at the live preview or download the source code ready to use in your web porojects! Add a comment or send me a message if you have problems to implement it.
Download the source code Live preview
So, in this tutorial I'll explain a simple step-by-step way to implement an ultra versatile slider with horizontal scrolling and animated effects using MooTools. This is a basic proposal you can improve how you prefer. I included a link to the source code you can customize and reuse quickly in your web projects. The result is something like this:
Take a look at the live preview and download the source code.
Download the source code Live previewHTML structure
HTML structure is very simple. We need a layer (DIV) and a simple list (UL). First step:create a layer which is the container of slider content:
<div id="slider-stage">
</div>
</div>
Simply, no? Now you have to add some elements (boxes) into that container using a simple <ul> list and some <li> elements. You have to set #slider-stage width to a certain value (for example 600px) and use owerflow property to create a "mask" like the following:
In this way you have a visible area and an invisible area. To set overflow property take a look at the next step which defines CSS properties. So...this is the code for the list:
<div id="slider-stage">
<ul id="myList">
</div>
<ul id="myList">
<li >Box 1</li>
<li >Box 2</li>
<li >Box 3</li>
<li >Box 4</li>
<li >Box 5</li>
<li >Box 6</li>
</ul><li >Box 2</li>
<li >Box 3</li>
<li >Box 4</li>
<li >Box 5</li>
<li >Box 6</li>
</div>
You can add all boxes you want simply adding a new <li> element in the previous code. Within each <li> element you can add all you want (text, images, videos...)
Now, after the previous code, add buttons to slide content to left or right using this code:
<div id="slider-buttons">
<a href="#" id="previous">Previous</a> | <a href="#" id="next">Next</a>
</div>
<a href="#" id="previous">Previous</a> | <a href="#" id="next">Next</a>
</div>
Make attention do not change the name of buttons ID property (previous and next)!
CSS Code
Now take a look at CSS code. How I said you have to use overflow property to create a "layer mask" and hide all content (list elements) external to the container #slider-stage. More over take a mind this in order to set #slider-stage width:
If you have 3 visible boxes in your slider to set #slider-stage width you have to consider the box widht, padding and margin-left. So, #slider-stage width will be:
(box width * 3) + (box padding*3) + (box margin-right *2)
In the following case #slider-stage width is 632px (200*3 + 4*2*3 + 4*2):
#slider-stage{
width:632px;
overflow:auto;
overflow-x:hidden;
overflow-y:hidden;
height:200px;
margin:0 auto;
}overflow:auto;
overflow-x:hidden;
overflow-y:hidden;
height:200px;
margin:0 auto;
#slider-list{
#slider-list li{
width:2000px;
border:0;
margin:0;
padding:0;
left:400px;
}border:0;
margin:0;
padding:0;
left:400px;
#slider-list li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-right:4px;
padding:4px;
background:#DEDEDE;
float:left;
width:200px;
height:200px;
}
margin:0;
padding:0;
border:0;
margin-right:4px;
padding:4px;
background:#DEDEDE;
float:left;
width:200px;
height:200px;
}
JavaScript Code
Now, take a look at this simple script to enable slider features. I used MooTools to implement this script so, you have to add this link into the <head> tag of the page where you want to use this slider:<script type="text/javascript" src="mootools.svn.js">
</script>
</script>
Now, copy and paste this code below the previous line of code to enable scrolling features (you can also copy this file in an external Js file and import it into the page):
<script type="text/javascript">
window.addEvent('domready', function(){
// Declaring increment vars
var totIncrement = 0;
var increment = 212;
var maxRightIncrement = increment*(-6);
// FX var
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 500,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
});
</script>// Declaring increment vars
var totIncrement = 0;
var increment = 212;
var maxRightIncrement = increment*(-6);
// FX var
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 500,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
// Previous Button
$('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement + increment;
fx.stop()
fx.start(totIncrement);
}
});
// Next Button
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement - increment;
fx.stop()
fx.start(totIncrement);
}
}
}) $('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement + increment;
fx.stop()
fx.start(totIncrement);
}
});
// Next Button
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement - increment;
fx.stop()
fx.start(totIncrement);
}
}
});
If you have some familiarity with MooTools and JavaScript it will be very simple to understand:
var increment = 212;
...is the horizontal increment when you click the button previous or next. It's equal to the width of <li> element (200px) + padding (left + right = 4px+4px = 8px) + margin-right (4px).
var maxRightIncrement = increment*(-6);
...is the maximum increment from left to right. Why (-6)? Because I added 9 elements into the slider; default view display 3 elements each time; so to reach the element 9 you have to press the button "next" 6 times! Naturally you have to change this value if you change the number of <li> elements.
It's all! Take a look at the live preview or download the source code ready to use in your web porojects! Add a comment or send me a message if you have problems to implement it.
Download the source code Live preview
In this tutorial I explain how to design a vertical menu which use motion and change opacity effect. I wrote this post to show a better use of elastic effect which I illustrated in my latest post.
The effect I want to realize is the following. I have a vertical menu with some links. On "mouse over" the select link goes to the right with an animated elastic effect and change its opacity. When you release the element, it goes in its initial position with original opacity value. The result is something like this:
Take a look at the live preview to see this script in action.
Download source code Live Preview
Now, copy and paste this code below the previous line of code in the <head> tag of the page (if you prefer you can also copy this code in a separated .js file and import it in your page):
It's all! Download the source code and send your suggests!
Download source code Live Preview
The effect I want to realize is the following. I have a vertical menu with some links. On "mouse over" the select link goes to the right with an animated elastic effect and change its opacity. When you release the element, it goes in its initial position with original opacity value. The result is something like this:
Take a look at the live preview to see this script in action.
Download source code Live Preview HTML code
HTML code is very simple. We have a list (<ul>) with some <li> elements with a progressive ID (l1, l2, l3, l4...):<ul id="menu">
<li id="l1"><a href="#">About</a></li>
<li id="l2"><a href="#">My Facebook Profile</a></li>
<li id="l3"><a href="#">Tutorials</a></li>
<li id="l4"><a href="#">My Book</a></li>
<li id="l5"><a href="#">Download</a></li>
<li id="l6"><a href="#">Contact</a></li>
</ul><li id="l2"><a href="#">My Facebook Profile</a></li>
<li id="l3"><a href="#">Tutorials</a></li>
<li id="l4"><a href="#">My Book</a></li>
<li id="l5"><a href="#">Download</a></li>
<li id="l6"><a href="#">Contact</a></li>
CSS code
I used this simple CSS code to set the look of links but you can customize it how your prefer:#menu li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-bottom:2px;
}
#menu li a{display:block;
padding:4px;
background:#DEDEDE;
text-decoration:none;
}
list-style:none;
margin:0;
padding:0;
border:0;
margin-bottom:2px;
}
#menu li a{display:block;
padding:4px;
background:#DEDEDE;
text-decoration:none;
}
JavaScript code
In order to obtain our effects (elastic motion + change opacity) I used MooTools framework and some lines of Js code. In the <head> tag of the page add a link to MooTools:<script type="text/javascript" src="mootools.svn.js"> </script>
Now, copy and paste this code below the previous line of code in the <head> tag of the page (if you prefer you can also copy this code in a separated .js file and import it in your page):
<script type="text/javascript">
window.addEvent('domready', function(){
$('#container div').each(function(item){
var o = item.id
// FX motion with elastic effect
var fx-motion = new Fx.Style(o, 'margin-top', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
// FX opacity effect
var fx-opacity = new Fx.Style(o, 'opacity', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
})
});
</script>$('#container div').each(function(item){
var o = item.id
// FX motion with elastic effect
var fx-motion = new Fx.Style(o, 'margin-top', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
// FX opacity effect
var fx-opacity = new Fx.Style(o, 'opacity', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
item.addEvents({
'mouseenter' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0,100);
fx-opacity.start(0.5);
},
'mouseleave' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0);
fx-opacity.start(1);
}
}); 'mouseenter' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0,100);
fx-opacity.start(0.5);
},
'mouseleave' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0);
fx-opacity.start(1);
}
})
});
It's all! Download the source code and send your suggests!
Download source code Live Preview Related Post
Super elastic effect to design high impact web menu
This tutorial explais how to design an high impact elastic effect to make original web menu using some lines of Javascript code and MooTools framework. The effect is simple to develope and reuse in your web projects changing only HTML code and CSS. Take a look!
The effect I want to realize is the following. I have a "layer cloud" with some layer overlapped to the others. On "mouse over" the select layer goes down with a nice animation effect and when you release the element this goes up with an elastic effect:
Take a look at this live preview to see this script in action.
Download source code Live Preview
The result is something like this, a "layer cloud" with some layer overlapped to others:
You can add other overlapped layers simply adding new <div> elements in step (1) with the related CSS stlye in step 2. To overlap layer I use CSS properties "position:absolute" and "z-index" for each element.
No fear... it's very simple! In the <head> tag of the page add a link to MooTools:
Now, copy and paste this code below the previous line of code in the <head> tag of the page (if you prefer you can also copy this code in a separated .js file and import it in your page):
In this code I used a MooTools basic knowledge. In the past week I already dedicated several lessons about that. I suggest you to take a look at these post:
Download source code Live Preview
It's all! Do you have some suggest? Add a comment!
The effect I want to realize is the following. I have a "layer cloud" with some layer overlapped to the others. On "mouse over" the select layer goes down with a nice animation effect and when you release the element this goes up with an elastic effect:
Take a look at this live preview to see this script in action.
Download source code Live Preview1. HTML code
Create a layer which contains all elements in the "cloud" (in this case I used DIV elements):<div id="container">
<div id="contact">This is the layer about me.</div>
<div id="about">Contact me? <a href="mailto:myemail@email.com">My Email</a></div>
<div id="profile">This is my <a href="http://www.9lessons.org">website</a></div>
</div><div id="about">Contact me? <a href="mailto:myemail@email.com">My Email</a></div>
<div id="profile">This is my <a href="http://www.9lessons.org">website</a></div>
2. CSS Code
Use CSS to stylize previous elements how you prefer. In this tutorial I used this CSS code:#about {
width: 200px;
padding: 8px;
background: #DEDEDE;
color: #333;
position: absolute;
z-index: 1;
left: 31px;
top: 66px;
border:solid 4px #CCC;
}
#about {
width: 200px;
padding: 8px;
background: #DEDEDE;
color: #333;
position: absolute;
z-index: 1;
left: 80px;
top: 37px;
border:solid 4px #CCC;
}
...
width: 200px;
padding: 8px;
background: #DEDEDE;
color: #333;
position: absolute;
z-index: 1;
left: 31px;
top: 66px;
border:solid 4px #CCC;
}
#about {
width: 200px;
padding: 8px;
background: #DEDEDE;
color: #333;
position: absolute;
z-index: 1;
left: 80px;
top: 37px;
border:solid 4px #CCC;
}
...
The result is something like this, a "layer cloud" with some layer overlapped to others:
You can add other overlapped layers simply adding new <div> elements in step (1) with the related CSS stlye in step 2. To overlap layer I use CSS properties "position:absolute" and "z-index" for each element.
3. JavaScript code
In order to obtain our elastic effect I used MooTools framework and some lines of Js code.No fear... it's very simple! In the <head> tag of the page add a link to MooTools:
<script type="text/javascript" src="mootools.svn.js"> </script>
Now, copy and paste this code below the previous line of code in the <head> tag of the page (if you prefer you can also copy this code in a separated .js file and import it in your page):
<script type="text/javascript">
window.addEvent('domready', function(){
var zindex = 2;
$('#container div').each(function(item){
var o = item.id
var fx = new Fx.Style(o, 'margin-top', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
})
});
</script>var zindex = 2;
$('#container div').each(function(item){
var o = item.id
var fx = new Fx.Style(o, 'margin-top', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
item.addEvents({
'mouseenter' : function(e){
fx.stop()
fx.start(0,100);
zindex = zindex + 1;
$(o).setStyle('z-index', zindex)
},
'mouseleave' : function(e){
fx.stop()
fx.start(0);
zindex = zindex - 1;
$(o).setStyle('z-index', zindex)
}
}); 'mouseenter' : function(e){
fx.stop()
fx.start(0,100);
zindex = zindex + 1;
$(o).setStyle('z-index', zindex)
},
'mouseleave' : function(e){
fx.stop()
fx.start(0);
zindex = zindex - 1;
$(o).setStyle('z-index', zindex)
}
})
});
In this code I used a MooTools basic knowledge. In the past week I already dedicated several lessons about that. I suggest you to take a look at these post:
- Lesson 1 - Basic Tips for Web Designer
- Lesson 2 - Get elements ID using unobtrusive code
- Lesson 3 - Interaction with Forms
Download source code Live PreviewIt's all! Do you have some suggest? Add a comment!