View Full Version : Image and Table Attributes Help Needed

11-08-2004, 11:10 PM
The script I am working on right now already has a floating menu of sorts that rides along the left side of the page when the visitor scrolls up or down. What I am trying to do now is adjust a table that fills the rest of the page based on the browser window width. I want the table to fill up the rest of the space from left to right which I dont think I will have a problem doing. However, I have background images for the data cells and want to be able to adjust the width and height of them according to the width of the table (keeping them proportional). If I create a universal reference to the images, the table and its cells, is it possible to define the width and height of each based on the size of the browser window? I think the code would appear something like this. . .

var tableobj=document.all? document.all.storyboard : document.getElementById? document.getElementById("storyboard") : document.storyboard //storyboard being the name of the table in general

var sbtopobj=document.all? document.all.sbtopcell : document.getElementById? document.getElementById("sbtopcell") : document.sbtopcell //sbtopcell being the name of the uppermost cell of the table

var sbtopimg=document.all? document.all.pagetop : document.getElementById? document.getElementById("pagetop") : document.pagetop //pagetop being the name of the image in question

var window_width=document.all? document.body.clientWidth : window.innerWidth //gets browser window width

tableobj.width=parseInt(window_width)-260 //defines the width of an established table

sbtopobj.height=Math.floor(imageheight*((parseInt(window_width)-260)/imagewidth)) //defines the height of the cell in the cell tag as a proportional value of the table width versus the image width

sbtopimg.height=Math.floor(imageheight*((parseInt(window_width)-260)/imagewidth)) //same as above except defines the height of the image in the image tag

sbtopimg.width=Math.floor(imagewidth*((parsInt(window_width)-260)/imagewidth)) //defines the width of the image in the image tag

All of this assumes I have defined imagewidth and imageheight as set variables. I know this is only a sampling of the code, and I am pretty sure I have it right, however, I wanted to check with some of you that are more in the know about this stuff than I am before getting too deep into the coding. My real concern is whether or not it is even valid to do this sort of thing or if it will send the browser window into a fit. I am also concerned with the problems of resizing the window at some point, but am not quite ready for that. If anyone has any suggestions, I am wide open for them. This is the first really indepth script I have worked on and I would really like to get it running smoothly in a crossbrowser fashion.

11-09-2004, 12:13 AM
Ack! Nevermind this thread, it just dawned on me that I can assign width or height attributes to a background image so I will have to come up with another workaround for this problem. Unless anyone knows how to assign such attributes to a background image.

Thanks Anyways.

11-09-2004, 11:01 AM
ASFAIK, background image is not an object, it is an attribute's value (background if HTML or url(someimage) if backgroundImage CSS on-the-fly) thus it can not have other further attributes (other say: values can not have their values) as height or width.