Form Validation with Javascript and PHP

In this tutorial, I will show you how to create an attractive, pleasant to look form for your website and then I will explain you how to dynamically validate them using Javascript. We’ll also cover server-side validation with PHP to make everything 100% safe. This tutorial will help you to add more functionality to your forms which leads to better user experience and better quality of your website. You may also enhance your already existing forms by adding them some fancy effects presented in this tutorial. Let’s get started! Info: If you’d like to modify already existing form by adding some javascript to it then skip HTML and CSS part of this tutorial and go to step five. Otherwise, if you’re planning to create new form start reading here.

Concept

Let’s start with some brief explanation of what are we going to do. I’m sure that you’ve seen lots of different forms and I’m sure that filling in some of them was a lot more comfortable than filling in the other ones. I’m sure that this was caused in large part by some additional scripts. We’re going to cover a few field types including standard input field, password field, repeat password field, email field, options list and a few different scripts so I’m sure that you’ll find here something useful for you. Here are a few more things to consider while creating forms:

• Make sure that your form is as short as possible. People don’t like wasting time on filling in complex forms. They are likely to leave the page before they take any action. It’s better to ask for less important information after user is already registered (preferably only when you really need that information).
• We want it to look neat and clean.
• We want it to work seamlessly and without any strange behavior or errors.
• We want to reduce number of fake submissions.

Live Demo

download in package

Project

We’re going to start with HTML and then improve it with styles and scripts. At the end we’re going to I’m going to use the following fields in my form (numbers of allowed chars are in the brackets):

• Name (25)
• Password (25)
• Password Confirmation (25)
• Email (50)
• Gender (boolean)

This is mine schedule. I found the best way to make each part of web is to start with HTML and then improve it by adding some style and scripts but you can actually start with preparing database (you can have your own DB table structure) or PHP script (step 12) and then take care of the rest pieces. Tip: You can increase maximum size of your text fields if you really need it but honestly I think values I chose are good enough.

Step 1 – HTML Forms

Lets prepare new folder ‘templates’, where we will put all our templates. Create a new document and name it main_page.html. Now we’re going to create HTML form and place it there. As you can see below there are some comments referring to each part of my code so I believe that at this point additional explanations are superfluous. I have also created a HTML table to align all the information. Here’s the code:

templates/main_page.html

<form action="index.php" method="post" id="form" onsubmit="return validate_all('results');">
    <table cellspacing="10">
        <tr><td>Login</td><td><input type="text" name="login" maxlength="25" id="login" onKeyUp="updatelength('login', 'login_length')"><br /><div id="login_length"></div> </td></tr>
        <tr><td>Password</td><td><input type="password" name="pass" maxlength="25" id="password" onKeyUp="updatelength('password', 'pass_length')"><div id="pass_result"></div><br /><div id="pass_length"></div></td></tr>
        <tr><td>Confirm Password</td><td><input type="password" name="cpass" maxlength="25" id="c_password"></td></tr>
        <tr><td>Gender</td><td><select name="gender"><option value="1">male</option><option value="0">female</option></select></td></tr>
        <tr><td>Email</td><td><input type="text" name="email" maxlength="50" id="email" onKeyUp="updatelength('email', 'email_length')"><br /><div id="email_length"></div></td></tr>
        <tr><td colspan="2"><input type="submit" name="submit" value="Register"></td></tr>
    </table>
    <h3 id="results"></h3>
</form>

Things to note:

• Don’t forget to name your text fields, otherwise you won’t be able to receive data from them later on.
• Maxlength parameter reduces number of characters you can use in each text field.
• Action, method and id parameters are required so place them into form tag.
• You can make table border visible by placing border=”1″ in table tag if you want to actually see the table.

Here’s the code of second page:

templates/step2.html

<h2>{errors}</h2>
<form action="index.php" method="post">
    <table cellspacing="10">
        <input type="hidden" name="login" value="{login}">
        <input type="hidden" name="pass" value="{pass}">
        <input type="hidden" name="cpass" value="{cpass}">
        <input type="hidden" name="gender" value="{gender}">
        <input type="hidden" name="email" value="{email}">
        <tr><td><span>Verification code</span></td><td><input name="vcode"></td><td></td></tr>
        <tr><td><span>Hint</span></td><td><i>{vcode}</i></td><td></td></tr>
        <tr><td colspan="2"><input type="submit" name="submit" value="Register"></td></tr>
    </table>
</form>

And – last one page:

templates/step3.html

<h1>Registration complete</h1>

Step 2 – Adding CSS

Now we have our HTML form but it does not look attractively yet. As you may have guessed it is time to add some CSS and make our form look a little better. Here is my example of green form definitions:

css/main.css

form {
    background-color: #555;
    display: block;
    padding: 15px;
}
input[type=text], input[type=password], input[type=submit] {
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
input[type=text], input[type=password], select {
    background-color: rgb(246, 254, 231);
    border-color: rgb(180, 207, 94);
    border-style: solid;
    border-width: 1px;
    font-size: 16px;
    height: 25px;
    margin-right: 10px;
    width: 200px;
}
input[type=submit]{
    cursor: pointer;
    font-size: 16px;
    height: 35px;
    padding: 5px;
}
input.wrong {
    border-color: rgb(180, 207, 94);
    background-color: rgb(255, 183, 183);
}
input.correct {
    border-color: rgb(180, 207, 94);
    background-color: rgb(220, 251, 164);
}
#pass_result {
    float: right;
}

Classes are named according to their further function. For example .wrong class will be used when text field contains wrong informations and so on. Also you should now add class parameter to each text field and elements that should have some style. To do it place class=”class_name_here” to input tags where class_name_here is name of class defined between style tags (see example if you are new to adding classes to elements). Add only field class to each text field, rest will be used later. I advise to modify styles a little by choosing different colors and values so that they could fulfill your requirements.

Step 3 – Javascript

This step will be about dynamic elements and how to use Javascript to create and then apply them wherever you would like to. After observing what some sites do I’ve noticed that there are plenty of such scripts (which I’m going to present here) recently, especially on big companies/corporations sites and popular services so I think this really make users happier and encourage them to fill forms in. Look around and check out some sign up forms (Google.com, Yahoo.com and flickr.com, ebay.com… yes, dynamic forms are almost everywhere now). Some easy to do scripts can reduce number of unnecessary clicks and let users create account (or whatever you are making form for) more quickly than before, not to mention they look much more prettily and cool. There are various places to put the javascript code as it was with CSS. It can either be written inside the main_page.html file using a tag or put to the other file and then include this file to main_page.html. Both case will use the same code to put scripts to your document. I chose second option so make separated script file (js/script.js) for our main_page.html file.

Each function from further steps should be placed where I made comment so between.

Step 4 – Applying functions

This is very important step so read it carefully. Adding javascript functions to your HTML form elements should be easy because it is very similar to adding CSS classes to them. Also to make it easier I tried to create functions from further steps alike to each other so that you can apply them almost the same way but for sure I will add some sample files each step to show you how it is made and I will write a little explanation to them. Generally if you want to add function (let’s say updatelength() from Step 7 – Counter) to login field you should replace:

    <input type="text" name="login" maxlength="25" id="login">

with:

    <input type="text" name="login" maxlength="25" id="login" onKeyUp="updatelength('login', 'login_length')"><br /><div id="login_length"></div>

The only thing that has changed is onKeyUp=”updatelength(‘logid’, ‘login_length’)” was added. Well, if we add something like this to our input we will observe what function is returning outcome in div tag with id “login_length”.

Why?

Because updatelength() function starts like this “function updatelength(field, output){…” (Step 7 – Counter) and that means it requires two arguments which are ID OF TEXT FIELD IN HTML and ID OF DIV WHERE RESULT WILL BE. Now it is easy, isn’t it? Rest of functions are similar to this one so I hope it won’t be a problem to apply it. Each one needs almost same values as arguments.
Notes:

• You can use more than one function to one text field by using a separator “;”. Example: onKeyUp=”updatelength(‘logid’, ‘login_length’); valid_length(‘logid’, ‘login_o’);”
• Look up to the source of example sites if you have any problems.

Step 5 – Counter

So, here goes first script to improve our sign up form. It can be used in many other cases like adding a comment or posting message somewhere so you can attach it to more than one form. It will count characters we typed and tells us how many more we can write to the end of field. Short code and useful thing:

function updatelength(field, output){
    curr_length = document.getElementById(field).value.length;
    field_mlen = document.getElementById(field).maxLength;
    document.getElementById(output).innerHTML = curr_length+'/'+field_mlen;
    return 1;
}

Once you have placed it, you can run it using method presented in previous step (also there is example of usage described). This script checks how many characters did you use (each time you use one) and how many are allowed by text field’s maxlength parameter, then it changes value between the div tags. There are 2 variables called ‘curr_length’ and ‘field_mlen’. First one gets and store number of characters you’ve typed (as I already wrote each time you type something in the field) and second one stores value of maxlength parameter of the field on which you are using this function. Then it simply shows both values with ‘/’ separator in the middle. Note:

• I applied this script to every field

Step 6 – Password Strength

Now it will be something which will check for how strong the password is. Scripts like this are usually not very extended so here is the basic version of it:

function check_v_pass(field, output) {
    pass_buf_value = document.getElementById(field).value;
    pass_level = 0;
    if (pass_buf_value.match(/[a-z]/g)) {
        pass_level++;
    }
    if (pass_buf_value.match(/[A-Z]/g)) {
        pass_level++;
    }
    if (pass_buf_value.match(/[0-9]/g)) {
        pass_level++;
    }
    if (pass_buf_value.length < 5) {
        if(pass_level >= 1) pass_level--;
    } else if (pass_buf_value.length >= 20) {
        pass_level++;
    }
    output_val = '';
    switch (pass_level) {
        case 1: output_val='Weak'; break;
        case 2: output_val='Normal'; break;
        case 3: output_val='Strong'; break;
        case 4: output_val='Very strong'; break;
        default: output_val='Very weak'; break;
    }
    if (document.getElementById(output).value != pass_level) {
        document.getElementById(output).value = pass_level;
        document.getElementById(output).innerHTML = output_val;
    }
    return 1;
}

As a ‘field’ argument we should put an ID of field to check and in ‘output’ goes place where the result will be shown. Of course DON’T TYPE IT HERE but when you are using this function (here you are only creating it) so replace values only when you write OnKeyUp="… in your input . Function also here contains two variables. First one called ‘pass_level’ contains current password strength and it is set to 0 by default because password field is empty at the beginning. Second variable named ‘pass_buf_value’ contains current value of your password field. Below those two you can see some if()-s, they are looking for some characters that may increase password strength level and if one of them find anything it updates value of ‘pass_level’ variable by adding 1 to it. Of course rest of the script returns proper informations, it chooses right text depending on current ‘pass_level’ value. Apply this script to your password field.

Step 7 – Comparing passwords

Third script compare value from password field with value from confirm password field to make user sure, he typed exactly what he wanted. Characters here are not visible so to check if user did not make any mistakes we need two different fields and both has to contain same values when typing, only then form is filled correctly:

function compare_valid(field, field2) {
    fld_val = document.getElementById(field).value;
    fld2_val = document.getElementById(field2).value;
    if (fld_val == fld2_val) {
        update_css_class(field2, 2);
        p_valid_r = 1;
    } else {
        update_css_class(field2, 1);
        p_valid_r = 0;
    }
    return p_valid_r;
}

Guess how to use it? Only tip I will give you is that you should use it only on the compare password field and nowhere else. Well, this script as you can see arrogates values of 2 fields to two different variables called ‘fld_val’ and ‘fld2_val’. There is an if() construction below them which compares those two values and changes between 2 versions of style (green when everything is good and red when there are any errors).

Step 8 – Email verification

A bit more complicated script but usage is easy as always. Every email address must fulfill following criteria:
1. Must have some characters at the beginning (letters or numbers (and some less important))
2. Must have @ (at) character
3. Must have domain name
a) Must have first word
b) Must have . (dot) character
c) Must have second word
4. And in the event that somebody believe his email address contains big letters it must convert characters to small ones

function check_v_mail(field) {
    fld_value = document.getElementById(field).value;
    is_m_valid = 0;
    if (fld_value.indexOf('@') >= 1) {
        m_valid_dom = fld_value.substr(fld_value.indexOf('@')+1);
        if (m_valid_dom.indexOf('@') == -1) {
            if (m_valid_dom.indexOf('.') >= 1) {
                m_valid_dom_e = m_valid_dom.substr(m_valid_dom.indexOf('.')+1);
                if (m_valid_dom_e.length >= 1) {
                    is_m_valid = 1;
                }
            }
        }
    }
    if (is_m_valid) {
        update_css_class(field, 2);
        m_valid_r = 1;
    } else {
        update_css_class(field, 1);
        m_valid_r = 0;
    }
    return m_valid_r;
}

Place OnKeyUp="… into input tag where email address is and create new div with adequate ID to make it work. This function basically looks up if the email address is typed correctly. First it arrogates value of the field to ‘fld_value’ variable to work with it. Everything is supervised by 4 if() constructions. They are step by step checking if there is @ symbol (1), then if it is on the second or further position (2). At the end if there is "dot" character after @ symbol (3) and finally if there are any characters before and after this "dot" (4). If any of if()-a find error it stops script and switches to red style wrong style of field. Those if()-s are a bit complicated as you can see but finally result is same as always, it chooses between green and red style and then shows it. Second part of this script is similar to switching between two options in already explained part so it should be clear for now.

Step 9 – Empty fields

Short function checking if there is more than 0 characters in our inputs. If there are empty spaces somewhere we can’t create new account:

function valid_length(field) {
    length_df = document.getElementById(field).value.length;
    if (length_df >= 1 && length_df <= document.getElementById(field).maxLength) {
        update_css_class(field, 2);
        ret_len = 1;
    } else {
        update_css_class(field, 1);
        ret_len = 0;
    }
    return ret_len;
}

Like usually here also we have to give a text field ID and ID of div where result of script should be as an arguments. Add this script to each field (except gender one). This one has only one interesting part to explain because rest should be clear for you already. I’m talking about this long if() construction in the third line. It first checks if value of the field has at least one character and than in its second part if it has no more than ‘max number’ of characters. Then it just changes between two options – right and wrong.

Step 10 – Coloring

This one is very short and only changes mode between two classes to make better visual effects. Classes must be defined in our CSS part of document (they are if you copied definitions from step 4). I called them wrong and correct:

function update_css_class(field, class_index) {
    if (class_index == 1) {
        class_s = 'wrong';
    } else if (class_index == 2) {
        class_s = 'correct';
    }
    document.getElementById(field).className = class_s;
    return 1;
}

As you may have already noticed this function is ran by other ones. Previous and further scripts puts arguments here. First argument is an ID of field you are currently working with and second is number 1 or 2. This numbers are being changed depending on actual field status to let then change its style to correct one. Let’s continue to next step.

Step 11 – Last Javascript verification

This is the last script using javascript. It calls out every function once more for sure and returns encountered errors or allows us to continue. It does not require refreshing whole page but check form quickly after pressing "Register". That’s very important script and other ones were mostly make to let this one work:

function validate_all(output) {
    t1 = valid_length('login');
    t2 = valid_length('password');
    t3 = compare_valid('password', 'c_password');
    t4 = check_v_mail('email');
    t5 = check_v_pass('password', 'pass_result');

    errorlist = '';
    if (! t1) {
        errorlist += 'Login is too short/long<br />';
    }
    if (! t2) {
        errorlist += 'Password is too short/long<br />';
    }
    if (! t3) {
        errorlist += 'Passwords are not the same<br />';
    }
    if (! t4) {
        errorlist += 'Mail is wrong<br />';
    }
    if (errorlist) {
        document.getElementById(output).innerHTML = errorlist;
        return false;
    }
    return true;
}

This script to work must be added to your submission form. And don’t forget to put div tag with ‘results’ id somewhere so that there outcome could go (in my case it is at the bottom of form so below just made ‘button’). Once you press new button this function recalls other functions from previous steps and checks once more for any mistakes for sure. If everything is fine it let you create account but if something is wrong it shows errors there where you’ve placed your ‘div’ with ‘results’ ID. Also in this script you can define your own error messages.

Step 12 – Final verification

From now it will be mostly about PHP (and MySQL) so if you don’t want to make such a form on you website you can just leave it and use methods I showed in other situations Otherwise if you would like to store account data using MySQL database continue reading.
Javascript actually doesn’t protect our database from anything, it only makes people lifes easier If we want to be sure that filled form is 100% correct we must use PHP verification before we can add anything to our database – that is because if somebody will turn javascript off still he can write whatever he want while creating account and this may make database errors occurs. To add some very simply PHP script create index.php file which will be launched after pressing "Register" button. Well, here’s the code you should put to your index.php file:

index.php

<?php

// set error reporting level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

session_start();
if (isset($_POST['submit'])) {

    $sLogin = escape($_POST['login']);
    $sPass = escape($_POST['pass']);
    $sCPass = escape($_POST['cpass']);
    $sEmail = escape($_POST['email']);
    $iGender = (int)$_POST['gender'];

    $sErrors = '';
    if (strlen($sLogin) >= 1 and strlen($sLogin) <= 25) {
        if (strlen($sPass) >= 1 and strlen($sPass) <= 25) {
            if (strlen($sEmail) >= 1 and strlen($sEmail) <= 55) {
                if ($sPass == $sCPass) {
                    if (ereg('^[a-zA-Z0-9\-\.]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$', $sEmail)) {
                        if ($iGender == '1' xor $iGender == '0') {
                            $sVcode = escape($_POST['vcode']);
                            if (! isset($_SESSION['valdiation_code'])) {
                                // Here you can send him some verification code (by email or any another ways)
                                $sCode = uniqid(rand(), true);
                                $_SESSION['valdiation_code'] = md5($sCode);

                            } elseif (md5($sVcode) == $_SESSION['valdiation_code']) {
                                // Here you can add him to database
                                // mysql_query('INSERT INTO ....

                                // display step 3 (final step)
                                echo strtr(file_get_contents('templates/step3.html'), array());
                                exit;
                            } else {
                                $sErrors = 'Verification code is wrong';
                            }
                        } else {
                            $sErrors = 'Gender is wrong';
                        }
                    } else {
                        $sErrors = 'Email is wrong';
                    }
                } else {
                    $sErrors = 'Passwords are not the same';
                }
            } else {
                $sErrors = 'Address email is too long';
            }
        } else {
            $sErrors = 'Password is too long';
        }
    } else {
        $sErrors = 'Login is too long';
    }

    // display step 2
    $aParams = array(
        '{errors}' => $sErrors,
        '{login}' => $sLogin,
        '{pass}' => $sPass,
        '{cpass}' => $sCPass,
        '{gender}' => $iGender,
        '{email}' => $sEmail,
        '{vcode}' => $sCode
    );
    echo strtr(file_get_contents('templates/step2.html'), $aParams);
    exit;
}

// unset validation code if exists
unset($_SESSION['valdiation_code']);

// draw registration page
echo strtr(file_get_contents('templates/main_page.html'), array());

// extra useful function to make POST variables more safe
function escape($s) {
    //return mysql_real_escape_string(strip_tags($s)); // uncomment in when you will use connection with database
    return strip_tags($s);
}

Now, lets try to understand this. This script generally does EXACTLY the same what previous JS scripts did but it is launched on the server side to check everything once more. Continue reading to check how does it work.

So, please pay attention to all our checks, and – to added validation functional. When our form submitted, the next step will contain single field to accept some validation code. Of course, for our demo page you always can see that checking code. But, as some suggestion – I can offer you to enable email confirmation (as example). So, you have to add email sending to this code also. And, only after accepting that extra validation code (if this code was right) – only then allow member registration. Please read my comments carefully.

Live Demo

download in archive

Conclusion

So that is all for now. In the final version I also added some classes which make table better positioned (stable) so make sure you’ve checked it out. While creating your own form you can expand it anyhow relying on what I wrote or try to use your imagination to create something better. Hope you enjoyed it. Good luck and welcome back!

Powerful Chat System – Lesson 3

Today we continue a series of articles on the creation of powerful chat system. Our third lesson will contain next elements: join form (with html5 validation). A long ago, I have already made similar validation. So you can refresh your memories if you like.

Today I will publish updated sources of our growing project (several files was modified, plus I expanded structure of database slightly). All project is well structured: system classes is in ‘classes’ folder, stylesheets in ‘css’ folder, template files in ‘templates’ folder, and – new folder ‘js’ for javascript files.

Live Demo

download in package

Now – download the source files and lets start coding !

Step 1. SQL

I have added new field into table of profiles where we will store its first names. So, please execute next SQL:

ALTER TABLE `cs_profiles` ADD `first_name` varchar(255) NOT NULL default '' AFTER `name`;

Step 2. HTML

I have updated template with login form. As you can see – I have expanded this markup and added join form here:

templates/logout_form.html

<div class="column">
    <h3>Powerful Chat System Demonstration</h3>
    <p>Our chat will contain next features: registration, main chat, profiles with avatars, ranking system, private messaging, custom rooms, moderation / administration and possible something else (in future).</p>
</div>
<div class="column">

    <div class="tabs_container">
        <ul class="tabs">
            <li class="active"><h3>Log In</h3></li>
            <li><h3>Join</h3></li>
        </ul>
    </div>

    <div class="nav_container">
        <form class="login_form" action="index.php" method="post" id="1">
            <label>Username:</label><input type="text" name="username">
            <label>Password:</label><input type="password" name="password">
            <input type="submit" name="Login" value="Login">
        </form>
        <form class="join_form" action="index.php" method="post" id="2" style="display: none;">

            <label>Full name:</label>
            <input type="text" id="username" name="username" placeholder="Your name" maxlength="128" title="Your name" required>

            <label>First name:</label>
            <input type="text" id="firstname" name="firstname" placeholder="Your first name" maxlength="128" title="Your first name">

            <label>Last name:</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your last name" maxlength="128" title="Your last name">

            <label>Email:</label>
            <input type="text" id="email" name="email" placeholder="Your email" maxlength="128" title="Format: *@gmail.com" pattern=".*@gmail\.com" required>

            <label>Password:</label>
            <input type="text" id="password" name="password" maxlength="128" title="Password" required>

            <label>Repeat Password:</label>
            <input type="text" id="password" name="password" maxlength="128" title="Repeat password" required oninput="checkpass(this)">

            <input type="submit" name="Join" value="Join">
        </form>
    </div>

</div>

<script>
$(document).ready(function(){
    $('.tabs li h3').click(function () {
      $('.tabs li').removeClass('active');
      $(this).parent().addClass('active');

      $('.nav_container form').hide();
      var index = $('.tabs li h3').index(this);
      $('.nav_container form').eq(index).show();
      return false;
    });
});

function checkpass(input) {
    if (input.value != document.getElementById('password').value) {
        input.setCustomValidity('Password must match.');
    } else {
        input.setCustomValidity('');
    }
}
</script>

Please pay attention to HTML structure of join form, it contain several new attributes for html5 validation: placeholder, required and pattern. This is pretty interesting.

Step 3. CSS

This file has updated too

css/main.css

/* page layout */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#eee;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

/* main styles */
.container {
    background-color: #222;
    color: #bbb;
    margin: 20px auto;
    overflow: hidden;
    padding: 20px;
    position: relative;
    width: 800px;
}
.container h2 {
    color: #fff;
    margin-bottom: 10px;
}
.column {
    float: left;
    width: 48%;
}
.column:first-child {
    margin-right: 4%;
}
.column > * {
    color: #ddd;
    margin-bottom: 10px;
}

/* tabs section */
.tabs_container {
    margin: 0;
}
.tabs {
    overflow: hidden;
}
.tabs li {
    float: left;
    list-style: none;
}
.tabs li h3:first-child {
    margin-left: 10px
}
.tabs li h3 {
    border: 1px solid #ddd;
    border-bottom-width: 0;
    display: block;
    margin: 0 2px 0 0;
    padding: 6px 10px 4px
}
.tabs li.active h3 {
    background-color: #555;
    border: 1px solid #ddd;
    border-bottom-width: 0;

    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}
.tabs li h3:hover {
    background-color: #666;
    cursor: pointer;
}
.tabs li.active h3:hover {
    background-color: #555;
    cursor: normal;
}
.nav_container form {
    background-color: #555;
    display: block;
    padding: 15px;
}
.column h3 {
    color: #fff;
}
.login_form input,.login_form label,
.join_form input,.join_form label {
    display: block;
    margin-bottom: 10px;
}
input[type=text], input[type=password], input[type=submit] {
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
input[type=text], input[type=password] {
    font-size: 16px;
    height: 25px;
    margin-right: 10px;
    width: 200px;
}
input[type=submit]{
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    height: 35px;
    padding: 5px;
}

/* chat block */
.chat_messages {
    border: 1px solid #888;
    box-shadow: 0 0 5px #AAA;
    color: #000;
    padding: 10px;
}
.chat_messages h2 {
    color: #fff;
}
.chat_messages .message {
    background-color: #fff;
    margin: 5px;
    padding: 5px;

    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.chat_messages .message span {
    color: #444;
    font-size: 10px;
    margin-left: 10px;
}
.chat_submit_form {
    margin: 10px 0px;
}
.chat_submit_form div {
    float: left;
    width: 49%;
}
.chat_submit_form .error, .chat_submit_form .success, .chat_submit_form .protect {
    display: none;
}
.chat_submit_form .error {
    color: #f55;
}
.chat_submit_form .success {
    color: #5f5;
}
.chat_submit_form .protect {
    color: #55f;
}

Step 4. PHP

Now, lets review php sources. Our index.php file has updated. I have added here join processing functional. Before actual joining, we have to check if someone else was joined with same email (this field should be unique of course)

index.php

<?php

// set error reporting level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

require_once('classes/Services_JSON.php');
require_once('classes/CMySQL.php'); // including service class to work with database
require_once('classes/CLogin.php'); // including service class to work with login processing

$sErrors = '';
// join processing
if (! isset($_SESSION['member_id']) && $_POST['Join'] == 'Join') {
    $sUsername = $GLOBALS['MySQL']->escape($_POST['username']);
    $sFirstname = $GLOBALS['MySQL']->escape($_POST['firstname']);
    $sLastname = $GLOBALS['MySQL']->escape($_POST['lastname']);
    $sEmail = $GLOBALS['MySQL']->escape($_POST['email']);
    $sPassword = $GLOBALS['MySQL']->escape($_POST['password']);

    if ($sUsername && $sEmail && $sPassword) {
        // check if already exist
        $aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `cs_profiles` WHERE `email`='{$sEmail}'");
        if ($aProfile['id'] > 0) {
            $sErrors = '<h2>Another profile with same email already exist</h2>';
        } else {
            // generate Salt and Cached password
            $sSalt = 'testing'; // TODO - we will add generation of salt in future
            $sPass = sha1(md5($sPassword) . $sSalt);

            // add new member into database
            $sSQL = "
                INSERT INTO `cs_profiles` SET
                `name` = '{$sUsername}',
                `first_name` = '{$sFirstname}',
                `last_name` = '{$sLastname}',
                `email` = '{$sEmail}',
                `password` = '{$sPass}',
                `salt` = '{$sSalt}',
                `status` = 'active',
                `role` = '1',
                `date_reg` = NOW();
            ";
            $GLOBALS['MySQL']->res($sSQL);

            // autologin
            $GLOBALS['CLogin']->performLogin($sUsername, $sPassword);
        }
    }
}

// login system init and generation code
$sLoginForm = $GLOBALS['CLogin']->getLoginBox();

$sChat = '<h2>You do not have rights to use chat</h2>';
$sInput = '';
if ($_SESSION['member_id'] && $_SESSION['member_status'] == 'active' && $_SESSION['member_role']) {
    require_once('classes/CChat.php'); // including service class to work with chat

    // get last messages
    $sChat = $GLOBALS['MainChat']->getMessages();
    if ($_GET['action'] == 'get_last_messages') { // regular updating of messages in chat
        $oJson = new Services_JSON();
        header('Content-type: application/json');
        echo $oJson->encode(array('messages' => $sChat));
        exit;
    }

    // get input form
    $sInput = $GLOBALS['MainChat']->getInputForm();

    if ($_POST['message']) { // POST-ing of message
        $iRes = $GLOBALS['MainChat']->acceptMessage();

        $oJson = new Services_JSON();
        header('Content-type: application/json');
        echo $oJson->encode(array('result' => $iRes));
        exit;
    }
}

// draw common page
echo strtr(file_get_contents('templates/main_page.html'), array('{form}' => $sLoginForm . $sErrors, '{chat}' => $sChat, '{input}' => $sInput));

As you can see – I have added chat functionality today.

classes/CLogin.php

<?php

class CLogin {

    // constructor
    function CLogin() {
        session_start();
    }

    // get login box function
    function getLoginBox() {
        if (isset($_GET['logout'])) { // logout processing
            if (isset($_SESSION['member_name']) && isset($_SESSION['member_pass']))
                $this->performLogout();
        }

        if ($_POST && $_POST['Login'] == 'Login' && $_POST['username'] && $_POST['password']) { // login processing
            if ($this->checkLogin($_POST['username'], $_POST['password'], false)) { // successful login
                $this->performLogin($_POST['username'], $_POST['password']);
                header( "Location:{$_SERVER['REQUEST_URI']}" );
                exit;
            } else { // wrong login
                return file_get_contents('templates/login_form.html') . '<h2>Username or Password is incorrect</h2>';
            }
        } else { // in case if we already logged (on refresh page):
            if (isset($_SESSION['member_name']) && $_SESSION['member_name'] && $_SESSION['member_pass']) {
                $aReplaces = array(
                    '{name}' => $_SESSION['member_name'],
                    '{status}' => $_SESSION['member_status'],
                    '{role}' => $_SESSION['member_role'],
                );
                return strtr(file_get_contents('templates/logout_form.html'), $aReplaces);
            }

            // otherwise - draw login form
            return file_get_contents('templates/login_form.html');
        }
    }

    // perform login
    function performLogin($sName, $sPass) {
        $this->performLogout();

        // make variables safe
        $sName = $GLOBALS['MySQL']->escape($sName);

        $aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `cs_profiles` WHERE `name`='{$sName}'");
        // $sPassEn = $aProfile['password'];
        $iPid = $aProfile['id'];
        $sSalt = $aProfile['salt'];
        $sStatus = $aProfile['status'];
        $sRole = $aProfile['role'];

        $sPass = sha1(md5($sPass) . $sSalt);

        $_SESSION['member_id'] = $iPid;
        $_SESSION['member_name'] = $sName;
        $_SESSION['member_pass'] = $sPass;
        $_SESSION['member_status'] = $sStatus;
        $_SESSION['member_role'] = $sRole;
    }

    // perform logout
    function performLogout() {
        unset($_SESSION['member_id']);
        unset($_SESSION['member_name']);
        unset($_SESSION['member_pass']);
        unset($_SESSION['member_status']);
        unset($_SESSION['member_role']);
    }

    // check login
    function checkLogin($sName, $sPass, $isHash = true) {
        // make variables safe
        $sName = $GLOBALS['MySQL']->escape($sName);
        $sPass = $GLOBALS['MySQL']->escape($sPass);

        $aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `cs_profiles` WHERE `name`='{$sName}'");
        $sPassEn = $aProfile['password'];

        if ($sName && $sPass && $sPassEn) {
            if (! $isHash) {
                $sSalt = $aProfile['salt'];
                $sPass = sha1(md5($sPass) . $sSalt);
            }
            return ($sPass == $sPassEn);
        }
        return false;
    }
}

$GLOBALS['CLogin'] = new CLogin();

Minor changes were made in this file too. The rest of the functional was not changed. We will continue enhance our chat soon.

Live Demo

download in archive

Conclusion

I hope that our new series of articles of chat system creation is useful and interesting for you. If you want to share your ideas, or you noticed any weakness – don’t hesitate to contact us. Good luck and welcome back!

CSS3 Image Hover Effects

Today I will tell you how to create different CSS3 image hover effects. I hope that you still remember our one old tutorial. We used javascript there. Today I will try to make something similar with using CSS3. In the result gallery page we will have 9 images, each of them have own hover effect.

Live Demo

download result

Ok, download the example files and lets start !

Step 1. HTML

First, lets prepare the main HTML markup for our demo gallery. As you can see – result structure is quite easy. Here are set of DIV objects. Each of them contain one image and some virtual mask (DIV). Last one element will contain two masks.

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Image Hover Effects | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/gall.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>CSS3 Image Hover Effects</h2>
            <a href="http://www.script-tutorials.com/css3-image-hover-effects/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>

        <!-- panel with buttons -->
        <div class="photos">
            <div>
                <img src="images/pic1.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic2.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic3.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic4.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic5.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic6.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic7.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic8.jpg" />
                <div></div>
            </div>
            <div class="pair">
                <img src="images/pic9.jpg" />
                <div></div>
                <div></div>
            </div>
        </div>
    </body>
</html>

Step 2. CSS

I omit styles of layout.css. Here are nothing interesting. The most interesting – next one file (where I have prepared all necessary styles of our gallery):

css/gall.css

.photos {
    width: 945px;
    height: 400px;
    margin: 100px auto;
    position:relative;
}
.photos > div {
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #444;
    float: left;
    height: 100px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    width: 300px;
    z-index: 1;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div img{
    width: 100%;
}
.photos > div:hover{
    z-index: 10;

    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -ms-transform:scale(2.0);
    -o-transform:scale(2.0);
    transform:scale(2.0);
}
.photos > div div {
    background: url(../images/hover.gif) repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 15;

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div:nth-child(1):hover div {
    height: 0%;
}

.photos > div:nth-child(2):hover div {
    height: 0%;
    margin-top: 100px;
}
.photos > div:nth-child(3):hover div {
    width: 0%;
}
.photos > div:nth-child(4):hover div {
    margin-left: 300px;
    width: 0%;
}
.photos > div:nth-child(5):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
}
.photos > div:nth-child(6):hover div {
    margin-left: 150px;
    width: 0%;
}
.photos > div:nth-child(7):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;

    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.photos > div:nth-child(8):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;

    -webkit-transform: rotateZ(600deg);
    -moz-transform: rotateZ(600deg);
    -ms-transform: rotateZ(600deg);
    -o-transform: rotateZ(600deg);
    transform: rotateZ(600deg);
}
.photos > div.pair div {
    width: 50%;
}
.photos > div.pair div:nth-child(odd) {
    margin-left: 150px;
}
.photos > div.pair:hover div {
    width: 0%;
}
.photos > div.pair:hover div:nth-child(odd) {
    margin-left: 300px;
}

Live Demo

download result

Conclusion

Today we have nine great onhover image effects. Welcome back to read our new tutorials!

HTML5 Game Development – Lesson 7

Today we will create our first complete game – Arkanoid. In this lesson I will show you how to detect basic collisions and work with HTML5 local storage. You can operate with pad using mouse and keyboard (left/right buttons). We will store in local storage elapsed time of previous game and amount of broken bricks (points).

Here you can read our previous lesson: Developing Your First HTML5 Game – Lesson 6.

Here are our demo and downloadable package:

Live Demo

download in package

Ok, download the example files and lets start coding !

Step 1. HTML

Here is source code of our seventh lesson

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Game Development - Lesson 7 | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.5.2.min.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 Game Development - Lesson 7</h2>
            <a href="http://www.script-tutorials.com/html5-game-development-lesson-7/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>

        <div class="container">
            <canvas id="scene" width="800" height="600"></canvas>
        </div>
    </body>
</html>

Step 2. CSS

Here are used CSS styles.

css/main.css

/* page layout styles */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#eee;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 800px;
}

Step 3. JS

js/jquery-1.5.2.min.js

We use jQuery for our lesson. Available in package. Next file most important (here are all our html5 functional):

js/script.js

// inner variables
var canvas, ctx;

var iStart = 0;
var bRightBut = false;
var bLeftBut = false;
var oBall, oPadd, oBricks;
var aSounds = [];
var iPoints = 0;
var iGameTimer;
var iElapsed = iMin = iSec = 0;
var sLastTime, sLastPoints;

// objects :
function Ball(x, y, dx, dy, r) {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.r = r;
}
function Padd(x, w, h, img) {
    this.x = x;
    this.w = w;
    this.h = h;
    this.img = img;
}
function Bricks(w, h, r, c, p) {
    this.w = w;
    this.h = h;
    this.r = r; // rows
    this.c = c; // cols
    this.p = p; // padd
    this.objs;
    this.colors = ['#9d9d9d', '#f80207', '#feff01', '#0072ff', '#fc01fc', '#03fe03']; // colors for rows
}

// -------------------------------------------------------------
// draw functions :

function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // fill background
    ctx.fillStyle = '#111';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    // draw Ball (circle)
    ctx.fillStyle = '#f66';
    ctx.beginPath();
    ctx.arc(oBall.x, oBall.y, oBall.r, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();

    if (bRightBut)
        oPadd.x += 5;
    else if (bLeftBut)
        oPadd.x -= 5;

    // draw Padd (rectangle)
    ctx.drawImage(oPadd.img, oPadd.x, ctx.canvas.height - oPadd.h);

    // draw bricks (from array of its objects)
    for (i=0; i < oBricks.r; i++) {
        ctx.fillStyle = oBricks.colors[i];
        for (j=0; j < oBricks.c; j++) {
            if (oBricks.objs[i][j] == 1) {
                ctx.beginPath();
                ctx.rect((j * (oBricks.w + oBricks.p)) + oBricks.p, (i * (oBricks.h + oBricks.p)) + oBricks.p, oBricks.w, oBricks.h);
                ctx.closePath();
                ctx.fill();
            }
        }
    }

    // collision detection
    iRowH = oBricks.h + oBricks.p;
    iRow = Math.floor(oBall.y / iRowH);
    iCol = Math.floor(oBall.x / (oBricks.w + oBricks.p));

    // mark brick as broken (empty) and reverse brick
    if (oBall.y < oBricks.r * iRowH && iRow >= 0 && iCol >= 0 && oBricks.objs[iRow][iCol] == 1) {
        oBricks.objs[iRow][iCol] = 0;
        oBall.dy = -oBall.dy;
        iPoints++;

        aSounds[0].play(); // play sound
    }

    // reverse X position of ball
    if (oBall.x + oBall.dx + oBall.r > ctx.canvas.width || oBall.x + oBall.dx - oBall.r < 0) {
        oBall.dx = -oBall.dx;
    }

    if (oBall.y + oBall.dy - oBall.r < 0) {
        oBall.dy = -oBall.dy;
    } else if (oBall.y + oBall.dy + oBall.r > ctx.canvas.height - oPadd.h) {
        if (oBall.x > oPadd.x && oBall.x < oPadd.x + oPadd.w) {
            oBall.dx = 10 * ((oBall.x-(oPadd.x+oPadd.w/2))/oPadd.w);
            oBall.dy = -oBall.dy;

            aSounds[2].play(); // play sound
        }
        else if (oBall.y + oBall.dy + oBall.r > ctx.canvas.height) {
            clearInterval(iStart);
            clearInterval(iGameTimer);

            // HTML5 Local storage - save values
            localStorage.setItem('last-time', iMin + ':' + iSec);
            localStorage.setItem('last-points', iPoints);

            aSounds[1].play(); // play sound
        }
    }

    oBall.x += oBall.dx;
    oBall.y += oBall.dy;

    ctx.font = '16px Verdana';
    ctx.fillStyle = '#fff';
    iMin = Math.floor(iElapsed / 60);
    iSec = iElapsed % 60;
    if (iMin < 10) iMin = "0" + iMin;
    if (iSec < 10) iSec = "0" + iSec;
    ctx.fillText('Time: ' + iMin + ':' + iSec, 600, 520);
    ctx.fillText('Points: ' + iPoints, 600, 550);

    if (sLastTime != null && sLastPoints != null) {
        ctx.fillText('Last Time: ' + sLastTime, 600, 460);
        ctx.fillText('Last Points: ' + sLastPoints, 600, 490);
    }
}

// initialization
$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var width = canvas.width;
    var height = canvas.height;

    var padImg = new Image();
    padImg.src = 'images/padd.png';
    padImg.onload = function() {};

    oBall = new Ball(width / 2, 550, 0.5, -5, 10); // new ball object
    oPadd = new Padd(width / 2, 120, 20, padImg); // new padd object
    oBricks = new Bricks((width /  - 1, 20, 6, 8, 2); // new bricks object

    oBricks.objs = new Array(oBricks.r); // fill-in bricks
    for (i=0; i < oBricks.r; i++) {
        oBricks.objs[i] = new Array(oBricks.c);
        for (j=0; j < oBricks.c; j++) {
            oBricks.objs[i][j] = 1;
        }
    }

    aSounds[0] = new Audio('media/snd1.wav');
    aSounds[0].volume = 0.9;
    aSounds[1] = new Audio('media/snd2.wav');
    aSounds[1].volume = 0.9;
    aSounds[2] = new Audio('media/snd3.wav');
    aSounds[2].volume = 0.9;

    iStart = setInterval(drawScene, 10); // loop drawScene
    iGameTimer = setInterval(countTimer, 1000); // inner game timer

    // HTML5 Local storage - get values
    sLastTime = localStorage.getItem('last-time');
    sLastPoints = localStorage.getItem('last-points');

    $(window).keydown(function(event){ // keyboard-down alerts
        switch (event.keyCode) {
            case 37: // 'Left' key
                bLeftBut = true;
                break;
            case 39: // 'Right' key
                bRightBut = true;
                break;
        }
    });
    $(window).keyup(function(event){ // keyboard-up alerts
        switch (event.keyCode) {
            case 37: // 'Left' key
                bLeftBut = false;
                break;
            case 39: // 'Right' key
                bRightBut = false;
                break;
        }
    });

    var iCanvX1 = $(canvas).offset().left;
    var iCanvX2 = iCanvX1 + width;
    $('#scene').mousemove(function(e) { // binding mousemove event
        if (e.pageX > iCanvX1 && e.pageX < iCanvX2) {
            oPadd.x = Math.max(e.pageX - iCanvX1 - (oPadd.w/2), 0);
            oPadd.x = Math.min(ctx.canvas.width - oPadd.w, oPadd.x);
        }
    });
});

function countTimer() {
    iElapsed++;
}

I added my comments anywhere, hope that all code is pretty understandable. Please pay attention to ‘localStorage’ object to understand how to work with HTML5 Local storage (I use ‘setItem’ method to store something and ‘getItem’ to read this from local storage). Also, it can be also interesting to understand how to calculate collisions between the ball and bricks.

Live Demo

download in package

Conclusion

Today, we made our first arkanoid game. Most functionality are already here. We have implemented our first knowledge about collisions and HTML5 local storage too. I will be glad to see your thanks and comments. Good luck!

CSS3 Modal Popups

Today I will tell you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago, in order to achieve such effects, we used jQuery. But, as it turned out, CSS3 has all the necessary tools for making modal windows too. In our demonstration I have prepared single page with two popup elements: join form and login form. Welcome to test results and understand how it was made.

Live Demo

download result

Ok, download the example files and lets start !

Step 1. HTML

First, lets create the main HTML markup. As you can see – the structure is quite easy. Here are one panel with buttons and two popups. Each of them contains own overlay DIV element and popup DIV element with some content inside and ‘close’ button.

index.html

<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Modal Popups | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/modal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>CSS3 Modal Popups</h2>
            <a href="http://www.script-tutorials.com/css3-modal-popups/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>

        <!-- panel with buttons -->
        <div class="main">
            <div class="panel">
                <a href="#login_form" id="login_pop">Log In</a>
                <a href="#join_form" id="join_pop">Sign Up</a>
            </div>

        </div>

        <!-- popup form #1 -->
        <a href="#x" class="overlay" id="login_form"></a>
        <div class="popup">
            <h2>Welcome Guest!</h2>
            <p>Please enter your login and password here</p>
            <div>
                <label for="login">Login</label>
                <input type="text" id="login" value="" />
            </div>
            <div>
                <label for="password">Password</label>
                <input type="password" id="password" value="" />
            </div>
            <input type="button" value="Log In" />

            <a class="close" href="#close"></a>
        </div>

        <!-- popup form #2 -->
        <a href="#x" class="overlay" id="join_form"></a>
        <div class="popup">
            <h2>Sign Up</h2>
            <p>Please enter your details here</p>
            <div>
                <label for="email">Login (Email)</label>
                <input type="text" id="email" value="" />
            </div>
            <div>
                <label for="pass">Password</label>
                <input type="password" id="pass" value="" />
            </div>
            <div>
                <label for="firstname">First name</label>
                <input type="text" id="firstname" value="" />
            </div>
            <div>
                <label for="lastname">Last name</label>
                <input type="text" id="lastname" value="" />
            </div>
            <input type="button" value="Sign Up" />&nbsp;&nbsp;&nbsp;or&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Log In</a>

            <a class="close" href="#close"></a>
        </div>
    </body>
</html>

Step 2. CSS

I omit styles of layout.css. Here are nothing interesting. The most interesting – next one file (where I have prepared all necessary styles for our modal popups):

css/modal.css

.main {
    background: #aaa url(../images/bg.jpg) no-repeat;
    width: 800px;
    height: 600px;
    margin: 50px auto;
}
.panel {
    background-color: #444;
    height: 34px;
    padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
    border: 2px solid #aaa;
    color: #fff;
    display: block;
    float: right;
    margin-right: 10px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 1px 1px #000;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
    border-color: #eee;
}
.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 10;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
    margin-bottom: 10px;
}
.popup label {
    display: inline-block;
    text-align: left;
    width: 120px;
}
.popup input[type="text"], .popup input[type="password"] {
    border: 1px solid;
    border-color: #999 #ccc #ccc;
    margin: 0;
    padding: 2px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
    border-color: #555 #888 #888;
}

Live Demo

download result

Conclusion

Today we have made another great CSS3 demonstration – popup modal windows. Welcome back to read our new tutorials!

Powerful Chat System – Lesson 2

Today we continue a series of articles on the creation of powerful chat system. Our second lesson will contain next elements: smart chat (ajax, with spam filtering – protection from the frequent messages). I have decided to make registration for next lesson. Hope that it is ok for you.

Today I have included next elements: chat processor, plus – slight corrections in our previous sources. All project is well structured: system classes is in ‘classes’ folder, stylesheets in ‘css’ folder, template files in ‘templates’ folder, and – new folder ‘js’ for javascript files.

Live Demo

download in package

Now – download the source files and lets start coding !

Step 1. SQL

This table has got minor changes. I have changed type of field ‘when’.

CREATE TABLE `cs_messages` (
  `id` int(11) unsigned NOT NULL auto_increment,
  `sender` int(11) unsigned NOT NULL,
  `recipient` int(11) unsigned NOT NULL default '0',
  `message` VARCHAR(255) NOT NULL,
  `when` int(11) NOT NULL default '0',
  `room` int(5) unsigned NOT NULL default '0',
  `type` tinyint(1) unsigned NOT NULL default '0',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Step 2. HTML

This is main (index) page html markup:

templates/main_page.html

<!DOCTYPE html>
<html lang="en" >
<head>
    <title>Powerful Chat System - Lesson 2</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <header>
        <h2>Powerful Chat System - Lesson 2</h2>
        <a href="http://www.script-tutorials.com/powerful-chat-system-lesson-2/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
    </header>
    <div class="container">
        {form}
    </div>
    <div class="container">
        <h2>Main Chat Block</h2>
        <div class="chat_messages">
            {chat}
        </div>
        {input}
    </div>
</body>
</html>

As you can see – I have changed our second container (which contains our ajax chat).

templates/login_form.html and templates/logout_form.html

These files haven’t changed since last time. Next one new template – chat form:

templates/chat.html

<form class="chat_submit_form">
    <div><input type="text" name="message" /><input type="submit" value="Submit" name="Submit" /></div>
    <div>
        <h3 class="error">Some error occurs during sending message</h3>
        <h3 class="success">Message successfully sent</h3>
        <h3 class="protect">Please wait 5 secs before adding next message</h3>
    </div>
</form>
<script src="js/chat.js"></script>

Step 3. CSS

This file contains updated styles of our chat

css/main.css

/* page layout */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#eee;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

/* main styles */
.container {
    background-color: #222;
    color: #bbb;
    margin: 20px auto;
    overflow: hidden;
    padding: 20px;
    position: relative;
    width: 800px;
}
.container h2 {
    color: #fff;
    margin-bottom: 10px;
}
.column {
    float: left;
    width: 48%;
}
.column:first-child {
    margin-right: 4%;
}
.column > * {
    color: #ddd;
    margin-bottom: 10px;
}
.column h3 {
    color: #fff;
}
.login_form input,.login_form label {
    display: block;
    margin-bottom: 10px;
}
input[type=text], input[type=password], input[type=submit] {
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
input[type=text], input[type=password] {
    font-size: 16px;
    height: 30px;
    margin-right: 10px;
    width: 200px;
}
input[type=submit]{
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    height: 35px;
    padding: 5px;
}

/* chat block */
.chat_messages {
    border: 1px solid #888;
    box-shadow: 0 0 5px #AAA;
    color: #000;
    padding: 10px;
}
.chat_messages h2 {
    color: #fff;
}
.chat_messages .message {
    background-color: #fff;
    margin: 5px;
    padding: 5px;

    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.chat_messages .message span {
    color: #444;
    font-size: 10px;
    margin-left: 10px;
}
.chat_submit_form {
    margin: 10px 0px;
}
.chat_submit_form div {
    float: left;
    width: 49%;
}
.chat_submit_form .error, .chat_submit_form .success, .chat_submit_form .protect {
    display: none;
}
.chat_submit_form .error {
    color: #f55;
}
.chat_submit_form .success {
    color: #5f5;
}
.chat_submit_form .protect {
    color: #55f;
}

Step 4. JS

I have created first JS for our chat. At beginning – it contain one function for regular obtaining messages, and handler of form submitting.

js/chat.js

$(function() {
    getMessages = function() {
        $.getJSON('index.php?action=get_last_messages', function(data){
            if (data.messages) {
                $('.chat_messages').html(data.messages);
            }

            // get recent chat messages in loop
            setTimeout(function(){
               getMessages();
            }, 5000);
        });
    }
    getMessages();

    $('.chat_submit_form').submit(function() {
        $.post('index.php', { message: $('.chat_submit_form input[name=message]').val() },
            function(data){
                if (data.result == 1) {
                    $('.chat_submit_form .success').fadeIn('slow', function () {
                        $(this).delay(1000).fadeOut('slow');
                    });
                } else if (data.result == 2) {
                    $('.chat_submit_form .protect').fadeIn('slow', function () {
                        $(this).delay(1000).fadeOut('slow');
                    });
                } else {
                    $('.chat_submit_form .error').fadeIn('slow', function () {
                        $(this).delay(1000).fadeOut('slow');
                    });
                }
            }
        );
        return false;
    });
});

Step 5. PHP

Now, lets review php sources:

index.php

<?php

// set error reporting level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

require_once('classes/Services_JSON.php');
require_once('classes/CMySQL.php'); // including service class to work with database
require_once('classes/CLogin.php'); // including service class to work with login processing

// login system init and generation code
$sLoginForm = $GLOBALS['CLogin']->getLoginBox();

$sChat = '<h2>You do not have rights to use chat</h2>';
$sInput = '';
if ($_SESSION['member_id'] && $_SESSION['member_status'] == 'active' && $_SESSION['member_role']) {
    require_once('classes/CChat.php'); // including service class to work with chat

    // get last messages
    $sChat = $GLOBALS['MainChat']->getMessages();
    if ($_GET['action'] == 'get_last_messages') { // regular updating of messages in chat
        $oJson = new Services_JSON();
        header('Content-type: application/json');
        echo $oJson->encode(array('messages' => $sChat));
        exit;
    }

    // get input form
    $sInput = $GLOBALS['MainChat']->getInputForm();

    if ($_POST['message']) { // POST-ing of message
        $iRes = $GLOBALS['MainChat']->acceptMessage();

        $oJson = new Services_JSON();
        header('Content-type: application/json');
        echo $oJson->encode(array('result' => $iRes));
        exit;
    }
}

// draw common page
echo strtr(file_get_contents('templates/main_page.html'), array('{form}' => $sLoginForm, '{chat}' => $sChat, '{input}' => $sInput));

As you can see – I have added chat functionality today.

classes/CLogin.php

<?php

class CLogin {

    // constructor
    function CLogin() {
        session_start();
    }

    // get login box function
    function getLoginBox() {
        if (isset($_GET['logout'])) { // logout processing
            if (isset($_SESSION['member_name']) && isset($_SESSION['member_pass']))
                $this->performLogout();
        }

        if ($_POST && $_POST['username'] && $_POST['password']) { // login processing
            if ($this->checkLogin($_POST['username'], $_POST['password'], false)) { // successful login
                $this->performLogin($_POST['username'], $_POST['password']);
                header( "Location:{$_SERVER['REQUEST_URI']}" );
                exit;
            } else { // wrong login
                return file_get_contents('templates/login_form.html') . '<h2>Username or Password is incorrect</h2>';
            }
        } else { // in case if we already logged (on refresh page):
            if (isset($_SESSION['member_name']) && $_SESSION['member_name'] && $_SESSION['member_pass']) {
                $aReplaces = array(
                    '{name}' => $_SESSION['member_name'],
                    '{status}' => $_SESSION['member_status'],
                    '{role}' => $_SESSION['member_role'],
                );
                return strtr(file_get_contents('templates/logout_form.html'), $aReplaces);
            }

            // otherwise - draw login form
            return file_get_contents('templates/login_form.html');
        }
    }

    // perform login
    function performLogin($sName, $sPass) {
        $this->performLogout();

        // make variables safe
        $sName = $GLOBALS['MySQL']->escape($sName);

        $aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `cs_profiles` WHERE `name`='{$sName}'");
        // $sPassEn = $aProfile['password'];
        $iPid = $aProfile['id'];
        $sSalt = $aProfile['salt'];
        $sStatus = $aProfile['status'];
        $sRole = $aProfile['role'];

        $sPass = sha1(md5($sPass) . $sSalt);

        $_SESSION['member_id'] = $iPid;
        $_SESSION['member_name'] = $sName;
        $_SESSION['member_pass'] = $sPass;
        $_SESSION['member_status'] = $sStatus;
        $_SESSION['member_role'] = $sRole;
    }

    // perform logout
    function performLogout() {
        unset($_SESSION['member_id']);
        unset($_SESSION['member_name']);
        unset($_SESSION['member_pass']);
        unset($_SESSION['member_status']);
        unset($_SESSION['member_role']);
    }

    // check login
    function checkLogin($sName, $sPass, $isHash = true) {
        // make variables safe
        $sName = $GLOBALS['MySQL']->escape($sName);
        $sPass = $GLOBALS['MySQL']->escape($sPass);

        $aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `cs_profiles` WHERE `name`='{$sName}'");
        $sPassEn = $aProfile['password'];

        if ($sName && $sPass && $sPassEn) {
            if (! $isHash) {
                $sSalt = $aProfile['salt'];
                $sPass = sha1(md5($sPass) . $sSalt);
            }
            return ($sPass == $sPassEn);
        }
        return false;
    }
}

$GLOBALS['CLogin'] = new CLogin();

This class is updated too. I have decided to add ‘member_id’ in sessions too. It will useful afterward.

classes/CMySQL.php

This is database service class. Available in package. Pay attention – database settings of our project is in this file.

classes/Services_JSON.php

This is JSON service class. Available in package.

classes/CChat.php

<?php

class CChat {

    // constructor
    function CChat() {}

    // add to DB message
    function acceptMessage() {
        $sName = $GLOBALS['MySQL']->escape($_SESSION['member_name']);
        $iPid = (int)$_SESSION['member_id'];
        $sMessage = $GLOBALS['MySQL']->escape($_POST['message']);

        if ($iPid && $sName != '' && $sMessage != '') {
            $sSQL = "
                SELECT `id`
                FROM `cs_messages`
                WHERE `sender` = '{$iPid}' AND UNIX_TIMESTAMP( ) - `when` < 5
                LIMIT 1
            ";
            $iLastId = $GLOBALS['MySQL']->getOne($sSQL);
            if ($iLastId) return 2; // as protection from very often messages

            $bRes = $GLOBALS['MySQL']->res("INSERT INTO `cs_messages` SET `sender` = '{$iPid}', `message` = '{$sMessage}', `when` = UNIX_TIMESTAMP()");
            return ($bRes) ? 1 : 3;
        }
    }

    // return input text form
    function getInputForm() {
        return file_get_contents('templates/chat.html');
    }

    // get last 10 messages
    function getMessages() {
        $sSQL = "
            SELECT `a` . * , `cs_profiles`.`name` , UNIX_TIMESTAMP( ) - `a`.`when` AS 'diff'
            FROM `cs_messages` AS `a`
            INNER JOIN `cs_profiles` ON `cs_profiles`.`id` = `a`.`sender`
            ORDER BY `a`.`id` DESC
            LIMIT 10
        ";
        $aMessages = $GLOBALS['MySQL']->getAll($sSQL);
        asort($aMessages);

        // create list of messages
        $sMessages = '';
        foreach ($aMessages as $i => $aMessage) {
            $sExStyles = $sExJS = '';
            $iDiff = (int)$aMessage['diff'];
            if ($iDiff < 7) { // less than 7 seconds
                $sExStyles = 'style="display:none;"';
                $sExJS = "<script> $('#message_{$aMessage['id']}').fadeIn('slow'); </script>";
            }

            $sWhen = date("H:i:s", $aMessage['when']);
            $sMessages .= '<div class="message" id="message_'.$aMessage['id'].'" '.$sExStyles.'><b>' . $aMessage['name'] . ':</b> ' . $aMessage['message'] . '<span>(' . $sWhen . ')</span></div>' . $sExJS;
        }
        return $sMessages;
    }
}

$GLOBALS['MainChat'] = new CChat();

This is our new class for chat processor. For now – it contain only 3 functions: acceptMessage, getInputForm and getMessages.

Live Demo

download in archive

Conclusion

I will hope that our new series of articles of chat system creation will be useful and interesting for you. If you want to share your ideas, or you noticed any weakness – don’t hesitate to contact us. Good luck and welcome back!

Isometric interactive interior guide

During browsing internet, I have noticed new interesting thing – it looked like isometric guide. Today I will show you how you can create something similar. We will create isometric interactive interior guide with CSS3 and jQuery.

Here are samples and downloadable package:

Live Demo

download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML. Here is full html code of our guide page. You can see here main scene (container object), six labels on this scene (with some description), and empty dialog element.

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Isometric interactive interior guide with CSS3 and jQuery | Script Tutorials</title>
        <link href="css/layout.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <header>
            <h2>Isometric interactive interior guide</h2>
            <a href="http://www.script-tutorials.com/isometric-interactive-interior-guide/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>

        <div class="container">
            <div class="labels">
                <a id="label1" class="label" href="#">sofa
                    <p>A sofa, is an item of furniture designed to seat more than one person, and providing support for the back and arms.</p>
                    <span />
                </a>
                <a id="label2" class="label" href="#">television
                    <p>Television (TV) is a telecommunication medium for transmitting and receiving moving images that can be monochrome (black-and-white) or colored, with or without accompanying sound.</p>
                    <span />
                </a>
                <a id="label3" class="label" href="#">chest
                    <p>In many video games, especially role-playing video games, treasure chests contain various items, currency, and sometimes monsters.</p>
                    <span />
                </a>
                <a id="label4" class="label" href="#">workplace
                    <p>A virtual workplace is a workplace that is not located in any one physical space.</p>
                    <span />
                </a>
                <a id="label5" class="label" href="#">entrance
                    <p>A door is a movable structure used to open and close off an entrance, typically consisting of a panel that swings on hinges or that slides or rotates inside of a space.</p>
                    <span />
                </a>
                <a id="label6" class="label" href="#">safe room
                    <p>A safe room or panic room is a fortified room which is installed in a private residence or business to provide a safe shelter, or hiding place, for the inhabitants in the event of a break-in, home invasion, tornado, or other threat.</p>
                    <span />
                </a>
            </div>
            <div class="dialog">
                <p></p>
                <a class="close">X</a>
            </div>
        </div>
    </body>
</html>

Step 2. CSS

Now – CSS styles. Which I have separated into two parts: common page styles and styles of our main scene.

css/layout.css

/* page layout styles */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#fefffa;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size: 22px;
    font-weight: normal;
    left: 40%;
    margin-left: -300px;
    padding: 22px 0;
    position: absolute;
    width: 1000px;
}
header a.stuts,a.stuts:visited{
    border: none;
    color: #FCFCFC;
    font-size: 14px;
    left: 50%;
    line-height: 31px;
    margin: 23px 0 0 110px;
    position: absolute;
    text-decoration: none;
    top: 0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

/* demo */
.container {
    background: url("../images/scene.jpg") no-repeat scroll center top transparent;
    color: #000000;
    height: 535px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 1030px;
}
.dialog {
    background-color: rgba(163, 154, 77, 0.9);
    color: #FFFFFF;
    display: none;
    height: 140px;
    left: 343px;
    line-height: 24px;
    padding: 100px 30px;
    position: absolute;
    text-align: center;
    top: 97px;
    width: 280px;
    z-index: 10;

    -moz-border-radius: 170px;
    -ms-border-radius: 170px;
    -o-border-radius: 170px;
    -webkit-border-radius: 170px;
    border-radius: 170px;
}
.dialog .close {
    background-color: #65683b;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    position: absolute;
    right: 10px;
    top: 60px;
    width: 36px;

    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}
.labels p {
    display: none;
}
.labels a {
    background-color: rgba(203, 189, 58, 0.8);
    color: #FFFFFF;
    display: none;
    height: 50px;
    padding: 30px 0 0;
    position: absolute !important;
    text-align: center;
    text-decoration: none;
    width: 80px;

    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
}
.labels > a {
    background-color: rgba(203, 189, 58, 0.8);

    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}
.labels a:hover {
    background-color: rgba(128, 128, 128, 0.8);
}
.labels a span {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid rgba(203, 189, 58, 0.8);
    bottom: -14px;
    height: 0;
    left: 30px;
    position: absolute;
    width: 0;

    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}
.labels a:hover span {
    border-top: 15px solid rgba(128, 128, 128, 0.8);
}
#label1 {
    left: 720px;
    top: 215px;
}
#label2 {
    left: 495px;
    top: 290px;
}
#label3 {
    left: 450px;
    top: 115px;
}
#label4 {
    left: 270px;
    top: 170px;
}
#label5 {
    left: 570px;
    top: 65px;
}
#label6 {
    left: 275px;
    top: 30px;
}

Step 3. JS

And now – our jQuery code:

js/main.js

jQuery(function(){
    // initialize of labels
    $('.labels a#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
        $('.labels a#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
            $('.labels a#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                $('.labels a#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                    $('.labels a#label5').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                        $('.labels a#label6').fadeIn(100).effect('bounce', { times:3 }, 300);
                    });
                });
            });
        });
    });

    // dialog close
    $('.dialog .close').click(function() {
        $(this).parent().fadeOut(500);
        return false;
    });

    // display dialog on click by labels
    $('.labels a').click(function() {
        $('.dialog p').html( $(this).find('p').html() ).parent().fadeIn(500);
        return false;
    });

    // close dialog on click outside
    $('.container').click(function() {
        $('.dialog').fadeOut(500);
    });
});

Here are just a few event handlers of our scene objects.

Live Demo

download in package

Conclusion

I will happy if our material will useful for you, and can bring you some inspiration. Don’t forget telling thanks and leaving a comment. Good luck!

Powerful Chat System

Today we begin a series of articles on the creation of powerful chat system. The system will contain next elements: registration, login processing, main chat, profiles with avatars, ranking system (of profiles), private messaging, custom rooms, moderation / administration and possible something else (in future). This will be ajax chat PHP) with storing messages in database (MySQL). Plus we will implement CSS3/HTML5 features in our development process.

Today I have included next elements: initial code (PHP + SQL) with login processor. All project will be well structured: system classes is in ‘classes’ folder, stylesheets in ‘css’ folder, template files in ‘templates’ folder.

Live Demo

download in package

Now – download the source files and lets start coding !

Step 1. SQL

Here is SQL structure of tables for profiles and messages

CREATE TABLE `cs_profiles` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `name` varchar(255) NOT NULL default '',
  `last_name` varchar(255) NOT NULL default '',
  `email` varchar(255) NOT NULL default '',
  `password` varchar(40) NOT NULL default '',
  `salt` varchar(10) NOT NULL default '',
  `status` enum('active','passive') NOT NULL default 'active',
  `role` tinyint(4) unsigned NOT NULL default '1',
  `about` varchar(255) NOT NULL,
  `date_reg` datetime NOT NULL default '0000-00-00 00:00:00',
  `rate` float NOT NULL,
  `rate_count` int(11) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

INSERT INTO `cs_profiles` (`name`, `last_name`, `email`, `password`, `salt`, `status`, `role`, `about`, `date_reg`, `rate`, `rate_count`) VALUES
('test user', 'test user last name', 'user@user.com', 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'testing', 'active', 1, 'Few words about test user', '2012-01-14 00:00:00', 0, 0),
('moderator', 'moderator last name', 'moderator@moderator.com', 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'testing', 'active', 4, 'Few words about moderator', '2012-01-14 00:00:00', 0, 0),
('admin', 'admin last name', 'admin@admin.com', 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'testing', 'active', 5, 'Few words about admin', '2012-01-14 00:00:00', 0, 0);

