SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Dynamically changing table width:

    Hi there,

    I created a script, that I need to get to work?

    Only thing it wont do is continue to loop, when I first load the page, it will increase by 1 but wont continue to increase by 1 until it has reached the set point.

    Can anyone help?

    Code:
    <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Jonathons Dry Cleaning</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="includes/css.asp" rel="stylesheet" type="text/css">
    <script>
    
    function settabwidth(width) {
    var t = document.getElementById("MainTab");
    	t.style.width = width;
    
    }
    function test() {
            x = 272;
    		y = 350;
    		z = 1;
            do
            {
                z = z + 1;
    			x = x + 1;
    			setTimeout('settabwidth(x)',z+00);
    			alert(x);
            }
            while (x == y);
        }
    
    </script>
    </head>
    <body bgcolor="#860000" onLoad="test()">
    <table class="table-100x100">
      <tr> 
        <td align="center"><table width="272" border="0" cellpadding="0" cellspacing="0" class="table-gen" id="MainTab">
            <tr> 
              <td bgcolor="#FFFFFF"><img src="images/crnrTL.gif" alt="imgXCornerTL" width="5" height="5"></td>
            </tr>
            <tr> 
              <td height="118" align="center" bgcolor="#FFFFFF"><img src="images/logo2.gif" alt="Welcome to Jonathons" width="252" height="98"></td>
            </tr>
            <tr> 
              <td align="right" valign="bottom" bgcolor="#FFFFFF"><img src="images/crnrBR.gif" alt="imgXCornerBR" width="5" height="5"></td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td height="25" align="right"><a href="http://www.eycdwebdesign.co.uk/cgi-bin/files-main/ref.asp?From=Jonathons%20Dry%20Cleaning"><img src="images/designedby.gif" alt="Designed and Managed by: EYCD Web Design" width="300" height="25" border="0" align="middle"></a><a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="images/htmlvalid.gif" alt="XHTML Valid" width="80" height="15" border="0" align="middle"></a><img src="images/shim.gif" alt="imgXshim" width="5" height="25" align="middle"><a href="http://jigsaw.w3.org/css-validator/validator?uri=referer"><img src="images/cssvalid.gif" alt="CSS Valid" width="80" height="15" border="0" align="middle"></a><img src="images/shim.gif" alt="imgXshim" width="5" height="25" align="middle"></td>
      </tr>
    </table>
    </body>
    </html>
    Thanks in advance


    Gavin

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried another way around it using one of the tips on this forum, but that crashes internet explorer;

    Code:
    function test() {
    	var x = 272; 
    	var y = 350;
    	var z = 1;
    	for ( x == y; x++; z++ )
    	{
    		setTimeout('settabwidth(x)',z+00);
    	}
    }
    Anyone ?

  3. #3
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     <script>
      function settabwidth(Mywidth) { 
      var t = document.getElementById("MainTab");
       t.style.width = Mywidth;
        } 
        
        
        var x = 272; 
        var y = 350;
        var z = 1; 
         
        function test() {
     
          var boucle=setInterval('settabwidth(x);z++;x++',z*100); 
          if ((x==y)){clearTimeout(boucle); }
          }
          
           </script>

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great!

    Now why doesn't it stop when it reaches 350px?

    Thanks

    Gav

  5. #5
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    problem is its never getting to the if (x == y) the setInterval code

    var boucle=setInterval('settabwidth(x);z++;x++',z*100);

    creates an infinite loop with no mechanism to stop it.....

    Let me tinker a bit ... Ill be back

  6. #6
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick fix that makes it stop at 350

    Code:
    <script type="text/javascript">
    <!--
      function settabwidth(Mywidth, boucle) { 
    	  if (Mywidth <= y)	{
    		var t = document.getElementById("MainTab");
    		t.style.width = Mywidth;
    		window.status = Mywidth;
    		}
    	else	{
    		clearTimeout(boucle); 
    		}
        } 
        
        
        var x = 272; 
        var y = 350;
        var z = 1; 
         
        function test() {
          var boucle=setInterval('settabwidth(x, '+boucle+');z++;x++',z*100); 
          }
          
    //-->
    </script>

    needs a little refining but it does work

    OH and I put the window.status in just to watch the timer ... you can pull that out if you want

  7. #7
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    by george he's done it.

    Your a star mate, configured it work on the height as well, pain the a*se javascript.

    Basically, im after creating a javascript run page, just for testing purposes at the moment, is there any way that I can get the final time used to complete the required
    effect? As i need to then start showing content after that time, and not before.

    New coding:

    Code:
      function settabwidth(Mywidth, width) { 
    	  if (Mywidth <= wy)	{
    		var t = document.getElementById("MainTab");
    		t.style.width = Mywidth;
    		window.status = Mywidth;
    		}
    	else	{
    		clearTimeout(width); 
    		}
        } 
      function settabheight(Myheight, height) { 
    	  if (Myheight <= hy)	{
    		var t = document.getElementById("MainTab");
    		t.style.height = Myheight;
    		window.status = Myheight;
    		}
    	else	{
    		clearTimeout(height); 
    		}
        } 
    	
    	var time = 1;
    	
        var wx = 272; 
        var wy = 350;
        var wz = 1;
    	
    	var hx = 118; 
        var hy = 196;
        var hz = 1;
    	
    	 
        function Extend() {
          var width=setInterval('settabwidth(wx, '+width+');wz++;wx++',wz*time); 
    	  var height=setInterval('settabheight(hx, '+height+');hz++;hx++',hz*time); 
          }

  8. #8
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nicely done there sir ........ nice to see someone up here asking for help AND wanting to learn! (too many people just want you to write them a free script )

    Got a couple of clients to talk to but Ill tinker more later today, unless someone beats me to it..

  9. #9
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol Im an asp programmer and I know a little about js, but not enough to call my self knowledgable.

    come across another problem, I don't know why but I decided to being adventurous and got stuck, tried adding another variable into the calls for both height and width so I can call it for any table, rather then maintab,

    new coding:

    Code:
      function settabwidth(Mywidth, id, width) { 
    	  if (Mywidth <= wy)	{
    		var t = document.getElementById(id);
    		t.style.width = Mywidth;
    		window.status = Mywidth;
    		}
    	else	{
    		clearTimeout(width); 
    		}
        } 
      function settabheight(Myheight, id, height) { 
    	  if (Myheight <= hy)	{
    		var t = document.getElementById(id);
    		t.style.height = Myheight;
    		window.status = Myheight;
    		}
    	else	{
    		clearTimeout(height); 
    		}
        } 
    	
    	var time = 1;
    	
        var wx = 272; 
        var wy = 350;
        var wz = 1;
    	
    	var hx = 118; 
        var hy = 196;
        var hz = 1;
    	
    	 
        function Extend(test) {
          var width=setInterval('settabwidth(wx, test, '+width+');wz++;wx++',wz*time); 
    	  var height=setInterval('settabheight(hx, test, '+height+');hz++;hx++',hz*time); 
          }
    All this work for nowt, its only for testing at the moment, but If I know I can do it, it could come useful somewhere down the line, this is for my client that requires the other site to be the same as the one I previously built him.. Pain in the buttocks..

    Gav

    p.s thanks again

  10. #10
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah Im a Java programmer but I have to use javascript for web apps now and then .... Im no expert by ANY stretch of the imagination but Im able to hack my way around.... most people gripe about how I write js but between always wanting to default to Java code and my inbred desire to ALWAYs keep it as simple as possible I manage to make it work .... thats all I really care about. Since we are doing more and more webapps in Java Im actually moving away from js for things like form checking and whatnot - doing most of it server side but we do still use it for dhtml stuff.... but I digress..

    I did this that accepts the id of the table as a parameter to the function so you can in fact use it on any table (or other things) ...... Im calling it in the onload but you could do it from just about anything...

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <script language="JavaScript">
    <!--
      function settabwidth(Mywidth, width, tableID) { 
    	  if (Mywidth <= wy)	{
    		document.getElementById(tableID).style.width = Mywidth;
    		}
    	else	{
    		clearTimeout(width); 
    		}
        } 
      function settabheight(Myheight, height, tableID) { 
    	  if (Myheight <= hy)	{
    		document.getElementById(tableID).style.height = Myheight;
    		}
    	else	{
    		clearTimeout(height); 
    		}
        } 
    	
    	var time = 1;
    	
        var wx = 272; 
        var wy = 350;
        var wz = 1;
    	
    	var hx = 118; 
        var hy = 196;
        var hz = 1;
    	
    	 
        function Extend(tabID) {
          var width=setInterval("settabwidth(wx, "+width+", '"+tabID+"');wz++;wx++",wz*time); 
    	  var height=setInterval("settabheight(hx, "+height+", '"+tabID+"');hz++;hx++",hz*time); 
          }//-->
    </script>
    </head>
    
    <body onload="Extend('secondTab');">
    <table id='MainTab' style='background-color: RED'>
    <tr>
    	<td></td>
    </tr>
    </table>
    
    <table id='secondTab' style='background-color: Blue'>
    <tr>
    	<td></td>
    </tr>
    </table>
    </body>
    </html>

    as far as timing it so you can write the content after the "stretch" is done ....... you'll almost HAVE to write the content to the table via javascript (maybe in a function thats called from your Extend function after the setIntervals are done) ...... I cant see anyother way to do it and thats gonna be tough with a table because you are going to have to know what cell of the table to write to (unless there's only one that is)

  11. #11
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually think I just found a NASTY bug in my code ....... it looks like my putting the clearTimeout(width); into the else block ISNT actually stopping the loop, its just not effecting the table anymore ..... I THINK I have to make that width and height variable global ...... little scope problem.... Im working on it!

  12. #12
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup - ---- the loop isnt terminating the Timeout properly.... its still running after it stops drawing the table......... hmmm, gotta think on this one!

  13. #13
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol something I wouldn't of noticed...

    See im totally oppisite to you, I prefere to make complex things, once you can do that, simple things are ... simple.

    stuff like GUI management, I only use javascript for, but validation etc is all done server side, easier and saves loading time.

    I even created a new method in ASP that saves server load and loading time.

    Gav

  14. #14
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I love building complex things ..... thats one of my specialities but I make those complex things out of simple modules ....... thats where simplicity can really pay off..

    Ill have to look at this later ..... I know whats wrong just not 100% sure how to fix it ........ maybe dinner will kick the old brain back into gear!


Bookmarks

Posting Permissions

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