Posted by & filed under Web Development.

This is a very simple function, but very useful for resizing JPEG images on the fly. You need to make sure GD is enabled on your PHP installation. It will resize any JPEG picture to a specified width, very handy for eCommerce sites. It will actually fit any picture into a square thumbnail of $size by $size.

usage: processImage($file,$dest,$size)

$file – the name of the file, use full directory name
$dest – the name of the file to output
$size – WIDTH of the file.

	function processImage($file,$dest,$size)
	{
		$src = imagecreatefromjpeg($file);
		/* create thumbnail */
		$thumb = imagecreatetruecolor($size,$size);
		$red = 255;	$green = 255;	$blue = 255;
		$color = imagecolorallocate( $thumb, $red, $green, $blue ); 

		/* fill with white */
		$x = 1;
		$y = 1;
		imagefill($thumb, $x, $y, $color);
		
		/* get image original width and height */
		$src_x = imagesx($src);
		$src_y = imagesy($src);

                /* scale to fit width of $size if image is wider than height, align vertical center */
		if($src_x>$src_y)
		{
			$ratio=$size/$src_x;
			$new_x=$size ;
			$new_y=$src_y * $ratio;
			$new_xpos=0;
			$new_ypos=($size - $new_y) / 2;
		}
		else /* scale to fit height of $size if image is higher than wide, align vertical center */
		{
			$ratio=$size/$src_y;
			$new_x=$src_x * $ratio ;
			$new_y=$size;
			$new_ypos=0;
			$new_xpos=($size - $new_x) / 2;
		}
                /* copy to new image and save */
		imagecopyresampled($thumb,$src,$new_xpos,$new_ypos,0,0,$new_x,$new_y,$src_x,$src_y);
		imagejpeg($thumb,$dest,80);
	}

Posted by & filed under Web Development.

Now we’re getting into more complex territory, this small project pulls in data from an XML file and feeds it into a table in your page, this XML can be either a server side script, or a feed, or just a static XML file. You wouldn’t want to do this on your main site as search engine’s wouldn’t be able to spider the table, but it’s really useful for dashboards, statistics, admin pages, etc. You can filter the XML without reloading either the XML or the page.

Example demo XML table with filtering

Download Files (5Kb)

Read more »

Posted by & filed under Web Development.

This is a continuation of the previous post Pure CSS Dropdown Menus. jQuery is used only for creating neat effects when menus are rolled over.

Example CSS Menus with jQuery Effects

Download Files (4Kb)

There are some caveats, this code will most likely not work in IE6. It will however work in most modern browsers including IE7. The best idea is to download the code and see how it works.
Read more »

Posted by & filed under Web Development.

Drop down menus are great if you need a more tree like structure in your menus. This version is for a 2 level navigation style menu bar with drop down lists. They can be any size, just adjust the CSS accordingly.

Example Pure CSS Drop Down Menus

Download Files (4Kb)

There are some caveats, this code will not work in IE6. Internet Explorer 6 does not support :hover on elements other an anchor (A) tags. It will however work in most modern browsers including IE7. The best idea is to download the code and see how it works.
Read more »

Posted by & filed under Web Development.

This is some really simple code to add zebra stripes to your HTML tables, this is really good for tables with long rows to ease readability, and can be tedious to add by hand.

Example zebra stripes in jQuery

$(document).ready(function(){
	$(".zebratable").each(function(){   
 	var $s=0;
		$(this).find("tr").each(function(){   
			var $t = $(this).children("td");
			$s++; 
			if($s%2==1)
				$t.addClass("stripe"); 
			else
				$t.removeClass("stripe");
		});
  	});
});

Read more »

demo-tile

Posted by & filed under Web Development.

This is a really simple way of adding some animation to your image links, the overlays also work if Javascript is switched off, so you have a fallback in the css. The jQuery code is very minimal and uncomplicated. There will be some bits you’ll need to edit if you change the image size.

Demo of image tile links in jQuery

Download ZIP of all files (58Kb)

Read more »

Posted by & filed under Web Development.

If there’s one thing jQuery is good at, it’s doing complicated things with simple code. The code below is for a tab system. I’ve purposely kept the styling simple, and kept the jquery as minimal as possible. The advantage of this method over AJAX tabs (where they load from XML files) is that all your content is on the page already, great for SEO.

Demo of simple tabs in jQuery

Download ZIP of all files (3Kb)

Here’s the jQuery


$(document).ready(function(){
	$(".tab").click(function(){
		
		$(".tab").removeClass("selected");
		$(this).addClass("selected");
		
		$(".pane").addClass("hidden");
		$($(this).attr("href")).removeClass("hidden");	
		
	});
});

That’s it, that’s all the jQuery you need. Of course the HTML needs to be a bit more complex than the jQuery, but it’s simple enough.
Read more »

Posted by & filed under Web Development.

Optimising your site for search engines such as google is seen to be a dark art. There’s some things you can do to make your site easily crawled and found by search engines

  1. Put good content on your site.
    Good content is the mainstay of SEO, your site needs original, well written copy and content which has in it the key words relating to your site. You need to make sure this content gets people reading it, and make it content other sites will want to link to. Do not stuff your page full of key words, unrelated or related to your site, it all has to be relevant and not spammy.
  2. Get a good domain with key words in related to your site.
    This isn’t easy if you already have a domain for your site, but if you want to rank higher for ‘widgets’ buy a domain with the name ‘widgets’ in it. Though this isn’t a major factor in getting good search rankings.
  3. Use folders/directory names on your site with relevant keywords.
    Don’t do http://www.example.com/index.php?page=1. You can use Apache’s URL rewriting to do much better. For example http://www.example.com/widgets-I-talk-about/1/ it has key words in, and isn’t spammy.
  4. Make your page titles relevant.
    The title will be shown in the search listing, you need to make this easy to read, and not stuffed with key words. Ideally your titles should be about 10-15 words maximum and again, relevant to your content. Read more »