Fresh resources for web developers you can't miss

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!

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

Read More

10 Useful resources for web designers and developers

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.

Read More

Ultra small code to drag everything in HTML pages

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:

<div id="draggables">
<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>

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>

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>

...and CSS code could be something like this:

.drag{

border:solid 6px #DEDEDE;
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

Read More

Elegant animated weekly timeline for websites

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

HTML 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:

Add this code:

<div id="slider-stage">
</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>

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">

<li > </li>
<li > </li>
<li > </li>
<li > </li>

</ul>
</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>

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>

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
});

// 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);
}
}

})
});

</script>

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

Read More

Ultra versatile slider for websites

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

HTML 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:

Add this code:

<div id="slider-stage">
</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">

<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>
</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&gt;
</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;

}

#slider-list{

width:2000px;
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;
}

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>

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
});

// 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);
}
}

})
});

</script>

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

Read More

Nice vertical menu with motion and opacity effect

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

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>

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;
}

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
});

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);
}

});
})
});

</script>

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

Read More

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

1. 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://woork.blogspot.com">website</a></div>

</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;
}
...

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
});

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)
}

});
})
});

</script>

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 Preview

It's all! Do you have some suggest? Add a comment!

Read More

Simple ul list with a nice slide-out effect for <li> elements

In the past weeks some readers of this blog asked to me what's a simple way to implement an animated "disappear" effect (using unobtrusive JavaScript code) for an element of a list when an user clicks on a link contained into a <li> element of that list.

I think a very simple way to do that is using MooTools slideOut() effect. This tutorial explains how to implement that using "five" lines of JavaScript code.

Download source code Live Preview

Step 1: Include MooTools framework

First, you may download the latest version of MooTools and add a link to the framework in the tag <head> of the page:

<script type="text/javascript" src="mootools.js"></script>

Step 2: HTML code

Image to implement a simple list of products and for each product into that list add a link "Hide":

<ul id="myList">

<li id="l1">Playstation | <a href="#">Hide</a></li>
<li id="l2">iPod Touch | <a href="#">Hide</a></li>
<li id="l3">XBOX 360 | <a href="#">Hide</a></li>
<li id="l4">Nokia N97| <a href="#">Hide</a></li>
<li id="l5">Dell Inspiron | <a href="#">Hide</a></li>

</ul>

The result is something like this:

How you can see, we have a products list with ID="myList" and some <li> elements with a progressive ID: l1, l2, l3, l5, l5. We want to obtain this effect: when an user clicks on a link ("Hide"), the related <li> element disappear with a nice animated slide out effect. How can we do that? Take a look at the following step!

Step 3: Unobtrusive JavaScript code

Copy and paste this code below the code at the step 1 to enable slideOut() effect:

<script>
window.addEvent('domready', function() {

/* From the list with ID myList, for each li element of the list...: */
$('myList').getElements('li').each(function(e){
/* ...get the ID of the selected item */
e.getElement('a').addEvent('click', function(listID){
/* Enable Fx.Slide effect for the selected item */
var list_element = new Fx.Slide(listID);
/* Enable slideOut() effect */
list_element.slideOut()
}.pass(e.id));
});

});
</script>

That's all! Download the source code or take a look at the live preview.

Download source code Live Preview

Related contents

If you have not confidence with MooTools I suggest you to take a look at this introduction lessons I wrote some time ago:

Lesson 1 - Basic Tips for Web Designer
Lesson 2 - Get elements ID using unobtrusive code
Lesson 3 - Interaction with Forms

Read More

Useful resources and tutorials for developing stunning web sites

Are you looking for fresh and useful tutorials for developing stunning web sites? Take a look at this list of free resources ready to use in your web projects.

If you want to suggest other resources add a comment, thanks!

1. ModalBox
ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs.
Read more...

2. jQuery Cycle Plugin
The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.
Read more...

3. Today's timetable
This script makes it easy to add a timetable to your webpage. I wrote it for a local radio station but didn't use it yet. I think it could be useful for TV programmes too, students' schedules, or many other applications... absolutely awesome!
Read more...

4. Embed QuickTime
Embed QuickTime is a jQuery plugin that helps you embed QuickTime movies to play directly on your webpage, instead of redirecting your video to a separate page or forcing you to embed a video using Flash. It changes regular image links to the embedded QuickTime video when they are clicked.
Read more...

5. FancyBox
FancyBox is fresh and Mac-like lightbox with these features: automatically scales large images to fit in window, adds a nice drop shadow under the zoomed item, groups related items and adds navigation through them (uses preloading), can display images, inline and iframed content, customizable through settings and CSS.
Read more...

6. View-source
View-source uses MochiKit.DOM and MochiKit.Async along with dp.SyntaxHighlighter to provide syntax highlighting for its own source code, and the sources for all of the other examples! The source file path is read in from location.hash, and loaded with doSimpleXMLHttpRequest, and then inserted into the DOM with replaceChildNodes.
Read more...

7. jQuert 3 State Switch
jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that expresses the selection and some states of list item using radio button and checkbox at the same time. The applications of J3SSW includes some interfaces for sort key or filter key of any search results.
Read more...

8. Flash Gallery
Flash Gallery is a free application that allows you to create a slideshow on your website easy and fast. You won't need any programming skills to install or use it. Just embed it into your website and script will automatically form a slideshow from a specified folder or from Flickr photostream.
Read more...

9. jQuery Feed Menu
jQuery Feed Menu allows users to click your feed icon and be presented with a list of feeds to choose from. It's simple and easy to implement.
Read more...

Read More