* Structured process you must know to develop a web application
* Useful guidelines to improve CSS coding and maintainability
* The Art of reusing code in your web projects
* CSS coding: semantic approach in naming convention
* Simplicity is better: some suggestions for a clean blog layout
* Are you a CSS fanatic?
* Liquid layer with rounded corners using css
* Optimize CSS files to improve code readability
Simple rules useful in order not to become crazy if you have to manage a CSS file for a page/site with a complex design.
* Three column fixed layout structure using CSS
* Digg-like navigation bar using CSS
* Simple CSS vertical menu Digg-like
This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu.
* Table’s anatomy: why tables are not so bad
* Liquid styled input element with CSS
* Flickr like horizontal menu
* Socialiconize your site
* Tabbed search bar using CSS and Javascript
* Beautiful CSS Form
This tutorial explains how to design a beautiful form (Facebook inspired) using a clean CSS design with only and tags to simulate an HTML table structure.
* Liquid expandable section with rounded corners using CSS
* How to design a sexy header for your site using CSS
This tutorial illustrates how to design an header Woork-like for your site.
* Write a well structured CSS file without becoming crazy
*

* Perfect pagination style using CSS
This tutorial explains how to design a perfect pagination style using some lines of HTML and CSS code.
* Clean Tab Bar Digg-like using CSS
* CSS Message Box collection
Today I want to share with you a collection of some simple CSS styles you can apply to your message boxes (clean, solid, iconized, alternated rounded borders, tooltip).
* Two CSS vertical menu with show/hide effects
* Nice comments counter style for your blog post
* Top-Down approach to simplify your CSS code
* Pastel color menu with dynamic submenu using CSS
This tutorial illustrates how to design a nice pastel color menu with a dynamic submenu which appears when you select a link in the main menu, using CSS and some lines of javascript code.
* Beautiful CSS buttons with icon set
* Clean and pure CSS FORM design
* Nice CSS menu with feed reader icons list
* Navigation bar with tabs using CSS and sliding doors effect
* Nice login and signup panel Newsvine like using CSS
My friend Benjamin, asked to me a suggest for an idea to design a simple login/register section for his site. So I suggested him to take inspiration form the login panel used on Newsvine.
* Tips to design your site for mobile devices
* Elegant glass style navigation bar using CSS and toggle animated effect

Ajax / Frameworks / Web 2.0

* A simple introduction to Ajax
* Start learning Ajax: XMLHttpRequest and site structure
* How to solve Internet Explorer cache issue in Ajax
* Login using Ajax and Coldfusion
* Login using AJAX and PHP
* Insert record into database using Ajax and PHP
* Insert record into database using Ajax and Coldfusion
* Deleting record with Ajax using prototype.js and PHP
* A simple search engine in Ajax and PHP
* A simple search engine in Ajax and Coldfusion
* Edit in place with Scriptaculous and PHP
* Edit in place with Scriptaculous and Coldfusion
* Lightbox using mootools and pathfusion multibox
This tutorial explains how to use mootools and pathfusion multibox to implement a very nice lightbox on your website. When an user clicks on a thumbnailed image, the script displays a big image preview in a window above all other page elements.
* Mootools animated sidebar menu
* Horizontal animated menu using Mootools
* Toggle effect using Scriptaculous
* Search with autosuggest feature (PHP)
This tutorial explains how to implement a simple PHP ajax search with autosuggest feature using some lines of code.
* Search with autosuggest feature (Coldfusion)
* Drag and drop to order list elements with Scriptaculous
* Using prototype.js to add record into database with ajax
* Opacity change using Scriptaculous
* Gettyone-like search options menu with Scriptaculous
* Sort table rows using Ajax
* Simple images slider to create Flickr-like slideshow
Since long time I was looking for a simple way to implement a Flickr-like slideshow (“image carousel”) and finally I found a good compromise between complexity and result to implement it using Prototype-UI.
* Nice Ajax effect for message box using Mootools
* Liquid expandable section with mootools toggle effect
* Sliding top panel using mootools
* Using CSS and Mootools to simulate Flash horizontal navigation effect
* Improve form usability with auto messages
* Useful tips to enrich your HTML Forms
* MooTools Basic Tips for Web Designer (Lesson 1)
* 10 Useful tutorials to learn Scriptaculous
* Simple ul list with a nice slide-out effect for elements
* Super elastic effect to design high impact web menu
* Nice vertical menu with motion and opacity effect
* Elegant animated weekly timeline for websites
* Ultra versatile slider for websites

Scriptaculous Fade effect is one of my favorite effects of this framework and in this post I want to use it to implement a Digg-line sign-in bar.

My friend Ivan asked to me how to implement the same Digg-like fade-in effect which you can see when you click on the Login link on the Digg topbar. This is very simple using Scriptaculous and toggle effect with only few lines of HTML code.

Download this tutorial

Step 1: Download Scriptaculous Framework
Before to start, you have to download scriptaculous framework here and add a link to prototype.js and scriptaculous.js in the tag of your page:

If you use PHP or another server side language like ASP or Coldfusion you can save the new list order assigning the value of newOrder to an hidden HTML element in this way:

$(‘newOrderInput’).value = newOrder;

… and adding an hidden input field with id newOrderInput in your HTML code after

list with ID “myList”:

In this way every time you drag and drop a list item the value will be updated with the text string with the new order. Then you can use this string (for example “1,2,4,3,5,6,7”) and PHP to save the new order into a database table.

When you click on the checkbox, if the checkbox was “not checked” you call a function (changeOpacity()) to set the layer opacity to 30%. If the chechbox was “checked”, the function set the layer opacity from 30% to 100%. You can add new similar layers using a progressive numeration for ID (el2, el3, el4…). In this case remember to change the parameter in input in changeOpacity() function for each layer (changeOpacity(2), changeOpacity(3), changeOpacity(4)…).

Another great menu which uses Scriptaculous Fade effect to appear and disappear.

My friend Thomas asked to me how to implement a Gettyone-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to searching for something.

The code is very simple and I added a nice Scriptaculous toggle – appear effect to display/hide the search options menu.

Download this tutorial

Step 1: include scriptaculous libraries
Create a new page index.html and addadd a link to prototype.js and scriptaculous.js in the tag of your page:

If you like Flickr slideshow, this article explains how to implement it using Prototype-UI framework.

Since long time I was looking for a simple way to implement a Flickr-like slideshow (“image carousel”) and finally I found a good compromise between complexity and result to implement it using Prototype-UI, an awesome JavaScript framework based on Prototype and Scriptaculous.

So, to help my readers 😉 I implemented a slideshow ready to use and this step-by-step tutorial explains how to customize it and use it in your web projects. Not fear! It’s really simple!

Last update: March 10, 2008 – IE6 issue fixed by Anonymous

Download this tutorial

Step 1: HTML code
The HTML code for this tutorial is very simple. You have to include in the tag of the page you want to display your slideshow these files:

..and this CSS file to stylize your slideshow:

Now you can add the following code into the tag:

…some content here..

…some content here..

….

You have to put the content you want to display on your slideshow (for example an image) into a

element of the

list:

….

If you use a server side language (PHP, Coldfusion, ASP…) you can populate dinamically the list. For example if you are a PHP developer you could use some code like this:

“>

… and add this these lines of code before to close the tag:

//

Step 2: CSS code to stylize your slideshow
You can modify the look of your simply modifying the related style sheet. For example to change the slideshow width (to display in this way more or less images on your slideshow) you can change the width attribute of the following CSS elements: