Sexy CSS+JS Form

I was working on our new open source project that i think you will like and I was working on the registration page. This is what I got in the end and i will walk you trough the process with me. This new tutorial is about styling the forms of your website, I find it very good looking and very simple to implement. We will use simple CSS and some JavaScript.

Usually for inserting text into the inputs or our forms we set the value attribute with the text and then use javascript to check for different scenarios for doing some fancy things. This is different we will use labels to fill the text and move them under the inputs and then just do our magic with JS.

The JavaScript library that we will use to create this effect for our forms is Jquery

1. Creating the markup!

            <div id="login">
                <div class="sayit">Log In:</div>
                <form action="javascript:void(0)" onsubmit="login()" autocomplete="off">
                    <label for="username">Username</label>
                    <input type="text" id="username"/>
                    <label for="password">Password</label>
                    <input type="password" id="password"/>
                    <input type="submit" class="medium button green" value="Log me In"/>
                </form>
            </div>

The above code is our markup and as you can see is very simple and it can be changed as you like because the code that we will use for checking for different scenarios in javascript will work without necessary classes or ids. We have 2 inputs and 2 labels, one is password one is text and we can work with these ones, you can add as many as you like.

Now let’s style these bastards!

2. Use CSS to style the form elements!

input[type=text],input[type=password]{padding: 5px 10px; background-color: transparent;	position: relative; z-index: 2;}
label{position: absolute; z-index: 1;-webkit-transition: opacity 0.15s linear; color: #bababa; background-color: #FFFFFF; }

#login{width: 290px; margin: 0 auto;}
#login input[type=text],#login input[type=password]{width:270px; margin: 5px 0; font-size: 24px; font-weight: bold; border: 1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; color: #595959;}
#login label{font-size: 24px; margin: 14px 10px;}

#login .sayit{font-size:24px; color: #595959; font-style: italic; padding-bottom: 5px;}

What we did here is make the label absolute so it will go under the input. This is important you will have to place the label before the input so remember this! The input will have a position relative and a z-index of 2 so we can be sure it will land above the label. Next we define the login div by using his id(#login). We use CSS3 for creating the round borders for the input and style the label by setting a big font-size to fit the input. The rest is pretty obvious, if you have trouble understanding this then let us know in the comments.

3. Make everything move with JS!

$(document).ready(function(){
    $.string(String.prototype);
    $("input,textarea").each(function (type) {
        $(this).focus(function () {
            if($(this).val().blank())
                $(this).prev("label").fadeTo('fast',0.45);
        });

        $(this).keypress(function () {
            $(this).prev("label").fadeTo('fast',0);
        });

        $(this).blur(function () {
            if($(this).val().blank()){
                $(this).prev("label").fadeTo('fast',1);
            }
        });
    });
});

We use here jQuery of course that we add using the google api like this:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

And one plugin that I use to extend the jQuery string properties and that is $.string plugin. After we do that we create the above code and we assign to input and textarea elements a focus, keypress and blur actions. We use the focus action to lower the labels opacity to 45% then on keypress we just hide it for good. Then on blur we check to see if anything was written in our sexy element and if not then we fade the label back to 100%. This is kind of everything we do here, pretty simple.

4. Showing of a demo and download source

I’ve set up a demo here: DEMO

The source code you can either pick it from the demo page or from here: SOURCE

5. Wrapping up!

So here is our nice form styling that you can use on your website and that can be done very easily. Feel free to leave us comments and suggestions. Thanks a lot!

Have fun coding!

Performance

What Yslow goes round and round is the cache system of the browser. So what you are actually doing is making everything cacheable and as small as possible so that the browser takes everything loading from one bite. The browsers have a limited number of requests that they address at once so if you can get into that margin then you are good. So very important combine every file and make is small!

What have i done is use the gzip module of the apache server by using php and a .htaccess file. I believe this is one of the most nice ways to take advantage of this feature without making any changes to your website. What it does is adding lines of code at the beginning of txt/html/htm/php files, css files and js files. After we do this we add a closing line at the end and we are good. Gzip is in place up and running.

How do we do it? Well here is the code:

<FilesMatch "\.(css)">
    ForceType application/x-httpd-php
	php_value auto_prepend_file "address-to-this-file/gzip/gzip-css.php"
php_value auto_append_file "address-to-this-file/gzip/gzip-end.php"
</FilesMatch>

<FilesMatch "\.(txt|html|htm|php)">
    ForceType application/x-httpd-php
	php_value auto_prepend_file "address-to-this-file/gzip/gzip-gen.php"
php_value auto_append_file "address-to-this-file/gzip/gzip-end.php"
</FilesMatch>

<FilesMatch "\.(js)">
    ForceType application/x-httpd-php
	php_value auto_prepend_file "address-to-this-file/gzip/gzip-js.php"
php_value auto_append_file "address-to-this-file/gzip/gzip-end.php"
</FilesMatch>

The next step is a selective one since what we are doing is telling the browser to not look for a file until we tell it to. So if we set the expiration to 2 years from now the browser will always use the one it has in it’s cache until 2 years pass.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A604800
ExpiresByType text/javascript A604800
ExpiresByType text/css A604800
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType text/plain A86400
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType video/x-flv A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/html A600
</IfModule>

We check for the expires module and if it’s activated then we just set the expiration dates. What does “ExpiresByType text/css A17200″ means? Css files “expire after 4.8 hours”
“A” before the numbers above stands for Access. This means that the stopwatch starts when a client accesses the file. You can also use “M” for modified.

TIME CHEAT SHEET

• 300 5 MIN
• 600 10 MIN
• 900 15 MIN
• 1800 30 MIN
• 2700 45 MIN

• 3600 1 HR
• 7200 2 HR
• 86400 24 HR

• 86400 1 DAY
• 604800 7 DAY

• 604800 1 WEEK
• 2419200 4 WEEK

• 2419200 1 MONTH (FEBRUARY)
• 2505600 1 MONTH (FEBRUARY LEAP YEAR)
• 2592000 1 MONTH (APRIL, JUNE, SEPTEMBER, NOVEMBER)
• 2678400 1 MONTH (JANUARY, MARCH, MAY, JULY, AUGUST, OCTOBER, DECEMBER)
• 31536000 12 MONTH

Now just download this thing and get a faster website. The rest of the Yslow rules are pretty simple to follow so i just felt i would let you know what i use for these 2 because i found them hard to figure out than the rest.

Here it is the .htaccess code:

RewriteRule ^.+\.(css|js|png|jpg|swf)$ gzip/compress.php [NC]

This will pass all files that are css, js, png, jpg, swf trough the compress.php file. And here is what the compress.php file does:

<?php
$basedir = $_SERVER['DOCUMENT_ROOT'];
$file = realpath( $basedir . $_SERVER["REQUEST_URI"] );

if( !file_exists($file) && strpos($file, $basedir) === 0 ) {
    header("HTTP/1.0 404 Not Found");
    print "File does not exist.";
    exit();
}

$path_info = pathinfo($file);
$extension=$path_info['extension'];

switch($extension) {
    case 'css':
        $mime = "text/css";
        break;
    case'js':
        $mine = "text/javascript";
        break;
    default:
        $mime = "text/plain";
}

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
    ob_start("ob_gzhandler");
else
    ob_start();
header( "Content-Type: " . $mime . "; charset: UTF-8");
header ("cache-control: must-revalidate");
readfile($file);
?>

The file checks for the extension of the file that is receives and ads the corresponding headers to it’s top.
Pretty simple. Download the zip file to get both versions.

Awesome website optimizer

Play with CSS3

If you saw our “ImageRoll” page and you used Firefox, Chrome or Safari then you saw the images being rotated in different angles well the way i did that is by using CSS3. I guess you already figured that out from the title.

CSS3 implements a lot of new features that can make your life easier of course you will not be able to use them quite yet. IE is not supporting like more than 90% of them so it’s useless if you want to make this for a client. The ones that we used on our blog are: box-shadow, border-radius and text-shadow. I think these are the most important of them but you can check all of them out by taking a look at this page: css3.info/preview/.

I’m gonna do a simple explanation on the ones we used and show you some code.

We used on the hrefs of the page this property:

-moz-box-shadow: 0px 2px 15px #333;

Now let’s explain. Why “-moz” in front of it? This is a simple hack for those who don’t know it. It tells the browser to render this only in mozilla based browsers. Next we have the property box-shadow and 0px means the top margin of the shadow, 2px means we move the shadow 2 pixels to the left and 15px
means we create a shadow with 15 pixels of size of blur if you want, #333 is of course the color of the box shadow. Pretty simple .

Now let’s rotate the images:

   -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);

You know -moz- already but we have a new one “-webkit-” this one means it will render in webkit based browsers, the most popular are: Safari and Chrome. Next we have the property “transform” and the degree of rotation “-10deg”.

The other one that we used all over the blog is text-shadow

text-shadow:1px 1px 0px #000;

This property is like this 1px means we move the shadow with 1 pixel from the top, 1 pixel from the left and 0 blur or size, #000 means of course the color of the shadow.

And here is a preview in 2 browsers IE and Firefox so you can see maybe you are not using a browser that supports CSS3.

Ie view

Firefox view

My imageroll page is inspired from this page: line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery . Go and check it out .

Thank you and happy coding!

Twitter followers tutorial

You’re probably wondering why should i bother if we have TwitterCounter to show us the followers, well what if i don’t like the way it shows them what if i wanna do a counter with my own graphics , well i’m gonna show you how.

We’re gonna need the jpg to show the followers on and 2 classes to read the data.

Let’s get some twitter icons so that we can create a simple image in photoshop. With a simple google search we get on this article 100+ Remarkably Beautiful Twitter Icons And Buttons created by www.hongkiat.com.

I did a simple image that you can use if you want it’s all added to the download package.

Now let’s create the php code that will display that followers number…

We’re gonna need 2 classes that will get our job done easily, a twitter class and a class that will transform the xml output into an array one.

My follow chocksy image

Also you have to find out your id number that’s a little tricky and i don’t understand why twitter is not showing that so that you can find it. So here is how you can find your twitter id:

Go on your account page and on the right you have a button named RSS, now that button has an url like http://twitter.com/statuses/user_timeline/18107925.rss so the bolded number is your id that you’ll have to use in our php code.

include('xml2array.php');
include('twitter.lib.php');
$user = 'yournickname';
$password = 'yourpassword';

$twitter = new Twitter($user, $password);

$friends = $twitter->showUser('xml','yourid_number');
$xml=new XML2Array();
$arr=$xml->parse($friends);
$followers=$arr['user']['followers_count']['value'].' <span style='font-size:12px;'>followers</span>';

We will now show the image with the number in the right place. We’ll link the image to our account so that people can follow us and place the followers in the div we have between the a tags.

<div>
<a href="http://www.twitter.com/yournickname" target="_blank" style="text-decoration:none;"><div class="twitter" id="tell_followers"><?=$followers?></div></a>
</div>

Here we have the css that takes care of the followers number display.

.twitter{
color:#FFFFFF;
font-family:Tahoma;
font-size:24px;
line-height:14pt;
background:url(follow_me.png) no-repeat;
height:85px;
width:170px;
padding:35px 0 0 57px;
text-decoration:none;
cursor:pointer;
}

UPDATE (for blogers with a lot of visitors)

Since we use this script to make requests to the twitter API we have to be careful because the API does not allow us to make more than 100 requests per hour so if you have more than 100 visitors per hour you have to make this changes:

First of all let’s create a MYSQL table here is the SQL code for the table, a very simple one :

 CREATE TABLE `ajaxmast_blog`.`twitter_counter` (
`id` BIGINT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`followers` BIGINT NOT NULL ,
`last_set` DATETIME NOT NULL
) ENGINE = MYISAM

Ok after we’ve done that let’s connect to the db.

//DATA FOR SQL
define(USERNAME,'db_username');
define(PASSWORD,'db_password');
define(DATABASE,'db_name');
//END CONF

//connect to db
@mysql_connect('localhost',USERNAME,PASSWORD);
@mysql_select_db(DATABASE);
$db_query=mysql_query('SELECT * FROM twitter_counter LIMIT 1');

We’ll put the request to the twitter API in a function so we don’t have a very heavy code:

//function to get the followers nore easily
function get_followers($user,$password){
$twitter = new Twitter($user, $password);

$friends = $twitter->showUser('xml','18107925');
$xml=new XML2Array();
$arr=$xml->parse($friends);
$nr_followers=$arr['user']['followers_count']['value'];

return $nr_followers;
}

After that we create a difference function so we can calculate the minutes that have passed since we checked the twitter API:

function dateDiff($date, $date2)
{
    if($date2 > $date) {
        $tmp = $date2 - $date;
    }

    else {
        $tmp = $date - $date2;
    }

    $seconds = $tmp;

// Relative ////////
    $minutes = floor($tmp/60);
    $tmp -= $minutes * 60;

    // Total ///////////
    $tminutes = floor($seconds/60);

return $tminutes;
}

And for the final touch we check to see if the time has passed so we can call again the twitter API or if not we should display the followers from our database:

$curent_time=date('Y-m-d H:i:s');
$info=mysql_fetch_array($db_query);
$last_set=$info['last_set'];

$dif=dateDiff(strtotime($curent_time),strtotime($last_set));

//check for last request
if(mysql_num_rows($db_query)==0){
$nr_followers=get_followers($user,$password);

mysql_query("INSERT INTO twitter_counter (followers,last_set) VALUES('".$nr_followers."',NOW())");
}else if($dif<=10){
$nr_followers=get_followers($user,$password);

mysql_query("UPDATE twitter_counter SET followers='".$nr_followers."',last_set=NOW()");
}else
$nr_followers=$info['followers'];

$followers=$nr_followers.' <span style="font-size:12px;"> followers</span>';

And that’s it the rest is the same. I will place this version in the .rar file too so you can use it as you may like tell me if you want any changes done to it or anything. I would like to thank smashing magazine for the feature here is the article: ARTICLE.

Download SOURCES

You have in the download package the PSD file and the 2 classes that will help you work this out, also there is a test file too. Hope you find this useful.
Thanks for reading.