CREATE TABLE `cs_messages` (
  `id` int(11) unsigned NOT NULL auto_increment,
  `sender` int(11) unsigned NOT NULL,
  `recipient` int(11) unsigned NOT NULL default '0',
  `message` VARCHAR(255) NOT NULL,
  `when` TIMESTAMP NOT NULL default CURRENT_TIMESTAMP,
  `room` int(5) unsigned NOT NULL default '0',
  `type` tinyint(1) unsigned NOT NULL default '0',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

I have added 3 profiles in the system. Each of them have different role. I plan to make ordinary members (1), moderators (4), administrators (5). You can use another roles (as example 2 and 3) for any other purposes (paid members?). And, quite forgot – password for all of them is ‘password’. So you can login as ‘test user’ -> ‘password’, ‘moderator’ -> ‘password’ and ‘admin’ -> ‘password’. Registration process will in next article.

Step 2. HTML

This is main (index) page html markup:

templates/main_page.html

<!DOCTYPE html>
<html lang="en" >
<head>
    <title>Powerful Chat System</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <header>
        <h2>Powerful Chat System</h2>
        <a href="http://www.script-tutorials.com/powerful-chat-system/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
    </header>
    <div class="container">
        {form}
    </div>
    <div class="container">
        {chat}
    </div>
</body>
</html>

It is easy layout, isn’t it?. Now, next template file for login form:

templates/login_form.html

<div class="column">
    <h3>Powerful Chat System Demonstration</h3>
    <p>Our chat will contain next features: registration, main chat, profiles with avatars, ranking system, private messaging, custom rooms, moderation / administration and possible something else (in future).</p>
</div>
<div class="column">
    <form class="login_form" action="index.php" method="post">
        <h3>Log In</h3>
        <label>Username:</label><input type="text" name="username">
        <label>Password:</label><input type="password" name="password">
        <input type="submit" name="LogIn" value="Login">
    </form>
</div>

Next one template – logout form:

logout_form.html

<div class="column">
    <h3>Hello {name}</h3>
    <h3>Your status:</h3>
    <div>{status}</div>
    <h3>Your role:</h3>
    <div>{role}</div>
</div>
<div class="column">
    <a href="index.php?logout">Log Out</a>
</div>

Step 3. CSS

This file contains styles of our page layout

css/main.css

/* page layout */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#eee;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

/* main styles */
.container {
    background-color:#222;
    color: #bbb;
    margin: 20px auto;
    overflow: hidden;
    padding:20px;
    position: relative;
    width: 800px;
}
.column {
    float:left;
    width:48%;
}
.column:first-child {
    margin-right:4%;
}
.column > * {
    color:#ddd;
    margin-bottom:10px;
}
.column h3 {
    color:#fff;
}
.login_form input,.login_form label {
    display:block;
    margin-bottom:5px;
}
input[type=text],
input[type=password] {
    width:200px;
}
input[type=submit]{
    height:30px;
    margin-top:10px;
    width:72px;
}

Step 4. PHP

Now, lets review php sources:

index.php

<?php

// set error reporting level
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

require_once('classes/CMySQL.php'); // including service class to work with database
require_once('classes/CLogin.php'); // including service class to work with login processing

// login system init and generation code
$sLoginForm = $GLOBALS['CLogin']->getLoginBox();

$sChat = ($_SESSION['member_name'] && $_SESSION['member_status'] == 'active') ? '<h2>TODO chat</h2>' : '<h2>You have to login before use chat</h2>';

echo strtr(file_get_contents('templates/main_page.html'), array('{form}' => $sLoginForm, '{chat}' => $sChat));

As we need only login processing for today – our index file is pretty small. New functional will appear in further articles. Here is sources of our login processor:

classes/CLogin.php

<?php

class CLogin {

    // constructor
    function CLogin() {
        session_start();
    }

    // get login box function
    function getLoginBox() {
        if (isset($_GET['logout'])) { // logout processing
            if (isset($_SESSION['member_name']) && isset($_SESSION['member_pass']))
                $this->performLogout();
        }

        if ($_POST && $_POST['username'] && $_POST['password']) { // login processing
            if ($this->checkLogin($_POST['username'], $_POST['password'], false)) { // successful login
                $this->performLogin($_POST['username'], $_POST['password']);
                header( "Location:{$_SERVER['REQUEST_URI']}" );
                exit;
            } else { // wrong login
                return file_get_contents('templates/login_form.html') . '<h2>Username or Password is incorrect</h2>';
            }
        } else { // in case if we already logged (on refresh page):
            if (isset($_SESSION['member_name']) && $_SESSION['member_name'] && $_SESSION['member_pass']) {
                $aReplaces = array(
                    '{name}' => $_SESSION['member_name'],
                    '{status}' => $_SESSION['member_status'],
                    '{role}' => $_SESSION['member_role'],
                );
                return strtr(file_get_contents('templates/logout_form.html'), $aReplaces);
            }

            // otherwise - draw login form
            return file_get_contents('templates/login_form.html');
        }
    }

    // perform login
    function performLogin($sName, $sPass) {
        $this->performLogout();

        // make variables safe
        $sName = $GLOBALS['MySQL']->escape($sName);

        $aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `cs_profiles` WHERE `name`='{$sName}'");
        // $sPassEn = $aProfile['password'];
        $sSalt = $aProfile['salt'];
        $sStatus = $aProfile['status'];
        $sRole = $aProfile['role'];

        $sPass = sha1(md5($sPass) . $sSalt);

        $_SESSION['member_name'] = $sName;
        $_SESSION['member_pass'] = $sPass;
        $_SESSION['member_status'] = $sStatus;
        $_SESSION['member_role'] = $sRole;
    }

    // perform logout
    function performLogout() {
        unset($_SESSION['member_name']);
        unset($_SESSION['member_pass']);
        unset($_SESSION['member_status']);
        unset($_SESSION['member_role']);
    }

    // check login
    function checkLogin($sName, $sPass, $isHash = true) {
        // make variables safe
        $sName = $GLOBALS['MySQL']->escape($sName);
        $sPass = $GLOBALS['MySQL']->escape($sPass);

        $aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `cs_profiles` WHERE `name`='{$sName}'");
        $sPassEn = $aProfile['password'];

        if ($sName && $sPass && $sPassEn) {
            if (! $isHash) {
                $sSalt = $aProfile['salt'];
                $sPass = sha1(md5($sPass) . $sSalt);
            }
            return ($sPass == $sPassEn);
        }
        return false;
    }
}

$GLOBALS['CLogin'] = new CLogin();

I hope you still remember our previous article of advanced login system. We will have similar system with using sha1 + md5 encryption. All profiles will kept in database.

classes/CMySQL.php

This is database service class. Available in package. Pay attention – database settings of our project is in this file.

Live Demo

download in archive

Conclusion

I will hope that our new series of articles of chat system creation will be useful and interesting for you. If you want to share your ideas, or you noticed any weakness – don’t hesitate to contact us. Good luck and welcome back!

Creating photo album with jQuery Fotorama

Today I have prepared tutorial about using new impressive jQuery gallery – Fotorama. This is a nice looking javascript gallery with intuitive controls, and great browser compatibility. You can use this plugin at iPhones and any other mobile devices (you can slide photos with touch).

Here are links to demo and downloadable package:

Live Demo

download in package

Ok, lets download the example files and goto coding !

Step 1. HTML

index.html

This is markup of our result page with Fotorama gallery. Here it is.

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Creating photo album with jQuery Fotorama | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/fotorama.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/fotorama.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <header>
            <h2>Creating photo album with jQuery Fotorama</h2>
            <a href="http://www.script-tutorials.com/photo-album-with-jquery-fotorama/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">

            <div id="fotorama">
                <img src="images/pic1.jpg" alt="photo #1" />
                <img src="images/pic2.jpg" alt="photo #2" />
                <img src="images/pic3.jpg" alt="photo #3" />
                <img src="images/pic4.jpg" alt="photo #4" />
                <img src="images/pic5.jpg" alt="photo #5" />
                <img src="images/pic6.jpg" alt="photo #6" />
                <img src="images/pic7.jpg" alt="photo #7" />
                <img src="images/pic8.jpg" alt="photo #8" />
                <img src="images/pic9.jpg" alt="photo #9" />
                <img src="images/pic10.jpg" alt="photo #10" />
                <img src="images/pic11.jpg" alt="photo #11" />
                <img src="images/pic12.jpg" alt="photo #12" />
            </div>

        </div>
    </body>
</html>

Very easy – right?

Step 2. CSS

css/layout.css and css/fotorama.css

First stylesheet is page layout of our page. Second one is default stylesheet file of fotorama gallery. You can customize it (if need). Both files available in our package.

Step 3. JS

js/fotorama.js

This is main gallery javascript file. It uses jQuery, so we have to include both (fotorama.js and jquery) files. This file available in package.

js/main.js

jQuery(function(){
    $('#fotorama').fotorama({
        // width: 1000, // Width of container
        // height: 600, // Height of container
        startImg: 10, // Initial image
        transitionDuration: 400, // Duration of transition
        touchStyle: true, // Enable dragging
        // pseudoClick: true, // Slide between images by click (if touchStyle = true)
        // loop: false, // Loop for images (if touchStyle = false)
        // backgroundColor: null, // Custom background color
        margin: 10, // Margin between images
        // minPadding: 10, // Min padding
        // alwaysPadding: false, // Apply padding for images
        // preload: 3, // Amount of pre-loaded images from each end of the active image
        // resize: false, // Resize images
        // zoomToFit: true, // Zoom to fit
        // cropToFit: false, // Crop to fit
        // vertical: false, // Vertical thumbs
        // verticalThumbsRight: false, // Vertical thumbs at right
        // arrows: true, // Draw arrows
        arrowsColor: '#3399cc', // Arrows color
        // thumbs: true, // Draw thumbs
        // thumbsBackgroundColor: null, // Thumbs Background Color
        // thumbColor: null, // Thumb Color
        // thumbsPreview: true, // Thumb Preview
        thumbSize: 50, // Thumb size (height)
        // thumbMargin: 5, // Thumb margins
        thumbBorderWidth: 1, // Thumb border width
        // thumbBorderColor: null, // Thumb Border Color
        caption: true, // Display captions
        // html: null, // You can full html code of gallery here
        // onShowImg: null, // Custom function when we select image
        // shadows: true // Display shadows
    });
});

This is main initialization of fotorama gallery. Several styles was customized, another – no. I have added descriptions of all possible parameters of this gallery.

Here you can find official documentation of this gallery.

Step 4. Images

All gallery images is in ‘images’ folder.

Live Demo

download in package

Conclusion

I hope that today we made new nice photo gallery. Good luck in your projects!

Fullscreen Javascript Slide navigation

Today – new pure javascript tutorial-demonstration. Result page will contain 16 slides (pages). Four in each row, four columns, plus we will add animated navigation to them through css3 arrows (at sides of screen). Plus, we will have mini-navigation bar for better navigation.

Live Demo

download in package

Ok, download the example files and lets start coding !

Step 1. HTML markup

In our markup you can see 16 ‘pages’ and mini-navigation for our slides. Here it is.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Fullscreen Javascript Slide navigation | Script Tutorials</title>
        <link href="css/layout.css" type="text/css" rel="stylesheet">
        <script src="js/main.js"></script>
    </head>
    <body>
        <div class="container" id="container">
            <div id="pages">
                <div id="page1">
                    <a href="#page2" class="go right"></a>
                    <a href="#page5" class="go bottom"></a>
                </div>
                <div id="page2">
                    <a href="#page1" class="go left"></a>
                    <a href="#page3" class="go right"></a>
                    <a href="#page6" class="go bottom"></a>
                </div>
                <div id="page3">
                    <a href="#page2" class="go left"></a>
                    <a href="#page4" class="go right"></a>
                    <a href="#page7" class="go bottom"></a>
                </div>
                <div id="page4">
                    <a href="#page3" class="go left"></a>
                    <a href="#page8" class="go bottom"></a>
                </div>
                <div id="page5">
                    <a href="#page1" class="go top"></a>
                    <a href="#page6" class="go right"></a>
                    <a href="#page9" class="go bottom"></a>
                </div>
                <div id="page6">
                    <a href="#page5" class="go left"></a>
                    <a href="#page2" class="go top"></a>
                    <a href="#page7" class="go right"></a>
                    <a href="#page10" class="go bottom"></a>
                </div>
                <div id="page7">
                    <a href="#page6" class="go left"></a>
                    <a href="#page3" class="go top"></a>
                    <a href="#page8" class="go right"></a>
                    <a href="#page11" class="go bottom"></a>
                </div>
                <div id="page8">
                    <a href="#page7" class="go left"></a>
                    <a href="#page4" class="go top"></a>
                    <a href="#page12" class="go bottom"></a>
                </div>
                <div id="page9">
                    <a href="#page5" class="go top"></a>
                    <a href="#page10" class="go right"></a>
                    <a href="#page13" class="go bottom"></a>
                </div>
                <div id="page10">
                    <a href="#page9" class="go left"></a>
                    <a href="#page6" class="go top"></a>
                    <a href="#page11" class="go right"></a>
                    <a href="#page14" class="go bottom"></a>
                </div>
                <div id="page11">
                    <a href="#page10" class="go left"></a>
                    <a href="#page7" class="go top"></a>
                    <a href="#page12" class="go right"></a>
                    <a href="#page15" class="go bottom"></a>
                </div>
                <div id="page12">
                    <a href="#page11" class="go left"></a>
                    <a href="#page8" class="go top"></a>
                    <a href="#page16" class="go bottom"></a>
                </div>
                <div id="page13">
                    <a href="#page9" class="go top"></a>
                    <a href="#page14" class="go right"></a>
                </div>
                <div id="page14">
                    <a href="#page13" class="go left"></a>
                    <a href="#page10" class="go top"></a>
                    <a href="#page15" class="go right"></a>
                </div>
                <div id="page15">
                    <a href="#page14" class="go left"></a>
                    <a href="#page11" class="go top"></a>
                    <a href="#page16" class="go right"></a>
                </div>
                <div id="page16">
                    <a href="#page15" class="go left"></a>
                    <a href="#page12" class="go top"></a>
                </div>
            </div>
            <div id="nav">
                <div>Fullscreen Javascript Slide navigation</div>
                <div style="width:130px">
                    <a href="#page1" class="go"></a>
                    <a href="#page2" class="go"></a>
                    <a href="#page3" class="go"></a>
                    <a href="#page4" class="go"></a>
                    <a href="#page5" class="go"></a>
                    <a href="#page6" class="go"></a>
                    <a href="#page7" class="go"></a>
                    <a href="#page8" class="go"></a>
                    <a href="#page9" class="go"></a>
                    <a href="#page10" class="go"></a>
                    <a href="#page11" class="go"></a>
                    <a href="#page12" class="go"></a>
                    <a href="#page13" class="go"></a>
                    <a href="#page14" class="go"></a>
                    <a href="#page15" class="go"></a>
                    <a href="#page16" class="go"></a>
                </div>
                <div><a href="http://www.script-tutorials.com/fullscreen-javascript-slide-navigation/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a></div>
            </div>
        </div>
    </body>
</html>

Step 2. CSS

Now – stylesheets for our slides:

css/layout.css

*{
    margin:0;
    padding:0;
}
body {
    background-color:#aaa;
    color:#fff;
    font:16px Arial,sans-serif;
    font-weight:700;
    margin:0px;
    padding:0px;
    background:#111;
    width:100%;
    height:100%;
}
a.stuts,a.stuts:visited{
    color: #FCFCFC;
    font-size: 14px;
    text-decoration: none;
}
.stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#pages {
    left:0;
    position:absolute;
    top:0;
}
#nav {
    background-color:rgba(0, 0, 0, 0.8);
    margin:0;
    outline:#333 solid 1px;
    padding:10px;
    position:fixed;
    right:200px;
    top:50px;
    width:200px;
}
#nav div a.go {
    background:#333;
    float:left;
    height:25px;
    margin:3px;
    overflow:hidden;
    text-decoration:none;
    width:25px;
}
#nav div a.go:visited,#nav div a.visited {
    background-color:#666;
}
#nav div a.go:active,#nav div a.active {
    background-color:#fff !important;
}
#nav div a.go:hover,#nav div a.go:focus {
    background-color:#00f;
}
#pages > div {
    height:1100px;
    position:absolute;
    width:1700px;
}
#page1 {
    background:url(../images/1.jpg) no-repeat center center;
    left:0;
    top:0;
}
#page2 {
    background:url(../images/2.jpg) no-repeat center center;
    left:1800px;
    top:0;
}
#page3 {
    background:url(../images/3.jpg) no-repeat center center;
    left:3600px;
    top:0;
}
#page4 {
    background:url(../images/4.jpg) no-repeat center center;
    left:5400px;
    top:0;
}
#page5 {
    background:url(../images/5.jpg) no-repeat center center;
    left:0;
    top:1300px;
}
#page6 {
    background:url(../images/6.jpg) no-repeat center center;
    left:1800px;
    top:1300px;
}
#page7 {
    background:url(../images/7.jpg) no-repeat left center;
    left:3600px;
    top:1300px;
}
#page8 {
    background:url(../images/8.jpg) no-repeat center center;
    left:5400px;
    top:1300px;
}
#page9 {
    background:url(../images/9.jpg) no-repeat center center;
    left:0;
    top:2600px;
}
#page10 {
    background:url(../images/10.jpg) no-repeat center center;
    left:1800px;
    top:2600px;
}
#page11 {
    background:url(../images/11.jpg) no-repeat center center;
    left:3600px;
    top:2600px;
}
#page12 {
    background:url(../images/12.jpg) no-repeat center center;
    left:5400px;
    top:2600px;
}
#page13 {
    background:url(../images/13.jpg) no-repeat center center;
    left:0;
    top:3900px;
}
#page14 {
    background:url(../images/14.jpg) no-repeat center center;
    left:1800px;
    top:3900px;
}
#page15 {
    background:url(../images/15.jpg) no-repeat center center;
    left:3600px;
    top:3900px;
}
#page16 {
    background:url(../images/16.jpg) no-repeat center center;
    left:5400px;
    top:3900px;
}
#pages .left {
    border-bottom:transparent solid 50px;
    border-right:#FFF solid 80px;
    border-top:transparent solid 50px;
    height:0;
    left:20px;
    position:absolute;
    top:50%;
    width:0;
}
#pages .right {
    border-bottom:transparent solid 50px;
    border-left:#FFF solid 80px;
    border-top:transparent solid 50px;
    height:0;
    position:absolute;
    right:20px;
    top:50%;
    width:0;
}
#pages .top {
    border-bottom:#FFF solid 80px;
    border-left:transparent solid 50px;
    border-right:transparent solid 50px;
    height:0;
    left:50%;
    position:absolute;
    top:20px;
    width:0;
}
#pages .bottom {
    border-left:transparent solid 50px;
    border-right:transparent solid 50px;
    border-top:#FFF solid 80px;
    bottom:20px;
    height:0;
    left:50%;
    position:absolute;
    width:0;
}
#pages .left:hover {
    border-right:red solid 80px;
}
#pages .right:hover {
    border-left:red solid 80px;
}
#pages .top:hover {
    border-bottom:red solid 80px;
}
#pages .bottom:hover {
    border-top:red solid 80px;
}
#nav > div {
    margin:10px auto;
    overflow:hidden;
    text-align:center;
}

