greasonwolfe
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.
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.