Gavin

Gavin

(1 comments, 23 posts)

This user hasn't shared any profile information

Posts by Gavin

Zebra striping tables in jQuery with minimal code.

2
1 year ago
by Gavin in

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

(more…)

demo-tile

Image tiles with captions and rollover text in jQuery

1
1 year ago
by Gavin in

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)

(more…)

Simple tabs and panes with jQuery

0
1 year ago
by Gavin in

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.
(more…)

10 easy to do Search Engine Optimisation (SEO) tips

0
1 year ago
by Gavin in

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. (more…)

[Updated] XML banner fader in jQuery – with cross-fading

1
1 year ago
by Gavin in

This is an update to my XML Banners code, this one includes cross-fading, it’s slightly more complex as you need two images in your HTML to cross-fade, and use them positioned at (0,0) in your original banners DIV.

Demo of XML cross-fading banners in jQuery

Download ZIP of all files (123Kb)

XML banner fader in jQuery

7
1 year ago
by Gavin in

More jQuery animation! This one puts a fading set of banners on your page. It uses simple XML to tell the javascript what banners to pull in, and the URLs you want the banners to link to. This is ideal for linking to top featured stories.

Demo of XML banners in jQuery

Download ZIP of all files (123Kb)

Here’s the XML code.


< ?xml version="1.0" encoding="utf-8"?>

(more…)

Quick Tip: MySQL database dump

0
1 year ago
by Gavin in

In response to @ChrisWhoCodes here’s some useful snippets for MySQL database backups.

Dump your entire database to a file, schema and data:

mysqldump -u db_user -p databasename > output.sql

Dump your database schema only

mysqldump -u db_user -p --no-data databasename > output.sql

Don’t think it gets much simpler than that. You must include -u and -p if you don’t have localhost privileges set up, and db_user must be the user with privileges for that database, or a root/superuser. If you want to export all databases, just user –all-databases as an export option, if you do, you need to make your db_user root or a superuser.

There’s a load more options at the MySQL manual page for mysqldump.

If you want to pull your data into a new instance of mysql, say for moving servers, it’s just this:

mysql -u db_user -p < output.sql

Note: It will drop any tables currently in that database.

Quick Tip: Get bit.ly stats for any bit.ly link.

0
1 year ago
by Gavin in

You can look at any bit.ly link stats for anyone, just adding + to the end of the URL. e.g. http://bit.ly/gFIyz5 becomes http://bit.ly/gFIyz5+

Useful to find out where other people get their incoming links from. Even competitors.

News feed scroller in jQuery

3
1 year ago
by Gavin in

Sometimes you need a little news feed on your homepage with some animation to attract the eye, it’s not as bad as a marquee tag, and jQuery lets you do animation very easily.

Demo of News Scroller

Download ZIP of all files (3Kb)

Here’s the CSS code you’ll need.

CSS

@charset "utf-8";
/* CSS Document */

#newsscroll{
	color: white;
	font-size: 12px;
	width: auto;
	padding: 5px;
	position:relative;
	overflow: hidden;
	background-color: #000;
}

#newsscroll_link{
	color: white;
	text-decoration: none;
	position: relative;
}

#newsscroll_link:hover{
	color: blue;
}

(more…)

Thoughts on Android Gingerbread 2.3

0
1 year ago
by Gavin in

So Gingerbread, aka Android 2.3 is out. What does this mean for users? Well, if you’re expecting something akin to the difference between Windows XP and Windows 7, you’ll be disappointed, it’s a step forward, but the next big leap will be Honeycomb.

The main differences are in the UI, White/Grey is out, and black is in, with green highlights. There’s VoIP calling built in, better keyboard, better power management, it just adds up to a good all round improvement on 2.2 Froyo.

There are some major differences however, on the developer side of things, with a lot of changes geared towards real-time games and audio, there’s a new low latency audio SDK which would make things like Guitar Rig a possibility with real time effects, there’s something called Strict Mode, which allows developers to stop threads that go on for too long. It adds a lot more capability to native code (something I’ve yet to delve into) which gives a full OpenGL and OpenSL ES capability, which is awesome, again, for games.

Unfortunately the only device with 2.3 available is the Nexus S, and that’s £549 from the Carphone Warehouse. Looks like I won’t be getting one any time soon then, I’ll just have to wait until my HTC Desire is updated to 2.3, which if HTC’s previous updates are anything to go by, will be sometime around April 2011, after Android Honeycomb 3.0 has launched.

You can read more here on the Google 2.3 Platform Highlights.

Gavin's RSS Feed
Go to Top