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.
Code:
<!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.
Change Table Width onClick - Save State Question
Reply With Quote
Bookmarks