Using .animate() in jQuery

jQuery FTW. It’s easy to use, functional, and well documented. I could go on for days, jQuery is my favourite framework. Let’s see if we could create a simple navigation bar with only HTML, CSS and jQuery.

First we need to load jQuery, referring to it’s Google URL.

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

We’re now making sure that when the nav is hovered over, it’s margin changes, at a rate of 400 milliseconds:

$(document).ready(function(){
$("nav ul li a").hover(function () {
$(this).stop().animate({ 'margin-top' : "10px" },400);
});
});

Read more…

Creating a PHP captcha system

This is a very useful, yet simple PHP script which keeps the spambots away from your information.

Firstly, create a file called captcha.php, and insert this code:

< ?php
header("Content-type: image/png");
$string = "abcdefghijklmnopqrstuvwxyz0123456789";
for($i=0;$i&lt;6;$i++){
    $pos = rand(0,36);
    $str .= $string{$pos};
}
 
$img_handle = ImageCreate (60, 20) or die ("Cannot Create image");
//Image size (x,y)
$back_color = ImageColorAllocate($img_handle, 255, 255, 255);
//Background color RBG
$txt_color = ImageColorAllocate($img_handle, 0, 0, 0);
//Text Color RBG
ImageString($img_handle, 31, 5, 0, $str, $txt_color);
Imagepng($img_handle);
 
session_start();
$_SESSION['img_number'] = $str;
?>

Read more…

11 Questions With Kitty Gallannaugh

Kitty Gallannaugh is a professional photographer based in London UK. She is a unique photographer, and hopes to bring a fresh, modern and innovative ideas into the modern photography world. You can view her website or visit her Flickr.

1. What inspired you to take up photography?
I wanted to be able to capture the quiet moments we forget. We always
photograph the important events – birthdays, Christmas etc. But what about
the normal day-to-day happiness too? I wanted to take photographs so I could
remember every little moment in my life and others too. Read more…

Learning jQuery | #2 | Using .css()

Digging a little deeper, we’re going to jump straight into animating elements of a web page, one of jQuery’s primary uses. Let’s start off by making a div:

#aDiv { background-color: #0094ff; width: 400px; height: 400px; }

We now have made a div with the id of “aDiv” and there are a lot of cool plugins and effects you could use to animate the div. But what if you want to edit the background color of the div? Well background color is a CSS property, therefore we should use .css()

$(document).ready(function() {
	$("#aDiv").click(function () {
	$(this).css("background-color","green");
 
	});
	});

Explained:

When the DOM has fully loaded.

When aDiv is clicked.

Make aDiv’s background-color change to green.

You can edit CSS with jQuery! Part 3 will be exploring .animate()!

Demo

Learning jQuery | #1 | Basics + Syntax

jQuery is very powerful and useful, in my opinion, it’s the best Javascript framework ever. The possibilities with jQuery are endless, from animating divs, changing CSS, and building web apps. It’s part of the Web 2.0 revolution. There is a load of jQuery tutorials around, but this series is for beginners and novices, this specific part is focusing on the syntax of jQuery.

To include the library, remember to insert this between the head tags:

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

Read more…