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
    2,025
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    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 03: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
    2,025
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

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