Haseebzone template: February 2008

Thursday, 28 February 2008

Elegant navigation bar using CSS

Are you looking for some inspiration for the navigation bar of your next website project?

This tutorial explains how to design an elegant navigation bar (gettyone inspired) for your site using CSS. The result is like this:

Live preview

Download this tutorial

Step 1: Navigation bar HTML Code
HTML code is very simple: the structure is a <ul> list with a <li> element for each link in the navigation bar:

<li class="navhome"><a href="home.html"><span>Home</span></a></li>
<li><a href="about.html"><span>About</span></a></li>
<li><a href="contact.html"><span>Products</span></a></li>
<li><a href="contact.html"><span>Contact Us</span></a></li>

</ul>
</span>
</div>

How you can see, heach link <a> contains a <span> tag inside itself. I use very often this simple tips to design liquid elements with rounded corners like this:

See also this post for an explanation about how to implement a fluid rounded corners (with and height) for an HTML element.

Step 2: CSS structure
This is the CSS file structure to design the navigation bar:

#navbar{
width:auto;
height:36px;
background:url(img/navbar-bg.png) left top repeat-x; }
#navbar .inbar{
display:block;
height:36px;
background:url(img/right-round.png) right top no-repeat; }
#navbar ul, #navbar ul li{
border:0px;
margin:0px;
padding:0px;
list-style:none;
height:36px;
line-height:36px; } #navbar ul{
background:url(img/left-round.png) left top no-repeat; }
#navbar ul li{
float:left;
display:block;
line-height:36px; }
#navbar ul li a{
color:#403e32;
text-decoration:none;
font-weight:bold;
display:block; }
#navbar ul li a span{
padding:0 20px 0 0;
height:36px;
line-height:36px;
display:block;
margin-left:20px; }
#navbar .navhome a, #navbar .navhome a:hover{
background:url(img/a-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar .navhome a span, #navbar .navhome a:hover span{
color:#FFFFFF;
background:url(img/span-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover{
background:url(img/ahover-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover span{
background:url(img/spanhover-bg.png) right top no-repeat;
height:36px;
line-height:36px; }

Use this navigation bar on Blogger Template
Add this link to the CSS file in the <head> tag of your template

...and copy and paste in a section of your template HTML code in the step 1. You have to change only the name and the URL of your link!

Five basic Ajax tutorials

Are you a PHP developer and an Ajax newbie?

This post is a collection of five basic and most required Ajax tutorials with PHP. It inlcudes login, insert record into a database table, search engine, autosuggest and Edit in Place.

Using prototype.js to add record into database with ajax
How to use prototype.js framework to enable a simple ajax request which add a new record (an user name) into a database table using PHP like server side language.

A simple search engine in Ajax and PHP
How to realize a simple search engine with Ajax and PHP that search an user name inside a db table "USER" and return results while you type into the input field.

Search with autosuggest feature
This tutorial explains how to implement a simple PHP ajax search with autosuggest feature using some lines of code.

Edit in place with Scriptaculous and PHP
How to implement a simple Edit in Place effect (Flickr-like) using Scriptaculous and PHP.

Related content
Table of content

Deleting record with Ajax using prototype.js and PHP

Are you Ajax newbie? This post explains how to remove record from database tables using Ajax and PHP.

My friend William asked to me to write a post for "beginners" about how to use prototype.js framework an PHP to delete a record from a database with Ajax. This is a simple overview with basic features you can use and improve in your web projects.

Tutorial's structure includes three files:

index.php (with a list of record you want to delete)
delete.php (PHP code to delete records into your database)
prototype.js (to enable Ajax)

Step 1: include prototype.js
Download prototype.js and create a new page (index.php). Add this line of code in the <head> tag on index.php to include prototype framework:

Step 2: HTML code
Image to have the following code in index.php:

<ul>
<li>Jack Bauer <a href="#" onClick="deleteUser(1)">delete</a></li>
<li>Gregory House <a href="#" onClick="deleteUser(2)"> delete</a></li>
<li&gtFox Mulder <a href="#" onClick="deleteUser(1)">delete</a></li>
</ul>

...a simple list with names and a link to delete the user from the DB. Each link call a JavaScript function deleteUser() with argument the ID (primary key) of the user you want to delete. Database table USER has some attributes and a primary key (id_user_pk). You can generate dinamically this list using a for example a code like this:

<?php
/* Database connection */
include('config.php');
$getUser_sql = 'SELECT * FROM USER';
$getUser = mysql_query($getUser_sql);
?>
<ul>
<?php while ($row = mysql_fetch_array($getUser)) {?>
<li> <?php echo $row['name']; ?> <a href="#" onClick="deleteUser(<?php echo $row['id_user_pk']; ?>)">delete</a></li>
} ?>
<>

Take a look here to see an explanation of connection parameters to a MySQL database in config.php.

Step 3: delete.php
Create a new page (delete.php). This page contains a query PHP to delete the record passed in argument from javascript function deleteUser(id):

<?php
/* Database connection */
include('config.php');
if(isset($_POST['user_id'])){
$userID = $_POST['user_id'];
$sql = 'DELETE FROM USER where id_user_pk ="'.$userID.'"';
mysql_query($sql);
} else { echo '0'; }
?>

Step 4: Javascript function deleteUser(id)
This function pass with the method POST to the page delete.php the id of the user you want to delete from the table. Add the following lines of code below the code in step 2:

It's all. I hope it's clear :)

Are you a CSS fanatic?

After my latest post about how to design a beautiful form using CSS, I received a lot of messages from some readers who accuse me to be a "CSS fanatic" :).

They asked to me why I spend my time coding an "unnatural" CSS structure instead of using a more simple <table> tag to design a form with labels and inputs text...

Ok, I admit it: I love CSS, but I am not a "fanatic"! I try only to find some interesting solutions about how to use them. In fact, in my defence, some weeks ago I wrote a post exactly about this topic (Table's anatomy: why tables are not so bad) after my friend Jason asked to me: "I want to use CSS instead of a table to display a matrix with some values. How can I do?"

My answer - shortly - was: In general, tables are not the devil and if used in the correct way (for example to display tabular data), can be more functional and simpler to design than CSS pseudo-alternatives.

How I said, in similar situations, I work with tables but oneslty if I can find an "elegant" alternative to design page elements "table-like" (for example a form with labels and input fields) using CSS instead of <table> tag I prefer using only CSS. I think the code is more clean and more flexible.

Then, tables or pure CSS code? Let me say: "It depens on..."

Probably a solution which attunes anyone will be using the new CSS3 Multi-Column Module, but we have to wait for a final release of CSS3 specifications and a full integration with all new generation browser. A typical Multi-Column structure with CSS3 can be designed with the following code:

div.myTable{
width:600px;
column-count:3;
column-width:200px;
}
div.myTable h1{column-span:all;}

...where each <p> element into myTable layer will be a column with a width equal to 200px. You can define also an header, for example using <h1> tag like in this example:

...and HTML code is:

&ltdiv class="mytable">
<h1>Column headline</h1>
<p> ... First column: some content here... </p>
<p> ... Second column: some content here... </p>
<p> ... Third column: some content here... </p>
</div>

How you can see, it's really more clear and less "expensive" than using <table> tag or a pseudo-table designed with CSS2.

About CSS3 Multi-Column I found an interesting post on A List Apart which I suggest to read, or you can also take a look here for another detailed explanation.

And now... are you a CSS fanatic? Leave your comment!

Beautiful CSS Form

Do you love simplicity of Facebook design? Take inspiration to design a beautiful CSS Form.

This tutorial explains how to design a beautiful form (Facebook inspired) using a clean CSS design with only <label> and <input> tags to simulate an HTML <table> structure. You can reuse all CSS/HTML elements to design your custom form for your web projects:

Live preview

Download this tutorial (HTML + CSS)

Update: I solved an issue with Safari and Firefox, download the new zip file.

Step 1: Input elements and labels
When you design a form (for example to Sign-in or Sign-up on your site), a fast solution to place all form elements in a page is add them into the table's cells. A good and simple alternative is using HTML <input> and <label> tags in this way:

...and the css code is the following:

div.box .input-text{
border:1px solid #3b6e22;
color:#666666;
}

div.box label{
display:block;
margin-bottom:10px;
color:#555555;
}

div.box label span{
display:block;
float:left;
padding-right:6px;
width:70px;
text-align:right;
font-weight:bold;
}

...in this way, <span> element inside the <label> tag set the same width (70px) for the field descriptions to the left of each <input> element in your form, like if field description and input was placed in a table row with two horizontal cells.

Update: to solve an issue with Safari (using size attribute) and with Firefox (problem to display correctly input label) I changed the following code:

div.box label span{
display:inline-block;
...
}

with:

div.box label span{
display:block;
float:left;
...
}

Step 2: Submit Button
When you add a standard/unstyled button in a form (<input> or <button> tag) take a mind it looks different on different browser and OS. A good practice to uniform how it looks is to define a CSS class to apply to your button. Instead of <input> or <button> tag you can also use a simple link (<a> tag) like in this case (I designed and applyed "green" class to the link <a>):

...and CSS code for the "green" class is the following:

.green{
background:url(img/green.gif);
padding:0px 6px;
border:1px solid #3b6e22;
height:24px;
line-height:24px;
color:#FFFFFF;
font-size:12px;
margin-right:10px;
display:inline-block;
text-decoration:none;
}

The final result is very nice and clean, ready to reuse in your projects.

Download this tutorial (HTML + CSS)

Related Content
Table's anatomy: why tables are not so bad

Sort table rows using Ajax

Simple sort script using Stuart Langridge's sortabe.js

Some days ago I was looking for a good and simple way to sort data into a table with a simple click on table headers and I found this interesting framework: Stuart Langridge's sorttable.js.

This tutorial explains how to use it in your projects:

Download this tutorial (include sorttable.js)

Step 1: include sorttable.js
Create a new page and include in the <head> tag a link to sorttable.js:

Step 2: HTML code to design a sortable table
Create a new table and add "sortable" in the table class parameter:

If, in the same page, you have more than one table, you can apply this class to all tables you want to sort. The general structure for each table you want to sort contains a <thead> (table header) a <tbody> (table body) and <tfooter> (table footer) like the following example:

<tr>
<th>Company</th>
<th>Ticker</th>
</tr>

</thead>

<tbody>

<tr>
<td>Apple Inc</td>
<td>AAPL</td>
</tr>

<tr>
<td>GoogleInc</td>
<td>GOOG</td>
</tr>

</tbody>


<tfoot>

<tr>
<td>Total</td>
<td> 00.00</td>
</tr>

</tfoot>
</table>

When you click on a header (in this simple example "Company" or "Ticker") all rows within <tbody> tag will be sort in ascending or decreasing order.

Step 3: populate table rows with data using PHP
You can populate a table with some data using a server-side language such as PHP, Coldfusion, ASP or similar. If you use PHP you can use this simple code:

<?php
// Include connection to your database
include('dbconnection.php');
$getCompany_sql = 'SELECT * FROM COMPANY';
$getCompany= mysql_query($getCompany_sql);?>

<table class="sortable">

<thead>

<tr>
<th>Company</th>
<th>Ticker</th>
</tr>

</thead>

<tbody>
<?php while ($row = mysql_fetch_array($getCompany)) {?>
<tr>
<th><?php echo $row.['companyName'] ?></th>
<th><?php echo $row.['companyTicker'] ?></th>
</tr>
<?php } ?>
</tbody>


<tfoot>

</tfoot>
</table>

Download this tutorial (include sorttable.js)

Related contet
Table's anatomy: why tables are not so bad

Five web 2.0 CSS menu tutorials

Are you looking for some idea to design a menu in your new web project? Take a look at this nice collection of popular posts on Woork.

This post is a compilation of the most visited posts on my Blog about "web design" topic. It includes five CSS menu tutorials inspired to some Web 2.0 sites with round corners, scriptaculous and ajax effects.

1. Digg-like navigation bar using CSS
This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.

2. Gettyone-like search options menu with Scriptaculous
This tutorial explains 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.

Flickr like horizontal menu
This tutorial explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu.

3. 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.

4. Tabbed search bar using CSS and Javascript
This tutorial explains how to implement a simple tabbed search bar using CSS and a javascript function which set "active" the selected tab and changes the value of an hidden <input> element to set search options and execute your search only for all items related to the selected topic (for example: web, images, videos...).

Related content
Five basic Ajax tutorials (login, insert record into a database table, search engine, autosuggest and Edit in Places)

Install PHP and MySQL environment on your Mac using MAMP

Prepare your Mac to develop PHP applications with a click, using MAMP.

I often receive this question from some readers of mine: "what's the most simple way to install a PHP / MySQL environment on a Mac OS X?" I think the best way is using MAMP (an abbreviation for Macintosh, Apache, Mysql and PHP), a free application which configure a localserver (just with a click of your mouse) and all you need to work with PHP and MySQL.

Install is very simple and immediate and it works well on Tiger and on Leopard. MAMP also includes phpMyAdmyn and SQLLiteManager to manage easly all your MySQL databases.

Links
MAMP official site

Gettyone-like search options menu with Scriptaculous

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

<input type="text" name="search" id="search" onclick="javascript:showMenu()"/>
<input id="hiddenStatusMenu" type="hidden" value="0" />
<div id="searchmenu" style="display:none;">
...some html code here...

<a href="#" onClick="javascript:hideMenu()"> Close </a>
<div/>

Step 3: JavaScript functions
Add this code into the <head> page on your page for the function showMenu() which display the menu when an user click on the input search field:

function showMenu(){
statusMenu = document.getElementById('hiddenStatusMenu');
if(statusMenu.value == 0){
statusMenu.value=1;
Effect.toggle('searchmenu','appear'); return false;
}
}

...and this code for hideMenu() function to hide the menu when an user click on the link "close":

function hideMenu(){
statusMenu = document.getElementById('hiddenStatusMenu');
if(statusMenu.value == 1){
statusMenu.value=0;
Effect.toggle('searchmenu','appear'); return false;
}
}

How you can see the code and the structure is very simple to understand. Download the zip file whit the full code, including CSS and Scriptaculous framework.

Download this tutorial

Playing with AdSense ads position

When you place AdSense on your site you have to do this simple consideration: where can I place AdSense advertisements in order to realize a great result in terms of revenue without irritating my readers placing advertisements in too much strategic positions?

First time, in order to maximize my revenue, I placed an AdSense box (336 x 280) below the title of my post... Sincerely, I didn't find it a great choice in terms of readability and layout but, considering the all respect daily income, without doubt the best. But my readers didn't appreciate my "revenue-oriented" choice so, after several messages, in order to satisfy my aficionados readers, I decided to move AdSense box (336 x 280) to the end of my posts. Result...? This is the trend of my revenue in the latest days after I moved AdSense box below the text of posts:

How you can see from the picture (considering a constant traffic about 3500-4000 unique visitors/day), a disaster. I didn't report my daily income but isn't important to understand the poor trend.
Then Saturday morning I decided again to place AdSense below the title of my post, but changing AdSense box (336 x 280) with a smaller one which I find more tolerable for all my readers... Whit my big pleasure, today, just two days after I found a significant improvement on my revenue comparable with my initial daily income using 336 x 280 ads box. I hope this choice can be more "appreciated" for all my readers :)) !

Related content
Why you have not need of an eBook about Google AdSense secrets
Place Google AdSense below post's title on Blogger

Project Management: Excel Gantt Chart Template

In the past days I received some requests from my readers to deploy a simple Excel template to manage a project with a Gantt chart (in the right side of the sheet).

So I prepared this spreadsheet you can download and use in your job. The sheet contains only the following fields: WBS, Task Owner, Status, Start Date, Finish Date, Percentage of completion.

Download Excel Template

WBS structure is organized in two levels: activities and tasks. Each activity contains one or more task.
Each task has an owner and a status (I suggested:in progress, delay, completed, suspended, but you can change it like you prefer) and a percentage of completion.

Add a new task
To add a new task, copy a row with a task and paste it where you want. Remeber to update WBS number for the new task.

Add a new Activity
To add a new activity, copy a row with an activity and paste it where you want.

I hope you can find it useful. For infos or request please contact me :)

