Archive - February, 2010

Using jQuery Listnav Plugin

February 13, 2010 in Learn jQuery Now with 2 Comments

Yesterday I was looking around for a creative way to display what will eventually become a very large list of information. Generally I would just use extra links and sort them alphabetically. For me it had never seen like the most ideal solution. Forcing the user to wait while the page reloads itself is actually a bad solution. What if you could just have all the information load once and the user could then instantly browse all that information?

This is how I came across the jQuery ListNav Plugin by iHwy. It does exactly what I was looking for. It takes a large list of information and makes it very easy to work with.

All you have to do is place the location you want the navigation bar to go, then you create your unordered list, and then just put in a single jQuery command and it does the rest. It could not be simplier.

I have so many different ideas where this could be used. The one I probably see is creating an interactive product listing for an eCommerce site. Many websites make HTML versions of their sitemaps for SEO rankings. These pages generally have little to no use for the end customer because it usually is just a bunch of links displayed. With this plugin, you really could make this information useable by customers. A very neat concept.

You can view the demo of the plugin in action here. You can also view how I used this on another one of my websites by clicking here.

Creating a jQueryUI Accordian

February 6, 2010 in Learn jQuery Now with Comments Off

An accordion is the ideal choice for when you have to put a lot of information on the screen, but you do not have a lot of screen real estate available for that information.

Luckily for us we can create an accordion very easily using jQueryUI.

First thing you need to do is place all of your information inside your HTML like this:


<div id="accordion">
	<a href="#">First Section Title</a>
	<div>First Section's Content would be placed inside of this div</div>

	<a href="#">Second Section Title</a>
	<div>First Section's Content would be placed inside of this div</div>

	.... Repeat this for as many sections you want ....

</div>

Now that you have your HTML structure set up, now all you have to do is use some Javascript to tell jQuery UI to turn it into a the accordion.


<script type="text/javascript">
	jQuery(document).ready(function(){
		$('.accordion .head').click(function() {
			$(this).next().toggle('slow');
			return false;
		}).next().hide();
	});
</script>

Now you have a very easy way to put a large amount of information inside of a limited space.

Securing Passwords With PHP

February 5, 2010 in Learn PHP Now with Comments Off

Any website that stores users login information has to store their passwords. One thing that provides an extra layer of security for your users information is to do one way encryption on their passwords. You could in theory store their passwords as plain text, but if someone were able to get in to your database, they would have instant access to every users account.

One way encryption allows the password to be store in a secure manner. In fact it is so secure that you cannot decrypt it to recover the encrypted data. In order to authenticate the user you actually have to encrypt submitted data and compare the results that way.

One of the most widely used ways to accomplish one way encryption is to create an MD5 hash of the password. Lucky for us, it is so incredibly easy to create an MD5 hash of a string. You simply use the function md5(). See the example below:

<?

$encrypted_password = md5("secret");

?>

The value of $encrypted_password is the secured password.