Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Table Width onClick - Save State Question

    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.



    Code:
    <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>

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    If you want the width to only change between those two values you can use some thing like this
    Code:
    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.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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>
    Last edited by theflyingminstr; 09-25-2008 at 07:09 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •