Essential Web Developer Toolbar

I have recently started using the Web Developer extension for firefox by Chris Pederick and I wonder how I ever managed without it.

It adds a toolbar to Firefox with a huge array of tools for analysing, viewing, editing and validating whatever webpage you are viewing. I had other tools and bookmarklets that accomplished the same tasks, but having them all (and more) in one place is a godsend.

One of the most useful tools is the CSS editing window which allows you to edit stylesheets and see the results onscreen immediately - very useful for editing dynamic pages.

You can also disable stylesheets and javascript, view info about images and links, outline various elements, use a ruler to measure sizes on screen, validate the document… you name it, it does it.

So, it’s great for development, but also for seeing how other sites achieve their design and layout.

I highly recomend it! http://chrispederick.com/work/webdeveloper/

Styling Form Submit Buttons

The default form submit button looks ugly on almost any website. Wouldn’t it be nice to be able to style it to fit in with your design?

Even better, how about adding a hover effect to make it clear that clicking on it does something?

After a bit of searching, I’ve found the solution at www.digital-web.com - using the <button> tag. With the addition of some javascript to cope with IE’s lack of support for the :hover pseudo class, you can even have hover effects.

Check out the excellent virtual Christmas card example at digital-web.com to see how far you can go with this.

Javascript Back Link

I’ve recently had need to add on-page links to replicate the ‘back’ button in the browser.

Normally, I avoid using javascript for navigation in this way, but it seems like the best solution in this case. However, I couldn’t find a version of the code which worked consistently accross browsers.

Finally, result number 20 or so in Google (amongst many other pages with others asking about the same problem) turned up this page: www.irt.org/script/911.htm which seems to work well (tested in FF 1.5 and IE 6).

I’ve added the following function to the javascript file:

// go back to previous page function
function goBack() {
history.back();
}

And use the following code in the HTML:

<a href="#" onClick="this.href='javascript:goBack()'" title="Go back to the previous page">&laquo; Back to previous page</a>

Previously, I had tried using onclick="javascript:history.go(-1);" and onclick="history.back();", and a number of variations with the javascript in the href attribute or onclick event or in an external function, but none of them gave consistent results - most didn’t work at all.

If anyone understands enough about javascript to tell me why onClick="this.href='javascript:goBack()'" works, please leave a comment!