This week I found some interesting fresh resources for web developers I want share with you. This list includes an awesome MooTools slider, a free on-line service for cross-browser compatibility testing, a jquery plug-in to implement a notification system (for example Facebook-like) and other interesting links. Take a look and add a comment to suggest other resources.
SlideItMoo 1.1
SlideItMoo is a great slider for MooTools that supports: continuous navigation, elements selection based on CSS selector, direction control (-1: enter from left; 1: enter from right), mouse wheel navigation, effect duration as parameter (when autoslide is enabled, the duration between slides is the sum of the effect duration and the slide duration )
Beautiful jQuery Slider
This tutorial explains how to develop a beautiful jQuery slider. The result is really awesome.
Adobe BrowserLab
Adobe BrowserLab is the perfect on-line solution for cross-browser compatibility testing. It supports, Internet Explorer 6-7, Firefox 2-3 on Windows XP and OS X. It's very useful and fast to rendering pages.
Password Strength
Password Strength is a jQuery plug-in that tries to calculate how many possibilities the hacker needs to try to guess your password.
Growl for jQuery
Growl (for the net & jQuery) is a simple notification system inspired by Growl for the Mac OS X. You can use it to implement a notification system Facebook like.
Mootools Link Tweaker Class
Link Tweaker is a tiny Mootools class to add distinct styles (of your choosing) to external links and/or various types of file download links.
If you want to suggest a new resource please leave a comment, thanks!
- 10 Useful resources for web designers and developers
- Practical solutions to hyphenate text on web pages
- 10 Useful code snippets for web developers
- Twitter API: How to create your own Monitter with PHP and jQuery
- Ultra versatile slider for websites
- Simple images slider to create Flickr-like slideshows
SlideItMoo 1.1
SlideItMoo is a great slider for MooTools that supports: continuous navigation, elements selection based on CSS selector, direction control (-1: enter from left; 1: enter from right), mouse wheel navigation, effect duration as parameter (when autoslide is enabled, the duration between slides is the sum of the effect duration and the slide duration )
Beautiful jQuery Slider
This tutorial explains how to develop a beautiful jQuery slider. The result is really awesome.
Adobe BrowserLab
Adobe BrowserLab is the perfect on-line solution for cross-browser compatibility testing. It supports, Internet Explorer 6-7, Firefox 2-3 on Windows XP and OS X. It's very useful and fast to rendering pages.
Password Strength
Password Strength is a jQuery plug-in that tries to calculate how many possibilities the hacker needs to try to guess your password.
Growl for jQuery
Growl (for the net & jQuery) is a simple notification system inspired by Growl for the Mac OS X. You can use it to implement a notification system Facebook like.
Mootools Link Tweaker Class
Link Tweaker is a tiny Mootools class to add distinct styles (of your choosing) to external links and/or various types of file download links.
If you want to suggest a new resource please leave a comment, thanks!
Related Post
- Interesting Code Highlighters for blogs and websites- 10 Useful resources for web designers and developers
- Practical solutions to hyphenate text on web pages
- 10 Useful code snippets for web developers
- Twitter API: How to create your own Monitter with PHP and jQuery
- Ultra versatile slider for websites
- Simple images slider to create Flickr-like slideshows
Today I want to present you a selection of some useful resources for web designers and developers. This list contains in particular some awesome fonts, a simple PHP Content Management System, a JavaScript Cart, a PHP application for job boards, a weekly calendar (Google Calendar like, made with jQuery), an open source knowledge base application and interesting links with jQuery and MooTools plugins.1. 52 Really High Quality Free Fonts For Modern And Cool Design
This post contains a great collection of awesome fonts
2. Beautiful New Free Fonts For Your Designs
In this collection Smashing Magazine presents high-quality fonts: Calluna, Andika Basic, Mentone, Sovereign Regular, Medio, Tiresias Infopoint and many other high-quality free fonts.
3. GetSimple CMS
GetSimple is a powerful and very simple CMS that has everything your client needs, and nothing a CMS doesn't.
4. SimpleCart(js)
No databases, no programming, no headaches. SimpleCart(js) is a simple javascript shopping cart in under 20kb that you can setup in minutes. It's lightweight, fast, simple to use, and completely customizable. All you need to know is basic HTML.5. jQuery Week Calendar
The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.
6. JoobsBox
JoobsBox is the most flexible software for job boards, allowing community expand it to unlimited needs. Plugins and Themes allows you to extend JoobsBox to do almost anything with your job board.7. jCryption
In short words jCryption is a javascript HTML-Form encryption plugin, which encrypts the POST/GET-Data that will be sent when you submit a form.
8. 68Kb Knowledge Base Software
68KB is an open source PHP MySQL driven knowledge base script. Built with you in mind to make it easy to configure and setup.
9. Moowheel
The purpose Moowheel is to provide a unique and elegant way to visualize data using Javascript and the <canvas> object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise. The script is licensed under an MIT-style license.10. SlideItMoo
SlideItMoo is a simple MooTools plugin to display thumbnail images of your gallery. It can slide either by mouse wheel scroll or by clicking the arrows on the left and/or right.
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
Yesterday my friend Nick asked to me some suggestion to design an original weekly timeline for a web application which he is developing. I suggested to use the following animated timeline which I implemented reusing the code of my versatile slider and now I want to share with you.
This tutorial explains how to design an elegant and animated weekly timeline, with daily annotations, you can customize and reuse quickly in your web projects. This is the result:
Take a look at the live preview and download the source code.
Download this tutorial Live Preview
Add this code:
...then add a new layer slider-button to create two buttons to move, to the left and right, the timeline contained into the div slider-stage:
Now, take a look at the timeline structure. It's exactly the same I used in my slider (for more detailed information read this post):
Each <li> element is "a day". Copy this code into the slider-stage DIV:
Now, for each day, you have to create this structure:
I used some CSS classes and <p> tag for daily "annotations" and this is the code:
You can use PHP or another server-side language to get dinamically annotations regarding a specific date.
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):
That's all. Download the source code or take a look at the live preview. Add a comment for suggestions or other information.
Download this tutorial Live Preview
This tutorial explains how to design an elegant and animated weekly timeline, with daily annotations, you can customize and reuse quickly in your web projects. This is the result:
Take a look at the live preview and download the source code.
Download this tutorial Live PreviewHTML structure
I reused the same structure of my versatile slider: a layer (DIV) and a simple list (UL). Create a layer which is the container of the timeline:
<div id="slider-stage">
</div>
</div>
...then add a new layer slider-button to create two buttons to move, to the left and right, the timeline contained into the div slider-stage:
Copy and paste this code into your page after the div slider-stage:
<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>
Now, take a look at the timeline structure. It's exactly the same I used in my slider (for more detailed information read this post):
Each <li> element is "a day". Copy this code into the slider-stage DIV:
<div id="slider-stage">
<ul id="myList">
</div>
<ul id="myList">
<li > </li>
<li > </li>
<li > </li>
<li > </li>
</ul><li > </li>
<li > </li>
<li > </li>
</div>
Now, for each day, you have to create this structure:
I used some CSS classes and <p> tag for daily "annotations" and this is the code:
<li>
<div class="day">1
<span class="day-text">Monday</span>
</div>
<div class="month">February</div>
<div class="year">2009</div>
<p>Dinner with Sara</p>
</li><span class="day-text">Monday</span>
</div>
<div class="month">February</div>
<div class="year">2009</div>
<p>Dinner with Sara</p>
You can use PHP or another server-side language to get dinamically annotations regarding a specific date.
JavaScript Code
Now, take a look at this simple script to enable slider features I wrote in this post. 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 = 214;
var maxRightIncrement = increment*(-6);
// FX var
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
});
</script>// Declaring increment vars
var totIncrement = 0;
var increment = 214;
var maxRightIncrement = increment*(-6);
// FX var
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 1000,
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);
}
}
});
That's all. Download the source code or take a look at the live preview. Add a comment for suggestions or other information.
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!