Posts Tagged ‘Web development’

Summary: This article tells you how to implement drag and drop for HTML tables in Javascript. You can download the source here and play with the demo here.

Updated: now copes with multiple tables on the same page, non-drag and non-drop rows (such as headers) and embedding form elements. (more…)

This is a little tip that I discovered a while ago but which I’m always forgetting, so I thought I’d post it here where I woudn’t lose it! Sometimes you’ll have a link on a web page which actually does something to a database, deletes the current thing for example. In those circumstances you want to have some sort of “Are you sure?” confirmation.

Javascript has a confirm dialog that you can use, but because you can use the return value of a method to determine event bubbling, you can use this really neatly to give optional links as follows:

onclick="javascript:return confirm('Are you sure you want to go to our home page ?')"
>Click here to go to home page

And of course you can try it yourself: Click here to go to home page.

If you click OK, then the confirm returns true and the link is followed. If you click Cancel, then confirm returns false and the event isn’t bubbled up to the href handler and so the link isn’t followed and you stay on the same page.

A friend recently pointed me to a useful development toolbar for Firefox. It’s similar to the development toolbar here but does even more stuff.

You can find the toolbar at http://chrispederick.com/work/webdeveloper/.

Definitely worth having if you’re working with Firefox (in fact I often use Firefox for debugging Javascript and the like because it tends to be much more helpful than IE!).

I’ve recently been trying to make some of my scripts work with Firefox 1.5 (from IE) and I was looking for some debugging help to set me on the right track. I found this tool which seems to work very well: http://getahead.ltd.uk/ajax/venkman.

It’s an updated version of Venkman fixed to work with Firefox 1.5.

One of the things it helped me find is that whereas in IE if I ask a table cell (TD) for the nextSibling and get the next TD, in Firefox you always seem to get a text node first and then the next TD. Similarly for getting the next and previous rows.

If you are doing web development for Internet Explorer, then have a look at this toolbar from Microsoft.

It provides all sorts of useful features: it’ll validate the HTML, show the sizes of images, where tables and cells and DIVs are, allow you to see the DOM and all sorts of other useful bits and pieces.

(Thanks to PCPro magazine for that tip! www.pcpro.co.uk)