Change Table Width onClick - Save State Question

theflyingminstr

09-24-2008, 10:27 PM

Hi am using a button to change the size of a table and I had a few questions about it.

I can change the table width, but then I'm not sure how to chnage it back again to the original state. Is that done with return true/false?

Also, this script is on a page where there is a form, so it in a constant state of refresh, can I use the onload function to keep it's state on reload? I have other reload functions at the bottom of the page too (CngColor & drg), so I'm not sure how to get those to play nice together.

Below is my script:

Thanks.

<html>
<head>
<script>
function switchheight()
{
document.getElementById('width').width = '200px';
}
</script>
</head>

<body>
<table width="500" id="width">
<tr>
<td bgcolor="green">demo table</td>
</tr>
</table>

<input type="button" value="width" onclick="switchheight()">

<script type="text/javascript">

window.onload=
function 1() {
var sels = document.getElementsByTagName('select');
CngColor(sels[0]);
CngColor2(sels[1]);
CngColor3(sels[2]);
CngColor4(sels[3]);
}

function 2() {
var wid = document.getElementsById('width');
switchheight(wid[0]);

var drg = document.getElementsByTagName('div');
if(readCookie('wd')) {
drg[0].style.visibility=readCookie('wd');
}
};

</script>

</body>
</html>

ninnypants

09-25-2008, 03:44 AM

If you want the width to only change between those two values you can use some thing like this

function switchheight()
{
curr = document.getElementById('width').width;
curr = (curr== '200px'?'500px':'200px');
}

also if you are already using a cookie you could just add the current table width to it so that it is passed when the page reloads, and use an if statement to determine the width by whether or not the value in the cookie is set.

theflyingminstr

09-25-2008, 05:43 AM

Thanks NP, great code! So I should use cookies then to keep it goin' on refresh? I'll give it a shot but I'm horrible with that..

EDIT-->

I tried this and it don't work:

<html>
<head>
<script type="text/javascript">

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function switchheight()
{
var orig='500';
var el=document.getElementById('width');
el.width=(el.width==='500')?'200':'500';
}
</script>
</head>

<body>
<table id="width">
<tr>
<td bgcolor="green">demo table</td>
</tr>
</table>

<input type="button" value="width" onclick="switchheight();createCookie('ln','width',1);">

<script type="text/javascript">

window.onload=function () {
var lngt = document.getElementsById('width');
if(readCookie('ln')) {
lngt[0].el.width=readCookie('ln');
}
};

</script>

</body>
</html>