My Blog

The following list is the table of contents of all tutorials you can find on woork. Tutorials are about web programming, web design, css, frameworks, database and other related topics.

The Woork Handbook

Download the Woork Handbook, it’s Free!
The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design… directly from Woork!

Introduction to design websites

* Step by step guide for newbie to design a simple web application (part 1)
* Set up your Workspace
* A typical website structure
* Config.php: define your database connection’s parameters
* Design the page layout using CSS
* Conceptual design for index.php page layout
* Load page using URL variables and PHP include() function
* Load pages using URL variables and Coldfusion cfinclude tag
* A typical website structure (Coldfusion)
* Organize and design a navigation bar for your site using CSS, PHP and URL variables
* Organize and design a navigation bar for your site using CSS, Coldfusion and URL variables
* Add #navbar elements to default.css file and to index.php

CSS, HTML, Web design

* 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

News Tickers

*
* How to implement a news ticker with jQuery and ten lines of code
* Fantastic News Ticker Newsvine-like using Mootools
* News ticker with horizontal scrolling using Mootools
* Automatic news ticker with vertical scrolling and Start/Resume options

MooTools Lessons

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

Database

* Project a database: define the relationships-entities model (tables, attributes, and relationships)
* Project a database: create tables and relationships with SQL
* Project a database: how to use PHP and SQL to create tables and relationships
* A correct approach to define relationships between database’s tables
* 10 Useful articles about Database design

PHP Functions and Scripts

* Time and Date difference using a PHP function
* Twitter: send message from a PHP page using Twitter API
* Simple newsletter system using PHP
* PHP components: Autosuggest
* PHP components: login system

Coldfusion Functions and Scripts

* Custom script to calculate a digg-like date difference with Coldfusion
* Remove HMLT tags from input field using Coldfusion and ReReplace() function
* Simple 5 stars rating script using AJAX and Coldfusion
* Simple newsletter system using Coldfusion
* Coldfusion VS PHP part 1
* Split text string using Coldfusion
* Search with autosuggest feature (Coldfusion)

Javascript Functions

* Show Hide Layer using a simple Javascript function
* Magnify text using javascript
* Change the layer background color using a simple Javascript functions
* From Feed RSS to HTML
* Ajax: add a new element into a list using javascript insertBefore()
* Change text using Javascript innerHTML
* Split an input text using javascript
* Select and remove multiple input checkbox elements
* Add an item from a SELECT field into a layer using javascript
* Simple selector list using CSS and Javascript
* Change class attribute using javascript

Application

* A simple To-Do list in PHP and AJAX to reuse in your web project

Blogger Tips and Hack

* Set up Google Friend Connect on Blogger
* Super Blogger hack to improve the default comment system with Google Friend Connect
* Add TwitThis on your Blogger template and drive more traffic on your website
* Add Digg vote button on Blogger Template (update)
* Blogger hack: add delicious button with counter in your blogger posts
* Place Google AdSense below post’s title on Blogger
* Add StumbleUpon button in your Blogger’s posts
* Add reddit button with counter in your Blogger Template
* Add Technorati blog reaction on your Blogger Template
* Simple star rate system for Blogger
* Add Mixx button on Blogger Template
* Add DZone button on Blogger template
* Add Design Float button on Blogger template
* Some Blogger Tips you probably don’t know
* Custom search engine on your Blogger template
* Blogger Tips: feeds RSS list menu
* Add Yahoo! Buzz button on Blogger Template

Frequent Asked Questions

* How can I populate a select form with a SQL query using PHP?
* How can I change a text using Javascript and innerHTML?

Spreadsheets, Project Management Tools and Resources

* Google Spreadsheets: formulas tutorial
* Gantt Chart with EditGrid online spreadsheets
* Implement a Project Plan and manage activities with Google Spreadsheets
* Project Management: a project plan with Excel (template)
* Gantt Chart using Google Spreadsheets and conditional formatting
* Project Management: Excel Gantt Chart Template
* Google Spreadsheets Tips: Invert word position using formulas
* Google Spreadsheets Tips: Add custom charts
* How to create an awesome eBook Template using Word or Apple Pages

Other Links

* Top resources for webmaster

Sponsored Links
Share this post
Share on Facebook
Share on Twitter
Share on StumbleUpon
Share on Delicious
Share on Reddit

Share on Digg
Share on DesignFloat
Share on Technorati
Feeds RSS Subscribe to Feeds RSS
discussion by DISQUS
Add New Comment

You are commenting as a Guest. You may select one to log into:
Log into DISQUS

* Logged in as
* Logged in as Logout from DISQUS

Showing 2 of 2 Comments
Sort by Community Page Subscribe by email

*
CCNA4U.ORG 1 week ago
Thank for shared
o Like
o Report
o Reply
o More ▼
Optional: Login or OpenID
*
Bussiness 5 days ago
Great blog…i find now..u are master for me…permitted me..more learn from u
o Like
o Report
o Reply
o More ▼

Another post dedicated to Scriptaculous and to a nice way to implement Toggle effect.

This tutorial explains how to implement a simple Toggle effect using Scriptaculous framework. I prepared a simple tutorial you can download to see it in action:

Download this tutorial

To use scriptaculous effect on your pages you have to add this lines of code in the tag:

Then, you can apply Scriptaculous Toggle effect using this simple code, for example calling this function inside “onClick” attribute:

Effect.toggle(‘ID’,’type-of-effect’); return false

…where “ID” is the element you want to apply the toggle effect and “type-of-effect” is a toggle “sub-effect” (blind, appear, slide). I chose as toggle sub-effect “blink”:

About me

…some content…

In this way you can apply this effect to every element using HTML “id” attribute.

Download this tutorial

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:

Step 2: HTML code
HTML code is very simple

Login

Effect.toggle() function takes as input two parameters: layer ID (in this case “login”) and type of effect (in this case “appear” to simulate fade-in effect).

Download this tutorial

Drag and drop feature is a popular effect in modern website interfaces and a simple way to implement it is using Scriptaculous.

This tutorial explains how to use Scriptaculous to implement an HTML list with drag and drop feature to reorder list elements.

Download this tutorial

Step 1: Add scriptaculous framework
To enable drag and drop effect you have to download Scriptaculous framework here and add a link to prototype.js and scriptaculous.js in the tag of your page:

Step 2: HTML Code
Add a

    list with ID “myList” and some

  • elements with a progressive ID like in the following example:
    • Adobe
    • Apple
    • Microsoft
    • Macromedia
    • Symantec
    • Mozilla Foundation
    • Skype

    &lt/p>

    Add this javascript code below the previous code:

    Sortable.create(‘myList’,{ghosting:false, constraint:true, hoverclass:’over’,
    onChange:function(element){
    // Total elements in the list (in this case 7

  • element)
    var totElement = 7;
    var newOrder = Sortable.serialize(element.parentNode);
    for(i=1; i<=totElement; i++){
    newOrder = newOrder.replace("myList[]=","");
    newOrder = newOrder.replace("&",",");
    }
    // display the string with the new order in the <Pgt; with id listNewOrder
    $('listNewOrder').innerHTML = 'New Order: ' + newOrder;
    }
    });

    newOrder is a string variable which returns the new order of all elements of “myList” for example:

    1,2,4,3,5,6,7

    … where list element 4 has moved before list element 3. The new order is:

    li element 1 –> position 1
    li element 2 –> position 2
    li element 3 –> position 4 (changed from position 3 to position 4)
    li element 4 –> position 3 (changed from position 4 to position 3)
    li element 5 –> position 5
    li element 6 –> position 6
    li element 7 –> position 7

    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.

      Download this tutorial

      Related Content
      Effect appear (fade-in) using Scriptaculous
      Toggle effect using Scriptaculous
      Horizontal animated menu using Mootools
      Mootools animated sidebar menu

Scriptaculous is a great framework to implement superb animated effects for your website. It’s simple to use and in general final result is awesome.

This tutorial explains how to use Scriptaculous to implement a nice “change opacity” effect for a layer and its content.

Download this tutorial (include Scriptaculous 1.8.1)

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:

Step 2: HTML code
This is an example about how to use opacity change effect. You have a container layer with ID el1, a chechkbox and some content like the following:



Database: design Entity-Relationship model
Complete the document with functional analysis

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)…).

Step 3: JavaScript function changeOpacity
Now, add this simple function into the <head&gt tag of your page to enable change opacity effect:

function changeOpacity(id){
$opacityStatus = $(‘status’+id);
if($opacityStatus.value==0){
new Effect.Opacity(‘el’+id, {duration:0.5, from:1.0, to:0.3});
$opacityStatus.value = 1;
} else {
new Effect.Opacity(‘el’+id, {duration:0.5, from:0.3, to:0.1});
$opacityStatus.value= 0;
}
}

It’s all! Download this tutorial and try it!

Download this tutorial (include Scriptaculous 1.8.1)

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:

Step 2: HTML code
Add an input search field with an hidden input hiddenStatusMenu to “save” the actual status of the search options menu (0=hidden; 1=visible) with ID searchMenu initially hidden:

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:

Pages

Web Dev Tutorials