Checking and displaying the user’s IP with PHP

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

 
<?php
 
$ip = $_SERVER['REMOTE_ADDR']; 
 
echo "<p>Your IP address is: <strong>$ip</strong></p>";
 
?>

View Demo

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…

Fading images with jQuery

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

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

<?php
 
 
 
// Define your username and password
 
$username = "someuser";
 
$password = "somepassword";
 
 
 
if ($_POST['txtUsername'] != $username || $_POST['txtPassword'] != $password) {
 
 
 
?>
 
 
 
<h1>Login</h1>
 
 
 
<form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
 
    <p><label for="txtUsername">Username:</label>
 
    <br /><input type="text" title="Enter your Username" name="txtUsername" /></p>
 
 
 
    <p><label for="txtpassword">Password:</label>
 
    <br /><input type="password" title="Enter your password" name="txtPassword" /></p>
 
 
 
    <p><input type="submit" name="Submit" value="Login" /></p>
 
 
 
</form>
 
 
 
<?php
 
 
 
}
 
else {
 
 
 
?>
 
 
 
<p>This is the protected page. Your private content goes here.</p>
 
 
 
<?php
 
 
 
}
 
 
 
?>

Force files to download using .htaccess

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()

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

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

Make an entire div clickable with jQuery

jQuery

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

HTML

<div id="someDiv">
     This is some of the div's content.
    <a href="http://google.com">The Link</a>
</div>