Step 3. JS

ANd now – our javascript code:

js/main.js

var navi = {
    // variables
    aPages : [],
    aLinks : [],
    tween : {},
    oParent : null,
    oPages : null,
    bRunning : null,
    sTargPage : null,
    sCurPage : null,
    bHash : null,
    sOldH : null,
    bUpdateH : true,

    // initialization
    init : function (aParams) {
        this.oPages = document.getElementById(aParams.pages_id);
        this.oParent  = document.getElementById(aParams.parent_id);

        var aAEls = this.oParent.getElementsByTagName('a');
        var i = 0; var p = null;
        while (p = aAEls[i++]) {
            if (p.className && p.className.indexOf('go') >= 0) {
                var sHref = p.href.split('#')[1];
                var oDst = document.getElementById(sHref);
                if (oDst) {
                    // fill-in pages array
                    this.aPages[sHref] = {
                        oObj:  oDst,
                        iXPos: -oDst.offsetLeft,
                        iYPos: -oDst.offsetTop
                    };

                    // fill-in links array
                    this.aLinks.push({a: p, oObj: oDst});

                    p.onclick = function () {
                        navi.goto(this.href.split('#')[1], aParams.duration);
                        return false;
                    }
                }
            }
        }

        this.resize();

        if ('onhashchange' in window) {
            if (location.hash !== '' && location.hash !== '#') {
                this.sOldH = location.hash.substring(1);
                this.goto(this.sOldH, -1);
            } else
                this.goto('page1', -1);
            this.bHash = true;

            window.onhashchange = function() {
                if (location.hash.substring(1) !== navi.sOldH) {
                    navi.sOldH = location.hash.substring(1);
                    if (navi.sOldH == '') {
                        navi.bUpdateH = false;
                    }
                    navi.goto(navi.sOldH, aParams.duration);
                }
                return false;
            }
        }
    },

    // on resize
    resize : function () {
        var iCurW = this.oParent.offsetWidth; // current sizes
        var iCurH = this.oParent.offsetHeight;
        for (var i in this.aPages) { // for each page
            var oPage = this.aPages[i];
            var iNewX = Math.round(oPage.oObj.offsetLeft * iCurW / oPage.oObj.offsetWidth); // new sizes
            var iNewY = Math.round(oPage.oObj.offsetTop  * iCurH / oPage.oObj.offsetHeight);
            oPage.oObj.style.left   = iNewX + 'px';
            oPage.oObj.style.top    = iNewY + 'px';
            oPage.oObj.style.width  = iCurW + 'px';
            oPage.oObj.style.height = iCurH + 'px';
            oPage.iXPos = -iNewX;
            oPage.iYPos = -iNewY;

            if (this.sCurPage)
                this.goto(this.sCurPage, -1);
        }
    },

    goto : function (sHref, iDur) {
        this.tween.iStart = new Date() * 1;
        this.tween.iDur = iDur;
        this.tween.fromX = this.oPages.offsetLeft;
        this.tween.fromY = this.oPages.offsetTop;
        this.tween.iXPos   = this.aPages[sHref].iXPos - this.tween.fromX;
        this.tween.iYPos   = this.aPages[sHref].iYPos - this.tween.fromY;
        this.sTargPage = sHref;

        if (! this.bRunning)
            this.bRunning = window.setInterval(this.animate, 24);
    },

    animate : function () {
        var iCurTime = (new Date() * 1) - navi.tween.iStart;
        if (iCurTime < navi.tween.iDur) {
            var iCur = Math.cos(Math.PI * (iCurTime / navi.tween.iDur)) - 1;
            navi.oPages.style.left = Math.round(-navi.tween.iXPos * .5 * iCur + navi.tween.fromX) + 'px';
            navi.oPages.style.top  = Math.round(-navi.tween.iYPos * .5 * iCur + navi.tween.fromY) + 'px';
        } else {
            navi.oPages.style.left = Math.round(navi.tween.fromX + navi.tween.iXPos) + 'px';
            navi.oPages.style.top  = Math.round(navi.tween.fromY + navi.tween.iYPos) + 'px';

            window.clearInterval(navi.bRunning);
            navi.bRunning = false;
            navi.sCurPage = navi.sTargPage;

            var i = 0; var p = null;
            while (p = navi.aLinks[i++]) {
                if (p.oObj.id == navi.sCurPage) {
                    if (p.a.className.indexOf('visited') >= 0 ) {
                        p.a.className = p.a.className.replace('visited', 'active');
                    } else p.a.className += ' active';
                    p.visited = true;
                } else if (p.visited) {
                    p.a.className = p.a.className.replace('active', 'visited');
                }
            }

            if (navi.bHash) {
                if (navi.bUpdateH) {
                    navi.sOldH = navi.sCurPage;
                    window.location.hash = navi.sCurPage;
                }
                navi.bUpdateH = true;
            }
        }
    }
}

window.onload = function() { // page onload
    navi.init({parent_id: 'container', pages_id: 'pages', duration: 1000});
}
window.onkeydown = function(event){ // keyboard alerts
    switch (event.keyCode) {
        case 37: // Left key
            var iPage = navi.sCurPage.substring(4) * 1;
            iPage--;
            if (iPage < 1) {
                iPage = 1;
            }
            navi.goto('page' + iPage, 1000);
            break;
        case 39: // Right key
            var iPage = navi.sCurPage.substring(4) * 1;
            iPage++;
            if (iPage > 16) {
                iPage = 16;
            }
            navi.goto('page' + iPage, 1000);
            break;
    }
};

Live Demo

download in package

Conclusion

Finally we have prepared interested result! I hope that this will interesting addition to your website. Don’t forget to tell thanks and leave a comment. Good luck!