avn8

Checking and displaying the user’s IP with PHP

avn8 — Fri, 27 Aug 2010 01:49:19 +0000

This quick, yet very useful snippet harnesses the power of PHP and it’s superglobals.

 

 
$ip = $_SERVER['REMOTE_ADDR']; 
 
echo "Your IP address is: $ip
";
 
?>

View Demo

Using .animate() in jQuery

avn8 — Tue, 17 Aug 2010 15:30:26 +0000

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);
});
});

This now works fine, although nothing happens when you mouse out of the navbar, the margin of 10px is still there. To make it look normal again we have to add a little more:

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

We now have to obviously create the navbar using some CSS:

#nav {
	float: right;
}
 
#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
#nav ul li {	
	float: left;
}
 
#nav ul li a {
	display: block;
	line-height: 70px;
	padding: 5px;
	font-weight: 800;
	color: #1a1a1a;
	font-family: Arial, sans-serif;
	font-size: 16px;
	letter-spacing: -0.05em;
	text-decoration: none;
}

Now that we have the navbar, we have to make a simple fallback, just in case the user has Javascript disabled:

#nav ul li a:hover {
	color: #0094ff;
}

Now all we have to do is render the nav with some HTML:



Home
Services
Portfolio
About
Contact

And there you have it, a normal yet sleek navigation bar using only a couple of lines of jQuery.

View Demo

Creating a PHP captcha system

avn8 — Sat, 31 Jul 2010 01:07:52 +0000

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:


header("Content-type: image/png");
$string = "abcdefghijklmnopqrstuvwxyz0123456789";
for($i=0;$i<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;
?>

We’ve now created an image, using PHP, to display random letters and numbers.

Now create a file called verify.php, and insert this code:


session_start();
if($_SESSION['img_number'] != $_POST['num']){
    echo'Error!

    Try Again
';
}else{
    echo'Success!

    Go back
;
}
?>

Now we’ve just made the script that verifies what the user has just entered and tells them whether it worked.

Here’s the simplest part, the HTML:

Hope this helped.

11 Questions With Kitty Gallannaugh

avn8 — Tue, 13 Jul 2010 23:57:49 +0000

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.

2. What camera do you use?
I use the Canon 450D. It’s an amazing camera.

3. How many photos, on average, do you think you’ve taken?
Probably too many to count. I’d probably say somewhere around the 10,000
mark, I just never stop.

4. What football team do you support?
Chelsea!

5. What tips would you give an aspiring photographer?
Always take photographs and never ever give up. It’s frustrating and at
times you just want to pack it in. The more you give out, the more you will
receive. Never let a day go by when you feel you haven’t worked to your
fullest potential. If you go to bed thinking you could’ve done better, then
that’s a day wasted.

6. PC or Mac?
I use a PC but I know Mac’s are probably so much better for the design side
of life. One day, maybe one day I’ll own one!

7. Are you going to carry on photography for the rest of your life?
Absolutely, I don’t seem myself ever stopping. It’s become a big part of
who I am, asking me to stop shooting would be like asking someone which
sense they’d like to give up.

8. What music do you like?
I like a bit of everything, it really depends what kind of mood I’m in.
Some days I’ll want to relax and edit photographs to indie music and other
days I’ll be dancing around to rock.

9. What characteristics and skills do you think it takes to become a successful photographer?
The main skill one needs is organisation – without that you’re like a human
without a head. You need to learn how to act confident and think quickly in
shoots, it’s constantly moving very fast and you need to know how to keep
up. Being friendly is the main characteristic I would say there is – the
industry is full of amazing people and getting to know them is always
incredible.

10. Are you ever gonna take up web design?
I would absolutely love to. I designed my online portfolio myself, I
definitely find it heaps of fun as the possibilities for design are endless.
As for the coding side? That’s a whole other world.

11. What editing software do you use?
I use Photoshop CS4, it’s like a partner in crime.

Fading images with jQuery

avn8 — Tue, 08 Jun 2010 22:29:47 +0000

All you have to do to implement this jQuery, is put an image inside a div with an ID of someImage.

$("#someImage").hover(function(){
 
    $(this).find("img").fadeOut();
 
}, function() {
 
    $(this).find("img").fadeIn();
 
})

Password protecting a page with PHP

avn8 — Fri, 21 May 2010 18:57:26 +0000

This password protects a single page whereas the use of .htaccess only protects folders.


 
 
 
// Define your username and password
 
$username = "someuser";
 
$password = "somepassword";
 
 
 
if ($_POST['txtUsername'] != $username || $_POST['txtPassword'] != $password) {
 
 
 
?>
 
 
 
Login
 
 
 
 echo $_SERVER['PHP_SELF']; ?>">
 
    Username:
 
    

 
 
 
    Password:
 
    

 
 
 
    
 
 
 

 
 
 

 
 
 
}
 
else {
 
 
 
?>
 
 
 
This is the protected page. Your private content goes here.
 
 
 

 
 
 
}
 
 
 
?>

Force files to download using .htaccess

avn8 — Mon, 17 May 2010 15:19:43 +0000

This snippet comes in handy if you are tired of putting things in .zip formats for people to download.

AddType application/octet-stream .csv
AddType application/octet-stream .xls
AddType application/octet-stream .doc
AddType application/octet-stream .avi
AddType application/octet-stream .mpg
AddType application/octet-stream .mov
AddType application/octet-stream .pdf

Add other file types accordingly.

Learning jQuery | #2 | Using .css()

avn8 — Wed, 05 May 2010 19:40:16 +0000

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

Checking if an image has loaded

avn8 — Sat, 01 May 2010 01:19:36 +0000

$('#theImage').attr('src', 'theimage.png').load(function() {  
alert('Image Has Loaded!');  
});

Make an entire div clickable with jQuery

avn8 — Mon, 26 Apr 2010 09:10:30 +0000

jQuery

$("someDiv").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
});

HTML


     This is some of the div's content.
    The Link