Clever Geek Handbook

How to dynamically adjust html table based on browser window size

I want my site to display differently depending on the size of the web browser. Based on questions / answers from other users I got this to work with JavaScript onload

. But I cannot get it to work dynamically - that is, in real time when users customize the window. They must update to change the format of the web page.

Here is my current code:

<table class="index_table" border="0">
<tr>
    <!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
    <script>
    if (window.innerWidth > 900){
    document.write('<td rowspan="3" class="index_article"></td>');
    }
    </script>
    <!-- END OF JAVASCRIPT -->
    <td class="index_article_light">
        <h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
        <p class="index_instructions">INSERT PARAGRAPH HERE.</p>
        <p class="index_instructions">INSERT PARAGRAPH HERE. </p>
            <br />
            <form action="signup.html" style="vertical-align:top;">
                <table border="0"  style="margin-left:auto;margin-right:auto;width:400px;">
                    <tr>
                        <td>
                            <input type="text" name="search" class="firstname" value="&nbsp;First name">
                        </td>
                        <td>
                            <input type="text" name="search" class="lastname" value="&nbsp;Last name">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="text" name="search" class="email" value="&nbsp;Email">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div style="color:#979797;">Password:&nbsp;<br /><input type="password" name="password" class="password" value="Password"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="color:#979797;">Verify password:&nbsp;<input type="password" name="verify_passwords" class="password" value="Password"></div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <select>
                                 <option value="kent">INSERT LIST HERE</option>
                            </select>
                        </tr>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit" value="signup!" style="float:right;" id="result_submit">
                        </td>
                    </tr>
                </table>
            </form>
    </td>
</tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
    <script>
    if (window.innerWidth < 900){
    document.write('<tr><td class="index_article" style="height:200px;"></td></tr>');
    }
    </script>
    <!-- END OF JAVASCRIPT -->

Note. I know I shouldn't use tables, I should use div

s. But this is another problem ... I started building this site before I knew about it. I also know that this is pretty sloppy. So just bear with me. I try to just go with him until I can fix the situation.

+3


source to share


2 answers


You shouldn't use JavaScript to create responsive web designs. Use CSS instead using media queries. So you write your HTML:

<table class="index_table" border="0">
<tr>
    <!--This only will display on screen-width>900-->
    <td id="big_device_index" rowspan="3" class="index_article"></td>
    <td class="index_article_light">
        <h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
        <p class="index_instructions">INSERT PARAGRAPH HERE.</p>
        <p class="index_instructions">INSERT PARAGRAPH HERE. </p>
            <br />
            <form action="signup.html" style="vertical-align:top;">
                <table border="0"  style="margin-left:auto;margin-right:auto;width:400px;">
                    <tr>
                        <td>
                            <input type="text" name="search" class="firstname" value="&nbsp;First name">
                        </td>
                        <td>
                            <input type="text" name="search" class="lastname" value="&nbsp;Last name">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="text" name="search" class="email" value="&nbsp;Email">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div style="color:#979797;">Password:&nbsp;<br /><input type="password" name="password" class="password" value="Password"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="color:#979797;">Verify password:&nbsp;<input type="password" name="verify_passwords" class="password" value="Password"></div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <select>
                                 <option value="kent">INSERT LIST HERE</option>
                            </select>
                        </tr>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit" value="signup!" style="float:right;" id="result_submit">
                        </td>
                    </tr>
                </table>
            </form>
    </td>
</tr>
<!--This only will display on screen-width<900-->
<tr id="small_device_index"><td class="index_article" style="height:200px;"></td></tr>

Use the following CSS:



@media all and (max-width: 899px) {
    #big_device_index {
        display: none;
    }
@media all and (min-width: 900px) {
    #small_device_index {
        display: none;
    }

You can read more about media queries here   }

+4


source


Add it outside if (window.innerWidth > 900){..... 

$(window).resize(function(){
        if (window.innerWidth > 900){
                $('.index_article').remove();
                $('.index_table).find('tr:first').append('<td rowspan="3" class="index_article"></td>');
        }
}


hope this helps you make sure to include fisrt jquery.min.js

+1


source






More articles:


All Articles