#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0

    Using Javascript to resize a column width


    Hello,

    I need the help of an expert on this forum,

    how can some javascript coding be written such that when I position my mouse over any of the table header column dividers, that:

    1.) change the cursor to the w-resize; and

    2.) when I click and drag to the specified size that I want and the column would then be resized to the specified width

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
        <meta charset="utf-8">
    
    <style type="text/css">
    #table-css-border-1 {
            width: 100%;
            border-style: outset; 
            border-width: 1px; 
            border-spacing: 2px; 
    } 
    
    #table-css-border-1 td, #table-css-border-1 th { 
            border-style: inset; 
            border-width: 1px; 
    }
    </style>
    
    </head>
    
    <body>
    
    <table id="table-css-border-1">
        <tr>
            <th>header1</th>
            <th>header2</th>
            <th>header3</th>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    
    </body>
    
    </html>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    The easiest way to do this; is to use the jQuery UI .resizable() API (see example below).

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
        <meta charset="utf-8">
    
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    
    <style>
    
    #table-css-border-1 {
    	width:100%;
            border-style: outset; 
            border-width: 1px; 
            border-spacing: 2px; 
    } 
    
    #table-css-border-1 td, #table-css-border-1 th { 
            border-style: inset; 
            border-width: 1px;
    }
    
    </style>
    
      <script>
      $(function() {
        $( "#table-css-border-1 tr th" ).resizable({
          handles: 'e'
        });
      });
      </script>
    
    </head>
    
    <body>
     
    <table id="table-css-border-1" class="ui-widget-content">
        <tr>
            <th>header1</th>
            <th>header2</th>
            <th>header3</th>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    
    </body>
    
    </html>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0
    Wow!

    Works great!

    Thanks so much

    Cheers,

    J

IMN logo majestic logo threadwatch logo seochat tools logo