Hi, I have got a form where I need users to click the images they want to delete from a MySQL DB on the server. They choose the images they want to delete by viewing thumbnails of the images. I would like to position checkboxes under each image, with upto 6 images in one row. How can I do this using javascript? Thanks for your help
You don't want to bloat your page using useless Javascript to do things HTML and CSS are perfectly capable of. I doubt the Javascripters think of this often, but not everyone uses or can use Javascript. You can turn it off. You can block scripts. People visit websites from their offices, the library, their schools. Those places with smart enough sysadmins have firewalls, which often block the Javascript, but don't trigger <noscript> so people get nothing. Javascript should take a working site and enhance it. Make it better, prettier, faster even, but never never ever be something that the page relies on (exception, applications built in Javascript for a particular client, where you can insist that they need Javascript to use their new product). Plain old webpages in the wild for the whole world to use don't fall under that category. I did give an example of how you could do this on Webmaster world with HTML and CSS. You would need larger sizes than what I posted (as my checkboxes are under 20px by 20px images) but it otherwise works. Now that I think of it, though, you could simply have div boxes, each of which contains the image, and then underneath the image, a label-checkbox grouping could sit beneath. This way, you can even have the word [DELETE] there, or a caption for the image. Each div is floated left until you have the 6. Either by setting the width of the overall container (or form itself), you can limit the stacked images to 6. Otherwise, you can just have six floated divs, make a new container, float 6 more... but if the images are all approx the same size the first idea is easier. If they're really crazy sizes (and by size I mean width), then maybe it's safer to have container divs with a limit of 6 inside...