Web Development

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

Go to Top