Results 1 to 4 of 4

Thread: Cannot get jQuery Resizable API to work on html table

  1. #1
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Cannot get jQuery Resizable API to work on html table

    Hello,

    I need the help of an expert here on this forum:

    Idon't get what is wrong here. I can't seem to get the handle 'e' or anything for that matter to show up to resize my table headers.

    I am guessing that the jQuery resizable is not compatible with my table because of the css? that can't be right. What am I missing here?

    Here is my html code:

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    
    <style type="text/css">
    #data_container {
            height: 175px;
            position: relative;
    
            border: 1px solid #808080;
    
            scrollbar-base-color: #DFDFDF;
            scrollbar-arrow-color: #235A81;
            overflow-y: scroll;
            overflow-x: scroll;
            margin-top: 5px;
    
    }
    
    #data {
            color: rgb(11,63,113);
            font-family: Arial;
            font-size: 9pt;
            border: 0px;
            width: 100%;
            table-layout: fixed;
    }
    
    #data th, #data td {
            border-bottom: 1px solid #808080;
            border-right: 1px solid #808080;
            padding: 3px;
            width: 150px;
    }
    
    #data th {
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
            height: 18px;
            border-bottom: 1px solid #808080;
            border-top: 0px;
    }
    #data thead tr {
            top: expression(this.offsetParent.scrollTop);
            position: relative;
    }
    #data tr.normal td {
        color: #235A81;
        background-color: white;
    }
    #data tr.highlighted td {
        color: #FFFFFF;
        background-color: #235A81;
    }
    </style>
    
    
    
    </head>
    
    <body>
    <div id="data_container">
    <table id="data" cellspacing="0" cellpadding="0">
                        <thead>
                              <tr>
                                    <th>HEADER 1</th>
                                    <th>HEADER 2</th>
                                    <th>HEADER 3</th>
                                    <th>HEADER 4</th>
                                    <th>HEADER 5</th>
                                    <th>HEADER 6</th>
                                    <th>HEADER 7</th>
                                    <th>HEADER 8</th>
                              <tr>
                        </thead>
                        <tbody>
                              <tr>
                                    <td>content 1</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 2</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 3</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 4</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 5</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 6</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 7</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 8</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 9</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 10</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 11</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 12</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 13</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 14</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                              <tr>
                                    <td>content 15</td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                                    <td>content </td>
                              <tr>
                        </tbody>
                    </table>
                      <script>
      $(function() {
        $( "#data tr th" ).resizable({
          handles: 'e'
        });  
      });
      </script>
        </div>
    </body>
    
    </html>

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    I am not familiar with jQuery Resizable - can you post a link to it and your live page please.

    I am guessing that the jQuery resizable is not compatible with my table because of the css?
    Have you tried taking out all CSS to see if that makes a difference?

    Or what about trying without the 'tr th';
    Code:
      $(function() {
        $( "#data" ).resizable({
          handles: 'e'
        });  
      });
    Does that do anything or hint at an anticipated behaviour? Or, take our the handles setting - I'm assuming that there is a default script value that its overriding, so omit it for now and let the script set the defaults while you test.

    If a demo is provided on the source website, try downloading that so you have something that you *know* works, and then add in extra settings/helpers one at a time until it's behaving as expect. Once you get that far, add back chunks of CSS and logical blocks of markup until you've recreated your page - keep testing between additions and then if something is messing with the scripts, you can pinpoint it more easily.
    Last edited by Beverleyh; 07-24-2013 at 02:33 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Hi Bev,

    I did like you said.

    Still no result:

    http://jsfiddle.net/6434t/1/

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    The jsfiddle seems to be missing any JavaScript library or external resources.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Replies: 1
    Last Post: 06-28-2013, 04:08 AM
  2. Resolved jquery countdown won't work within <div>
    By crs95 in forum CSS
    Replies: 2
    Last Post: 07-16-2012, 08:25 PM
  3. applying jquery accordion to table and form
    By mickkmg in forum JavaScript
    Replies: 0
    Last Post: 07-12-2012, 11:59 AM
  4. jquery rotate don't work
    By davelf in forum JavaScript
    Replies: 4
    Last Post: 02-10-2012, 05:20 AM
  5. Resolved jQuery slideViewer will not work
    By ltd33 in forum JavaScript
    Replies: 3
    Last Post: 11-05-2010, 01:13 AM

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
  •