www.webdeveloper.com
Results 1 to 5 of 5

Thread: manipulating html code with javascript

  1. #1
    Join Date
    Dec 2011
    Posts
    2

    manipulating html code with javascript

    Hello -
    I have one javascript issue and I hope someone can help me. I need to add javascript code to the code below so that the table table1 (red table) takes whole area of the cell cell1. Also Table table1 should resize itself to take all space of cell1 when we resize browser window.
    Here is the html code:

    Collapse | Copy Code

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }
    </style>
    </head>
    <body>
    <table height=100% width=100% border=1 cellpadding=0 cellspacing=0>
    <tr><td colspan=2 height=40px></td></tr>
    <tr><td width=75% id="cell1">
    <table style="height:auto" width=100% bgcolor=red id="table1"><tr><td></td></tr></table>
    </td>
    <td></td>
    </tr>
    </table>
    </body>
    </html>



    Thanks in advance

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    I'm not sure I understand the problem.

    There needs to be something in the table to have it expand the area you want.

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>HTML test</title>
    <!-- From: http://www.webdeveloper.com/forum/showthread.php?t=254952 -->
    
    <style type="text/css">
    html, body {
     height: 100%;
     margin: 0;
     padding: 0;
    }
    </style>
    </head>
    <body>
    <table height=100% width=100% border="1" cellpadding=0 cellspacing=0>
     <tr>
      <th colspan=2 height=40px><h1>Heading</h1></th>
     </tr>
     <tr>
      <td width=75% id="cell1">
       <table style="height:auto" width=100% bgcolor=red id="table1">
        <tr>
         <td><img src="http://www.nova.edu/hpd/otm/pics/4fun/nowhine.jpg" width="100%"</td>
        </tr>
       </table>
      </td>
      <th><h2>Right Side</h2></th>
     </tr>
    </table>
    </body>
    </html>
    And I don't see any javascript in there, so you probably have the wrong forum as well.

  3. #3
    Join Date
    Dec 2011
    Posts
    2
    Thanks for your answer .
    Well, I need to do those things using javascript, that's why I posted here.
    And I am not really good in JS so every help is appreciated.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Question More information needed...

    Quote Originally Posted by arnaudov View Post
    Thanks for your answer .
    Well, I need to do those things using javascript, that's why I posted here.
    And I am not really good in JS so every help is appreciated.
    What things?
    You'll have to be more specific for us to help.

  5. #5
    Join Date
    Mar 2011
    Posts
    65
    Quote Originally Posted by arnaudov View Post
    Hello -
    I have one javascript issue and I hope someone can help me. I need to add javascript code to the code below so that the table table1 (red table) takes whole area of the cell cell1. Also Table table1 should resize itself to take all space of cell1 when we resize browser window.
    It appears you are using tables, and nested tables at that, for page layout.

    That is a huge NO-NO.

    For one thing, your code will end up bloated. Just look at how much code you have already in the <body> and you still haven't displayed any content in it.

    You should be using semantically correct elements for markup and css for styling. You shouldn't need javascript at all for what you want to do. Plus what's your plan B for browsers with javascript disabled in them?

    Using tables for layout will result in cumbersome, bloated and difficult to maintain code. Life is so much easier with semantically correct elements styled with css.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles