Infographic: The Evolution of Languages

Information Graphics (known as infographics) are a best way to transfer new information into a reader’s mind. Nowadays many people don’t have enough time to read a lot of text on multiple screens. Infographics makes the information intuitive and understandable. That’s why we would like to share the best relevant infographics from all over the web. Today I found a first one related infographic on the evolution of programming languages. It covers most of languages, and I sure it will very interesting for you.

Large version

Original source: Evolution of Computer Languages

12 Unique Navigation Menu Designs For Your Inspiration

During creating new website – one of the main things that you have to create – is the CSS menu (navigation). In order to have own unique menu, there’s a necessity for some developing. However this can be difficult and take much time to start from zero and to address this, you can use some ready ideas of navigation menus created by professional web-designers so that you will not have to start from scratch. All you have to do – customize them to reflect the design that you want to have. Here is fresh hand-made collection of most impressive navigation menu designs for you.

1. CaptainDash

2. APPGEAR: Amplified Reality

3. Uchitomi – Sushis

4. Gemeentelijke Jeugdraad Brakel

5. Online Camping Equipment

6. Mezcal Buen Viaje

7. vlog.it

8. Volkswagen Beetle

9. Tatchies

10. Tao Community

11. Martin Gauer

12. Tom, Dick & Harry

Conclusion

Hope that our new collection of new creative menu designs has been interested for you. Good luck!

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!

10 fresh jQuery plugins (january 2012)

Our new hand-made collection of most impressive jQuery plugins. Here are different plugins for zooming, calendars, news ticker, and even full UI packs, nice file uploader and more.

1. jQuery UI Bootstrap

A jQuery UI theme based on Twitter Bootstrap.

2. jqGrid

This is pretty useful jQuery grid plugin. Online demo you can find here.

3. Cloud Zoom

Cloud Zoom is a small jQuery image zoom plugin with smooth zoom movement, gallery mode, tint, soft focus and other zoom features.

4. jQuery continuous calendar

Another one calendar plugin with next features: date dragging, continuous month flow, range shifting by dragging, range expand with shift + mouse click etc.

5. Flot

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. Online demo you can find here.

6. FullCalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar).

7. jQuery News Ticker

Taking inspiration from the BBC News website ticker, jQuery News Ticker brings a lightweight and easy to use news ticker to jQuery.

8. jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bar and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads.

9. JavaScriptMVC

JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. Online demo you can find here.

10. Scrollorama

The jQuery plugin for doing cool scrolly stuff.

Conclusion

Hope that our new collection of new jQuery plugins has been interested for you. Good luck!

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!

Invoicera offer results

Several weeks ago, you took part in the Invoicera offer. The curtains are closed, so are the comments, and now is time to select the winners.

We have selected the one person randomly using this generator.

The winners are: Monique, Nicholas Barraco and Cedric. They win Classic Plan Subscription from Invoicera.

For those that did not win, I am wishing best of luck in the future!

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 Canvas Slideshow

In this tutorial we are making a HTML5 Slideshow (canvas) with own animated transitioning effect. The main idea – drawing images with higher contrast in the ends of transitions.

Here are our demo and downloadable package:

Live Demo

download in package

Ok, download the source files and lets start coding !

Step 1. HTML

This is markup of our result slideshow page. Here it is.

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Canvas Slideshow | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/pixastic.custom.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 Canvas Slideshow</h2>
            <a href="http://www.script-tutorials.com/html5-canvas-slideshow/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="slides">
                <img src="images/pic1.jpg" />
                <img src="images/pic2.jpg" />
                <img src="images/pic3.jpg" />
                <img src="images/pic4.jpg" />
                <img src="images/pic5.jpg" />
                <img src="images/pic6.jpg" />
                <img src="images/pic7.jpg" />
            </div>
            <canvas id="slideshow" width="900" height="300"></canvas>
        </div>
    </body>
</html>

Step 2. CSS

Here are all stylesheets

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 {
    color: #000;
    margin: 20px auto;
    position: relative;
    width: 900px;
}
#slideshow {
    border:1px #000 solid;
    box-shadow:4px 6px 6px #444444;
    display:block;
    margin:0 auto;
    height:300px;
    width:900px;
}
.container .slides {
    display:none;
}

Step 3. JS

js/pixastic.custom.js

Pixastic – JavaScript Image Processing Library. I have used it to change brightness and contrast of our canvas. You can download this library here. Or, you can find this library in our package too.

js/script.js

var canvas, ctx;
var aImages = [];
var iCurSlide = 0;
var iCnt = 0;
var iSmTimer = 0;
var iContr = 0;
var iEfIter = 50;

$(function(){
    // creating canvas objects
    canvas = document.getElementById('slideshow');
    ctx = canvas.getContext('2d');

    // collect all images
    $('.slides').children().each(function(i){
        var oImg = new Image();
        oImg.src = this.src;
        aImages.push(oImg);
    });

    // draw first image
    ctx.drawImage(aImages[iCurSlide], 0, 0);

    var iTimer = setInterval(changeSlideTimer, 5000); // set inner timer
});

function changeSlideTimer() {
    iCurSlide++;
    if (iCurSlide == $(aImages).length) {
        iCurSlide = 0;
    }

    clearInterval(iSmTimer);
    iSmTimer = setInterval(drawSwEffect, 40); // extra one timer
}

// draw switching effect
function drawSwEffect() {
    iCnt++;

    if (iCnt <= iEfIter / 2) {
        iContr += 0.004;

        // change brightness and contrast
        Pixastic.process(canvas, 'brightness',
            {
                'brightness': 2,
                'contrast': 0.0 + iContr,
                'leaveDOM': true
            },
            function(img) {
                ctx.drawImage(img, 0, 0);
            }
        );
    }

    if (iCnt > iEfIter / 2) {
        // change brightness
        Pixastic.process(canvas, 'brightness',
            {
                'brightness': -2,
                'contrast': 0,
                'leaveDOM': true
            },
            function(img) {
                ctx.drawImage(img, 0, 0);
            }
        );
    }

    if (iCnt == iEfIter / 2) { // switch actual image
        iContr = 0;
        ctx.drawImage(aImages[iCurSlide], 0, 0);

        Pixastic.process(canvas, 'brightness',
            {
                'brightness': iEfIter,
                'contrast': 0,
                'leaveDOM': true
            },
            function(img) {
                ctx.drawImage(img, 0, 0);
            }
        );
    } else if (iCnt == iEfIter) { // end of cycle, clear extra sub timer
        clearInterval(iSmTimer);
        iCnt = 0;
        iContr = 0;
    }
}

As you can see – main functionality is easy. I have defined main timer (which will change images), and one inner time, which will use to change brightness and contrast of our canvas.

Live Demo

download in package

Conclusion

Hope that today’s html5 slideshow lesson was interesting for you as always. We have made another one nice html5 example. I will be glad to see your thanks and comments. Good luck!

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!