Force table height NOT to stretch to 100% 1

[HowardMarks]

I know most people want to know how to force a table to fill 100% height, but my problem is the reverse.

Take a look at this page:

http://www.npfx.com/c3/branches.asp

This is my rather elaborate attempt at making a content management system where the administrator can set the location of a particular branch by clicking on a map of the UK. There is a table with about 1000 cells overlaying the image which records the location to the database.

The trouble is, as you can see, the table is stretching to fill the screen vertically which means that the dots for the locations are all screwed up. I've put in fixed heights for all cells, rows and the table itself to no avail - it always stretches out of shape.

Could anyone suggest how I can fix this, or even suggest a better way of allowing someone to pinpoint a location on a map without using all these cells?

Many thanks

Nick

Nick (Webmaster)

info@npfx.com

http://www.npfx.com

http://www.artswales.org

 

[Tarwn]

The simplest method I can think of would be to use the onClick event on the image to pinpoint exactly where they clicked via the offsetX and offsetY properties. That way you don't have to mess with the table. I'd show you an example but since your map is already broken down it would be difficult to put back together

It's not going to be 100% straight forward since event handling occurs differantly in IE and everything-else(TM) but you should be able to use event properties to pinpoint the click based on the map. I think you may need to use some CSS absolute positioning on the map in order to position the dots accurately. If you havea div with both the image and the dot/links in it with all of them positioned absolutely it will be much easier to position the dots relative to the map.

-T

 

[HowardMarks]

thanks for your advice. I will investigate using javascript as you have suggested, and let you know how i get on!

cheers

Nick

Nick (Webmaster)

info@npfx.com

http://www.npfx.com

http://www.artswales.org

 

[DreXor]

you can also use <input type="image" src="/images/yourpicture"> as well, it'll act as a submit button but it will be graphical and will transmit it's x and y coordinates as well... that's if you'd like to do the calculations server side.

DreX
aKa - Robert
if all else fails, light it on fire and do the happy dance!

 

[HowardMarks]

Wow Drexor that could just be the ideal solution! I had completely forgotten about that functionality.

I will give it a try

Many thanks

Nick (Webmaster)

info@npfx.com

http://www.npfx.com

http://www.artswales.org

 

[DreXor]

problem with the input method on this is the whole button would act a submit, including the border, the locations would have to be in the image and not something you could float over it. you might need some CSS / JS to disable the mouse except over certain areas, basically an inverse image map... which would also be wise here, since you're using URL + querystring.

as for the table stretchie problem, if it's some 1000 cells like 20 square across and 50 sqaure tall, use width & height values on all the TD's and leave out a height/width value on the table tag itself, let it swell to accomidate the size of the cells.

basically.. think of it as making a calendar, not an image map. then you can click on a certain box for a certain result.

DreX
aKa - Robert
if all else fails, light it on fire and do the happy dance!

 

[HowardMarks]

Hi guys

the Image thing worked perfectly. Here are the results if you are interested

http://www.npfx.com/c3/branchselect2.asp?branchid=1

pretty cool huh?

thanks alot for you help



Nick (Webmaster)

info@npfx.com

http://www.npfx.com

http://www.artswales.org

 

[DreXor]

i will note the only unfortunate part of the current situation is for those that dont know the locations there's no visual indicators like there used to be, perhaps you could alter the source image with a few dots on it to make up for that.

DreX
aKa - Robert
if all else fails, light it on fire and do the happy dance!

 

[ignoreme]

I think the suggestion of coordinates is best.

Modify the image with all of the city locations and their icons. Then, take the XY coordinates from the OnClick event and compare them to a known coordinate for results.

And, to make it easier to the user to not have to put the mouse exactly over the icon, use a little math evaluation to get the area of XY coordinates.

Good luck

 

[HowardMarks]

Hi guys

thanks for your comments but i think you may have missed the point a little. The problem is I needed to allow administration staff to add new locations to the map themselves. The locations are then displayed on another screen for the customers to see. This means I can't actually modify the images with the locations and their icons or they would be impossible to change by admin staff..

Drexor - the little 'C' icon denotes the currently selected position of the branch. Perhaps it will be easier explained by looking at

http://www.npfx.com/c3/branches.asp

which is the actual branch map in action with all the branches displayed. Anyhow, thanks for your advice on this problem, i think that the current solution will do!

Nick (Webmaster)

info@npfx.com

http://www.npfx.com

http://www.artswales.org