Related Post
Project Management: organize a project plan
Project Management: a project plan with Excel (template)
Gantt Chart using Google Spreadsheets and conditional formatting
Implement a Project Plan and manage activities with Google Spreadsheets

Opacity change using Scriptaculous

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

<div id="el1">
<img src="pic-user/u1.jpg" align="left" style="margin-right:10px;"/>
<span class="check"><input type="checkbox" id="status1" value="0" onClick="javascript:changeOpacity(1)"></span>
<span class="title">Database: design Entity-Relationship model</span>
<span class="desc">Complete the document with functional analysis</span>
</div>

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:

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

Download this tutorial (include Scriptaculous 1.8.1)

Using prototype.js to add record into database with ajax

Ajax for newbie: add a record into database table using prototype.js and PHP.

In the past weeks I wrote several posts about how to use ajax to add, modify, delete records from a database using ad hoc JavaScript functions. Now I want to use ajax requests using a very useful JavaScript framework called prototype.js.

This tutorial explains how to use prototype.js framework to enable a simple ajax request which add a new record (an user name) into a database table using PHP like server side language.

Download this tutorial (include prototype.js)

Step 1: include prototype.js
Download prototype.js and create a new page (index.php). Add this line of code in the <head> tag onf index.php to include prototype framework:

Step 2: HTML code for index.php
index.php is a simple page with a form like this:

...where the input button calls a javascript function insertName() in onClick attribute (see Step 4 for more info about insertName()...).

Step 3: insert.php
Create a new page (insert.php). This page contains a simple query to save the new record into a database table (USER):

<?php
if(isset($_POST['user_name'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$name = strip_tags($_POST['user_name']);

$sql = 'INSERT INTO USER (name) VALUES(
"'.$name.'")';
mysql_query($sql);
echo $name;
} else { echo '0'; }
?>

Step 4: Javascript function to enable Ajax Request
This code enable ajax request with prototype. Add this lines of code below the code in step 2:

&l;script type="text/javascript">
function insertName(){
new Ajax.Request('insert.php', {
parameters: $('user_name').serialize(true),
});
}
</script>

We pass to index.php the value we want to save using this simple code:

$('user_name').serialize(true)

...if you have familiarity with javascript, this is equal to declare this code:

document.getElementById('user_name');

... where in both cases "user_name" is input field ID we want to save into database. We pass this value to insert.php like a POST variable (see step 3).

Drag and drop to order list elements with Scriptaculous

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 <head> tag of your page:

Step 2: HTML Code
Add a <ul>list with ID "myList" and some <li> elements with a progressive ID like in the following example:

<ul id="myList" class="listClass">
<li id="item_1">Adobe</li>
<li id="item_2">Apple</li>
<li id="item_3">Microsoft</li>
<li id="item_4">Macromedia</li>
<li id="item_5">Symantec</li>
<li id="item_6">Mozilla Foundation</li>
<li id="item_7">Skype</li>
</ul>

<p id="listNewOrder">&lt/p>

Add this javascript code below the previous code:

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 <input> HTML element in this way:

$('newOrderInput').value = newOrder;

... and adding an hidden input field with id newOrderInput in your HTML code after <ul> 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

Haseebzone template

Pages

Thursday, 28 February 2008

Elegant navigation bar using CSS

Wednesday, 27 February 2008

Five basic Ajax tutorials

Deleting record with Ajax using prototype.js and PHP

Tuesday, 26 February 2008

Are you a CSS fanatic?

Monday, 25 February 2008

Beautiful CSS Form

Friday, 22 February 2008

Sort table rows using Ajax

Thursday, 21 February 2008

Five web 2.0 CSS menu tutorials

Wednesday, 20 February 2008

Install PHP and MySQL environment on your Mac using MAMP

Monday, 18 February 2008

Gettyone-like search options menu with Scriptaculous

Playing with AdSense ads position

Friday, 15 February 2008

Project Management: Excel Gantt Chart Template

Monday, 11 February 2008

Opacity change using Scriptaculous

Saturday, 9 February 2008

Using prototype.js to add record into database with ajax

Friday, 8 February 2008

Drag and drop to order list elements with Scriptaculous