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!

Cache Pic

As I said in my last post, I wanted from the first time to make a cacheing system for my imageroll page. Because i take the images from vi.sualize.us servers and we don’t want to make to much trafic and make stuff worse for them.

So what i did is simple, i made a class that extracts the rss data from theirs servers and get the images to display them. I do this every time someone visits the page. If any image is new for the first time we display the image from vi.sualize.us and run a functions in javascript to check for new images. If any new images exist then we cache them in a folder on our server and the next time a user visits the page that image will be shown from our server. Pretty simple.

For now i’ll just show you the stuff that makes this thing run and if you want i can share the whole script so that you can make one for your blog or website.

I’ll also try to make a WordPress plugin so you can integrate it easily in your blog.

So here we go. We start with the function that checks for new images:

functio checkCache($image_url){
            $path=pathinfo($image_url);
            $img_cached = 'cache/'.$path['filename'].'.'.$path['extension'];
            if(!file_exists($img_cached)) {
                createCacheImg($image_url);
            }
}

This function just checks if the image exists in the “cache” folder. If it’s not there then we run the “createCacheImg” function.

We now need a function to get the image so we check if the image is in the cache folder or not so we know what to display.

    function getImage($or_img) {
        $path=pathinfo($or_img);
        $filename=$path['filename'];
        $img_cached = 'cache/'.$filename.'.'.$path['extension'];
        if(file_exists($img_cached)) {
            $url=$img_cached;
        }else {
            $url=$or_img;
        }

        return $url;
    }

Very simple function that just returns the right url of the image.

Now we cache the image.

function createCacheImg($image){
        $srcsize = getimagesize($image);
        $w = $srcsize[0];
        $h = $srcsize[1];

        $path=pathinfo($image);
        $dest='cache/'.$path['filename'].'.'.$path['extension'];
        if($path['extension']=='jpg' || $path['extension']=='jpeg' || $path['extension']=='JPG') {
            $src_img = imagecreatefromjpeg($image);
        }else if($path['extension']=='gif') {
                $src_img = imagecreatefromgif($image);
            }else if($path['extension']=='png') {
                    $src_img = imagecreatefrompng($image);
                }
        $img_cpy=imagecreatetruecolor($w,$h);
        imagecopy($img_cpy, $src_img, 0, 0, 0, 0, $w, $h);
        if($path['extension']=='jpg' || $path['extension']=='jpeg' || $path['extension']=='JPG') {
            imagejpeg($img_cpy,$dest);
        }else if($path['extension']=='gif') {
                imagegif($img_cpy,$dest);
            }else if($path['extension']=='png') {
                    imagepng($img_cpy,$dest);
                }
        imagedestroy($src_img);
}

This function will save the image into the cache folder. Now we need a new file “checkcache.php” where we put this code:

include('functions.php');
$image=$_GET['image'];
checkCache($image);

Right now we should have this kind of structure in our imageroll folder: A folder “cache” a file “functions.php” where we place all these functions we just did and a file “index.php” where we run the javascript function and display the images.

The “index.php” file requires this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <title>
            Image ROLL
        </title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">  google.load("jquery", "1.3.2"); </script>
    </head>
    <body>
<input type="hidden" id="image" value="http://test.com/image.jpg">
<img src="<?=getImage($image)?>" alt="test image"/>
</body>
</html>

We have here a simple index.php file that imports the google api and jquery so we can run a simple ajax function. This is the javascript code that you should insert in this file or a separate one if you want:

            $(document).ready(function() {
                checkCache();
            });

            function checkCache(){
                var page=$('#image');
                var url='checkcache.php';
                var pars='page='+page.val();
                $.get(url,pars);
            }

This will run this function after the page loads and it will check for new images. So this is just a simple script that will make you pages load faster expecialy if you load the images from outside of your server.

If you liked this i’ll go and make a more complex one and even share the imageroll script i did. That until i find the time and make a Wordpress Plugin.

jQuery pagination

Description

When you have a a large list of items (e.g. search results or news articles), you can display them grouped in pages and present navigational elements to move from one page to another. This plugin creates these navigational elements.

Usage

Include the pagination plugin script and the pagination.css file in your HTML page. In your HTML body create a container tag pair that will hold the link elements. Give it an id attribute (e.g. “News-Pagination”)

After you have loaded the contents and know how many items you want to display overall, create the pagination like this:

	// First Parameter: number of items
	// Second Parameter: options object
	$("#News-Pagination").pagination(122, {
		items_per_page:20,
		callback:loadContents
	});

This will create the navigation links inside the container. You will see the numbers 1-7, the first number is highlighted. When you click on another number, the highlighting changes and your callback function “loadContents” is called.

The plugin is highly configurable through the option parameter and all elements can be styled separately.

You can check out a demo here.
And download the source code here.

PNG Fix for IE6

For quite a while, i was using a Javascript png fix called SUPERSLEIGHT and i was very happy about how it worked.

But last night i came into a problem. I needed to make some rollover images which were transparent PNG’s, and when the images change, the transparency fix will break. So i started looking for a solution and i came over this function, which works perfect. The only thing was that this won`t work togheter with the original SUPERSLEIGHT script and it only fixes the png`s in IMG tags, and i had a lot of PNG images as backgrounds, inputs, etc.

So i changed the supersleight script to ignore PNG`s in IMG tags, and i merged it with the other script.

How it works :

- Link the ’supersleight-swap.js’ file into your document inside conditional comments so that it is delivered to only Internet Explorer 6 or older.

<!--[if lte IE 6]>
	<script type="text/javascript" src="path/to/supersleight-swap.js"></script>
<![endif]-->

- Copy ‘x.gif’ in the same directory as the page you’re using PNG’s on.

- Put in the function that swaps the images (for NORMAL browsers) :

function imgSwap(oImg)
{
   var strOver  = "_on"    // image to be used with mouse over
   var strOff = "_off"     // normal image
   var strImg = oImg.src
   if (strImg.indexOf(strOver) != -1)
      oImg.src = strImg.replace(strOver,strOff)
   else
      oImg.src = strImg.replace(strOff,strOver)
}

- Call the function in the ‘onmouseover’ and ‘onmouseout’ event of the IMG.

<img alt="a png image" src="path/to/image_off.png" onmouseover="imgSwap(this)" onmouseout="imgSwap(this)" id="img1">

Note that each PNG must have an ID attribute for this to work.