PDA

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



theflyingminstrel
09-24-2008, 09:26 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>

rangana
09-25-2008, 01:49 AM
function switchheight()
{
var orig='500';
var el=document.getElementById('width');
el.width=(el.width==='500')?'200':'500';
}


...but note that width is a deprecated attribute (http://www.codehelp.co.uk/html/deprecated.html), you should changed to CSS instead.

Your function will not cause conflicts since it is called on the onclick event of the "width" button, nothing to worry.

...and also note that function names should not start with numbers.

Hope that helps.

codeexploiter
09-25-2008, 04:11 AM
Here is a demo page in which you can see that the way using which you can change the width of a table element by applying different CSS classes on it.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.default{width:300px;border:1px solid #000}

.small{width:100px;border:1px solid #BF5353}

.medium{width:500px;border:1px solid #5366BF}

.large{width:100%;border:1px solid #3B8F2C}
</style>
</head>
<body>
<div id="info">Applied CSS class default on the table element</div><br/>
<table id="t1" class="default">
<tr>
<td>
Praesent a nisi sed dui sollicitudin ornare. Cras nisl mauris, fermentum a, pellentesque nec, condimentum non, justo! Mauris dictum tristique massa. Donec erat massa, aliquam vel, blandit eget, volutpat in, nisl! Morbi purus pede, ullamcorper ac, sagittis ut; cursus eu, nunc! Praesent lacus orci, sagittis eu, ultricies eget, tempor ac, lorem. Quisque vitae nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean suscipit arcu ut orci. Morbi at magna nec eros ornare volutpat!
</td>
</tr>
</table>
<br/>
<form name="f1">
<input type="button" value="small" name="small" />
<input type="button" value="medium" name="medium" />
<input type="button" value="large" name="large" />
<input type="button" value="default mode" name="default" />
</form>
<script type="text/javascript">
document.forms['f1'].elements['small'].onclick = function(){
document.getElementById('info').innerHTML = "Applied CSS class small on the table element";
document.getElementById('t1').className = 'small';
}
document.forms['f1'].elements['medium'].onclick = function(){
document.getElementById('info').innerHTML = "Applied CSS class medium on the table element";
document.getElementById('t1').className = 'medium';
}
document.forms['f1'].elements['large'].onclick = function(){
document.getElementById('info').innerHTML = "Applied CSS class large on the table element";
document.getElementById('t1').className = 'large';
}
document.forms['f1'].elements['default'].onclick = function(){
document.getElementById('info').innerHTML = "Applied CSS class default on the table element";
document.getElementById('t1').className = 'default';
}
</script>
</body>
</html>


Copy the mentioned code, save, browse it and use the buttons provided to get the demo.

Hope this helps.

theflyingminstrel
09-25-2008, 04:42 AM
Wow, thank you both very much Rangana and Codeexploiter! That's exactly what I needed to do!

What method do I use to keep the chosen sizes on page refresh then?

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>

codeexploiter
09-25-2008, 07:32 AM
Here is the changed demo page in which the user can maintain the state of the table between page refreshes. I've done this using Cookies, which has certain issues since cookies are kept in client machine the client can remove them at any point of time. The user may disable accepting cookies.

But under normal circumstances the code will work without any issues.

I have highlighted all the changes I've made in the code furnished below.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.default {width: 300px;border: 1px solid #000}

.small {width: 100px;border: 1px solid #BF5353}

.medium {width: 500px;border: 1px solid #5366BF}

.large {width: 100%;border: 1px solid #3B8F2C}
</style>
</head>
<body>
<div id="info">
Applied CSS class default on the table element
</div>
<br/>
<table id="t1" class="default">
<tr>
<td>
Praesent a nisi sed dui sollicitudin ornare. Cras nisl mauris, fermentum a, pellentesque nec, condimentum non, justo! Mauris dictum tristique massa. Donec erat massa, aliquam vel, blandit eget, volutpat in, nisl! Morbi purus pede, ullamcorper ac, sagittis ut; cursus eu, nunc! Praesent lacus orci, sagittis eu, ultricies eget, tempor ac, lorem. Quisque vitae nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean suscipit arcu ut orci. Morbi at magna nec eros ornare volutpat!
</td>
</tr>
</table>
<br/>
<form name="f1">
<input type="button" value="small" name="small" /><input type="button" value="medium" name="medium" /><input type="button" value="large" name="large" /><input type="button" value="default mode" name="default" />
</form>
<script type="text/javascript">
var Cookie = {
setCookie: function(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=/";
},
getCookie: function(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;
}
};
document.forms['f1'].elements['small'].onclick = function(){
document.getElementById('info').innerHTML = "Applied CSS class small on the table element";
document.getElementById('t1').className = 'small';
Cookie.setCookie('tableClass','small');
}
document.forms['f1'].elements['medium'].onclick = function(){
document.getElementById('info').innerHTML = "Applied CSS class medium on the table element";
document.getElementById('t1').className = 'medium';
Cookie.setCookie('tableClass','medium');
}
document.forms['f1'].elements['large'].onclick = function(){
document.getElementById('info').innerHTML = "Applied CSS class large on the table element";
document.getElementById('t1').className = 'large';
Cookie.setCookie('tableClass','large');
}
document.forms['f1'].elements['default'].onclick = function(){
document.getElementById('info').innerHTML = "Applied CSS class default on the table element";
document.getElementById('t1').className = 'default';
Cookie.setCookie('tableClass','default');
}
window.onload = function(){
var cls = Cookie.getCookie('tableClass')
if(cls){
document.getElementById('t1').className = cls;
switch(cls){
case "small":
{
document.getElementById('info').innerHTML = "Applied CSS class small on the table element";
break;
}
case "medium":
{
document.getElementById('info').innerHTML = "Applied CSS class medium on the table element";
break;
}
case "large":
{
document.getElementById('info').innerHTML = "Applied CSS class large on the table element";
break;
}
default:
{
document.getElementById('info').innerHTML = "Applied CSS class default on the table element";
break;
}
}
}
};
</script>
</body>
</html>


Plz let me know if there is anything you want to clear about the above code.

Hope this helps.

theflyingminstrel
09-25-2008, 01:46 PM
Hey thanks again, nifty code.. yeah I didn't get why you had a <div> variable for info, it doesn't seem like that area has any properties, yet you're calling it into the cookie function.

I tried replicating yours and it doesn't work quite right, syntax prob? I'm an idiot?..

Thanks again





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>

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

</script>

</head>

<body>

<div id="info">
Applied CSS class default on the table element
</div>


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

<form name="f1">
<input type="button" value="width" onclick="switchheight()">
</form>

<script type="text/javascript">
var Cookie = {
setCookie: function(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=/";
},
getCookie: function(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;
}
};

document.forms['f1'].elements['orig'].onclick = function(){
document.getElementById('t1').className = 'orig';
Cookie.setCookie('tableClass','orig');
}
document.forms['f1'].elements['el'].onclick = function(){
document.getElementById('t1').className = 'el';
Cookie.setCookie('tableClass','el');
}

window.onload = function(){
var cls = Cookie.getCookie('tableClass')
if(cls){
document.getElementById('width').className = cls;
switch(cls){
case "orig":
{
document.getElementById('info').innerHTML = "Applied CSS class small on the table element";
break;
}
case "el":
{
document.getElementById('info').innerHTML = "Applied CSS class medium on the table element";
break;
}

}
}
};
</script>

</body>
</html>

theflyingminstrel
09-25-2008, 06:51 PM
I rewrote the function differently. Would this help make it easier to apply cookies (I noticed you used cases)?



<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
intSize = 2;
function swapSize() {
switch (intSize) {
case 1:
width1.width = "500"
intSize = 2
return(false);
case 2:
width1.width = "200"
intSize = 1
return(false);
}
}
</SCRIPT>
</HEAD>
<BODY>

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

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


</BODY>
</HTML>

theflyingminstrel
09-25-2008, 08:11 PM
Ok I still can't get it and I'm losing my mind slowly over this