...

View Full Version : Change Table Width onClick - Save State Question



theflyingminstr
09-24-2008, 11: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, 04: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, 06: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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum