It has similar functionality jQuery’s hover(over, out) but with a few more options specifically geared towards pop up menus. Most importantly it will continue to match an element that you want to appear when you move off the mouse original element and on to any new element, where ever its located in the DOM.

Parameters

target (DOMElement): This is the element that is to ‘appear’ when the hover event is called.
addStyle (string): Optional. Adds a class to the matched element on hover (of matched element and target). Removed on hover off.
time (int): Optional. Time in milliseconds after a hover off when target element is invisible.
speed (String|Number): Optional. A string representing one of the three predefined speeds (”slow”, “normal”, or “fast”) or the number of milliseconds to run the animation displaying the target (e.g. 1000).
autooff (boolean): Optional. Default is true. If turned on will automatically hide any target elements if visible when a different popmenu is triggered. For example if you pop up menu’s would overlap if they were both visable at the same time it will hide it first.

Example

1
2
3

$('#mybutton').popupmenu({
				target: "#mybutton_menu", 
				time: 300 });

Download

Production (944 bytes, packed) v1.0
Development (1.75 Kb) v1.0

This version has been designed to make finding that font as easy as possible. Like the previous Jabroo the fonts are separated into categories and under their alphabet classification. It uses ajax to load all the fonts in one load quickly and makes flicking through each page a easy process. The old version required you to be signed up to automatically change the ‘preview text’ on every page, now users can change it without registration. The registration process has been completely changed and now requires only the most basic information, the user name and email activation process have been scraped. Now users can sign in with only a email address and password. Selecting the number of fonts to appear on each page is now also in the past. It automatically calculates the optimum number of fonts to be displayed for your particular screen type without the need for scrolling.

The technology

The application is built on the Zend Framework 1.5 technology. This implements a MVC architectural pattern and is fully PHP5 OOP. All the DHTML is built around the JavaScript framework jQuery. The main problem with a site like this is how it must be able to load a large amounts of images quickly. To improve perform all the images are cached server side and are pre loaded on the user side. This is done by loading the next two pages of image from the current one. This results in the user even flicking though at a quick speed doesn’t have to wait for images to load. Like many ajax enabled web sites use of the URL’s and browser ‘back’ and ‘forward’ buttons become useless because there is no physical page change. Using jQuery this site records your different Ajax clicks and tells your browser where you going to keep full use of browsers controls. With different Ajax screen that site gives a unique reference after the hash on the URL to ensure if you bookmark it you can always find yourself back on the correct page.

Known Issues

Microsoft IE 6 display issues

• Main content set to 80% width to make it fit, doesn’t display correctly on 1024 screens.
• Category pop up menu misaligned.
• Header and footer bar not the correct or the same size.

Microsoft IE greater then 6

• Log in form CSS misaligned with registration box.
• Browser not caching the images properly.

Persistent sessions weakens the security of your web site, issues like it being accessed on a public computer (you could add a tick box to be remembered) or if you hold security sensitive information. Its a trade off between usability and security. You could even implement a two step security system where by for example you may trust the user to carry out certain procedures from a persistent session such as adding a item to a wish list but require full password validation for procedures such as purchasing a item from a stored credit card number or changing passwords.

When thinking about how to create a system is seems tempting enough just to store the username and password in the cookie and read them off when the user comes back to the web site and automatically log them in. This is bad very idea. A potential hacker could easily gain access to this information and replay it back to your server and gain unauthorised access.

The cookie is the only way standard way to persist data across multiple sessions. So we must store information in this cookie that will provide us with the information in the future to re authenticate the user. Clearly is a security risk so the best we can do is store information that will only be useful for a certain period of time. It would be inadvisable to provide any with permanent access this way.

In the cookie we are going to store 2 pieces of information, a hash code representing the username, we’ll call this a identifier and a key (or token) that is valid only for certain period of time and is regenerated after one use. To create a hash of the username we could do something like this:

$salt = "pAulR2";
$identifier = md5( $salt . md5($username . $salt ) );

This should be stored in your database alongside your other user details. Remember to always to use some form of ‘salt‘ when creating hash’s. This is just a string that is known only to your application and kept secret. This insures that people cant use rainbow tables or take a few educated guesses to reverse the hash.

Next we must create a key (or token), this will be like our temporary password, valid for a certain period of time. We just need a long a string that isn’t predictable. One could be generated like this:

$key = md5(uniqid(rand(), true);

Again we would need to store this in the database and associate it to the correct user along with another field recording the time span for which it is valid.

Outline Example

Ok, you’ve authenticated your users username and password and they’ve indicated that they wish to remain logged in for one week.

// This examples assumes you have already connected to a MySQL database
$salt = "pAulR2";
/*
  You must create a identifier for every user and store it in the database prior implementing this.
  $identifier = md5( $salt . md5($username . $salt ) );
*/
// retrieve the $identifier from the database, I'm going to assume its in a variable called
// $user['identifier']
$identifier = $user['identifier'];
 
// create a random key
$key = md5(uniqid(rand(), true);
// calculate the time in 7 days ahead for expiry date
$timeout = time() + 60 * 60 * 24 * 7;
 
// Set the cookie with information
setcookie('authentication', "$identifier:$key", $timeout);
// now update the database with the new information
$result = mysql_query("UPDATE `user` SET key = '$key', timeout = '$timeout'
WHERE username = '$username'");
if (!$result) {
    die('Invalid query: ' . mysql_error());
}

Right that takes care of setting the cookie but know we must authorise it when its been detected when the user comes back to the site. On the users first visit you need to implement code like the following:

$salt = "pAulR2";
 
if (isset($_COOKIE['authentication'])) {
    // cookie is set, lets see if its vailed and log someone in
    $clean = array();
    $mysql = array();
 
    $now = time();
 
    list($identifier, $token) = explode(':', $_COOKIE['authentication']);
    if (ctype_alnum($identifier) && ctype_alnum($token)) {
	$clean['identifier'] = $identifier;
	$clean['key'] = $key;
 
	$mysql['identifier'] = mysql_real_escape_string($clean['identifier']);
 
	$result = mysql_query("SELECT * FROM user
                                       WHERE identifier = '{$mysql['identifier']}'");
	if (mysql_num_rows($result)) {
		$record = mysql_fetch_assoc($result);
		if ($clean['key'] != $record['key']) {
			// fail because the key doesn't match
		}elseif ($now > $record['timeout']){
			// fail because the cookie has expired
		}elseif ($clean['identifier'] != md5($salt.md5($record['userID'].$salt))){
			// fail because the identifiers does not match
		}else{
			/*
                          Success everything matches, now you can process
                          your login functions. The key must be re generated
                          for the next login. But don't increase the timeout to
                          ensure that the user must login in once the time
                          period has passed.
                       */
	        }
	}
	}else {
			/* failed because the information is not in the
                            correct format in the cookie */
        }
}

And remember once you have finished with the cookie delete it!

Sources: Essential PHP Security

All this requires is the latest version of jQuery (version 1.2.6 included in the demo download) and to past in the code provided. You also need a bit of knowledge of HTML and CSS to implement in your own web site.

Download (16kb Zip)

See the Demo

Code

$(document).ready(function(){
	// improve table usability
	$("table").find("tr").hover(function(){
		$(this).addClass("rowhighlight");
	},function(){
		$(this).removeClass("rowhighlight");
	});
 
	// Add class on single click
	$("table").find("tr").click( function() {
 
		if($(this).attr("class") == "rowhighlight_clicked rowhighlight"){
			$(this).removeClass("rowhighlight_clicked");
		}else{
			$(this).addClass("rowhighlight_clicked");
		}
	});
})

PHP

xampp - A cross platform web server including PHP and MySQL along with other tools such as Perl. Easily installs on a Windows machine (though it is cross platform), I recommend the lite version and install it on USB pen for portability.

phpMyAdmin - A web based tool for administrating MySQL databases, makes setting them up easy. The new version even includes a query builder. This is included with xampp just go to  http://localhost/phpmyadmin.

Zend Framework - A open source object oriented PHP5 framework. Contains easy to use classes to create a modern web app. Has support for many web services such as flickr and Google.

phpclasses - This a web site with a massive database of PHP classes. Always look her first as its probably already been done to a high standard.

Web browsers

FireFox 3.0 - An open source web broswer that supports loads of useful plugins for web developers. Not to mention generally how much better it is then any other.

Web Developer - One of the best FireFox plugins ever made. Contains a massive array of tools to help you develop your web site. From window resizing to editing CSS on the fly. Just try it!

IE Tab (Windows only) - A plugin for FireFox that allows you easily to switch your browser window to the Explorer rendering engine. As this is the most widely used browser you have to check your app works in it.

Multiple IE (Windows XP only) - A great little download that gives you old Internet Explorers (6.0, 5.5, 5, 4, 3) to try your site in. If you like me and upgraded to IE7, how do you check your site in IE6, many people still use it. Pity it doesn’t work on Vista.

Safari - Some people use this as a web browser, I guess now its available on windows you could check your site works in it

Text Editors

notepad++ - A free cross platform text editor with useful add-ons such as code highlighting for every language imaginable.

Other web tools

X Ray - Just add it to your bookmarks and you ready to go, click it, it loads then you can click any element on a page and it will show you the ‘CSS box model’. Very useful when your having pixel problems.

Browser Shots - Check you new web site in every browser known to man on any platform in one go. Warning: it doesn’t always return everything you ask for and it can take a while.

FireFtp - A FireFox plugin, a simple and realiable FTP program, can manage multiple accounts.

JavaScript & Ajax

Firebug - A plugin for FireFox, before this you would go mad debugging your JavaScript with nothing to go on. This provides full details on all errors and detailed information on Ajax requests. I also use it to be nosey on other web sites to see how they work.

JQuery - A fast lightweight JavaScript framework. Makes Ajax and HTML manlipation very easy for a modern 2.0 app.

Interface for jQuery - An additional set of jQuery plugins that provide a mass of additioal functionality for jQuery.

UI for jQuery - More plugins for jQuery that provide more for jQuery. I believe that interface and UI are being merged.

Visual jQuery - The doucmentation for jQuery can be a little rubbish, this web site lays it out in a simple format to effectivly use it.

The good news is that it is on a much better server and no doubt you will have noticed it is much faster and more reliable thanks to Centation. Also problems with signing in and some broken images have been solved.

Soon the third version of Jabroo will be available to try out. Hopefully it will be realised in the next month or so.

Being a massive fan of jQuery I thought there must a easy ‘drag and drop’ solution. I regular use the interface plugins that covers most of my needs. Though they provide a ’sortable’ plugin that works great for divs, it simply cannot sort tables due to the fact that certain CSS styles (like position static) cannot be applied to table rows.

After a long search I eventually came across a plugin solution called ‘Table Drag and Drop’. This simple plugin like all jQuery requires just a small amount of code to get it working.

$(document).ready(function() {
        $("#mytable").tableDnD();
});

To apply to a basic table like this:

<table id="mytable" border="1">
<tbody>
<tr id="product_1">
<td>My Product 1</td>
<td>£10.00</td>
<td>Active</td>
</tr>
<tr id="product_2">
<td>My Product 2</td>
<td>£2.99</td>
<td>Not active</td>
</tr>
<tr id="product_3">
<td>My Product 3</td>
<td>£23.49</td>
<td>Not active</td>
</tr>
<tr id="product_4">
<td>My Product 4</td>
<td>£19.99</td>
<td>Active</td>
</tr>
<tr id="product_5">
<td>My Product 5</td>
<td>£7.99</td>
<td>Not active</td>
</tr>
</tbody></table>

This will give you the following results like this (try dragging the rows):

I’ve had success with this with the most complicated tables with embeded forms, complex CSS styling and 100+ rows without problems. The plugin includes various settings to assign different classes when dragging to get a user friendly feel.

Now you probably wondering how you can now get this ordering information back to the web sever to save it in the database. Database storage is simple, use a attribute storing a int and simply update the table in the order which they are received. It has a call back function called serialize(). This is an array with containing the id’s of the table rows in the new order in the table. Just loop these values update the table.

This code uses simple table with some CSS styling and POST an array back to a web sever with the new order.

$(document).ready(function() {
	$('#mytable2').tableDnD({
                onDragClass: "dragrow",
		onDrop: function(table, row) {
                // get the serialized data for transport
		serial = $.tableDnD.serialize();
                       // use jQuery ajax function to send information
			$.ajax({
				type: "POST",
				url: "inc/product_controller_ajax.php",
				data: serial,
			});
		}
	});
});

#mytable2 {
border: 2px solid black;
border-collapse: collapse;
width: 50%;
}
.row1 {
background-color: #d8dff4;
}
.row2 {
background-color: #f7e8e9;
}
.dragrow {
background-color: #a70707;
color: #ffffff;
}

Now at the sever side all you have to do is loop through the value sent via ajax. I have used POST in this example. The name of the value is the ID of the table, so for example a PHP solution for this is as follows:

1
2
3
4
5

<?php
    foreach($_POST['mytable2'] as $line){
       echo $line; // product_2, product_2... etc in new order
    }
?>

Links

Table Drag and Drop Web site

Download Table Drag and Drop (Local copy version 0.4)

jQuery (required)

So why should I bother downloading (7 Mb) and installing FF3?

As you’ve all probably already read on the web site FF3 has major security, performance, improved password management, anti virus integration & a download manager just to name a few.

What interest me is features that ultimately change the way we surf the web and interact with our web browser. FF3 takes two classic old web browsing features; bookmarks (favourites) and history and gives them a new lease of life. If you like me i’ve really used the history because its always been pretty inaccessible to search. I use bookmarks but can never find anything in them and normally just re-search it on Google.

FF3 provides loads of new tools and features to sort, search and tag bookmarks. The best feature is what they call ‘Location bar & auto-complete’. This is a Google suggest inspired search tool that help you to quickly locate that missing bookmark or that pages you know you were once on.

As you can see its clear and indicates if its a current bookmark or not by the star on the right. It has a sort of Facebook search look about it that highlights the matched letter(s) in bold.

There are massive improvements that make upgrading more then worth you while. Firefox RC3.

The rear spark plugs on a Chrysler Voyager V6 (2000) at first seem very difficult to change. I have heard of various methods, from gaining access from underneath the car, to lifting the inlet manifold an inch or two.

I decided to take the easiest approach, which might not be the quickest if you have access to a vehicle lift, but is relatively straight forward.

As well as a new set of spark plugs and ignition leads you may need a new inlet manifold gasket as it could break when you remove the manifold

Below is a step by step photo guide on how to replace the spark plugs, which you might find helpful if tackling the job yourself.

Note position of wiper arms

Remove wiper arm spindle cap

Remove wiper arm spindle nut

Remove wiper arm and wiper top panel screws

Panel clips

Remove flat nuts from wiper top panel studs

Disconnect screen washer tubing

Disconnect screen washer tubing on jets

Remove wiper box top bracket nuts

Remove main wiper box bolts

Remove main wiper box bolts

Remove wiper motor multiplug

Disconnect wiper box drain pipes

Lift out wiper box assembly for easy access to inlet manifold

Remove 3 alternator bracket bolts and rotate plate upwards

Remove distributor bolts

Remove air box and vacuum pipes, breather pipes, multiplugs, throttle cables on throttle body

Remove exhaust recirculation pipe bolts (a bit tricky)

Remove inlet manifold support bracket bolt from engine block

Remove cable mounting bracket bolt on back of manifold(left side) (a bit tricky)

Remove cable mounting bracket bolt (right side) (also a bit tricky)

View of cable bracket/bolts on back of manifold(may assist in removal)

Remove earth wires on bulkhead stud

Remove inlet manifold nuts and bolts

Remove inlet manifold and cover engine inlet ports

Remove ignition leads and Remove and replace rear spark plugs

Remove ignition leads and Remove and replace front spark plugs

Check wiring and multiplug cable mounting bracket

Fit new inlet manifold gasket

Fit new air filter at this stage if necessary and rebuild Refit rear ignition leads; rebuild inlet manifold assembly, electrics and wiper box.

Parts used

Nike provide various ‘widgets’ that can be embedded into web pages which is convenient and fun. But i find them a little clunky in flash. You can see an example of one I added to this site here. So i decided to see what I could find on the net to access the run data.

It turns out the everyone’s run data is accessible via a URL linking to a XML document. All that is required is your user ID. Simply go to the following URL and insert your user ID at the end of the string.

http://nikeplus.nike.com/nikeplus/v1/services/widget/get_public_run_list.jsp?userID=<YOUR ID HERE>

All my data can be accessed here for example. Please take note about the XML document

• Distances are in kilometres (despite having all my settings in miles).
• Time locals appear to be correct.
• Time is measured in millseconds

Now your probably wondering how do i find out my user ID. Do this:

1. Sign into Nike Plus.
2. Click ‘My Runs’.
3. Click the ‘Share’ button on the top right of your runs.
4. Click ‘Add to a Web page’.
5. Click ‘Grab the Code’. Now it copied the code to your clip board.
6. Open up a text editor and paste it in (ctrl v). You should have something like this below. The ID is highlighted, just copy it out

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″ width=”198″ height=”145″ id=”Nike+ Runs” align=”middle”><param name=”allowScriptAccess” value=”sameDomain” /><param name=”wmode” value=”transparent” /><param name=”movie” value=”http://nikeplus.nike.com/nikeplus/v1/swf/scrapablewidget/rundetail.swf” /><param name=”quality” value=”high” /><param name=”bgcolor” value=”#ffffff” /><param name=”FlashVars” value=”type=last5Runs&userDefaultUnit=mi&screenName=paulrichards&dateFormat=DD/MM/YY

&id=1759895612&region=emea&language=en&locale=en_gb”/><embed src=”http://nikeplus.nike.com/nikeplus/v1/swf/scrapablewidget/rundetail.swf” quality=”high” wmode=”transparent” bgcolor=”#ffffff” width=”198″ height=”145″ name=”Nike+ Runs” align=”middle” allowScriptAccess=”sameDomain” FlashVars=”type=last5Runs&userDefaultUnit=mi&screenName=paulrichards&dateFormat=DD/MM/YY&id=1759895612&region=emea&language=en&locale=en_gb” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer”></embed></object>