Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts

    Cannot Get jQuery jQuery UI .resizable() API to work

    Hello,

    I can't seem to get the jQuery UI .resizable() API to work properly. By default, everything looks fine. When the API is applied to the table, it should allow the th columns be resized at the users will after the table is dyanically written.

    Any ideas?

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    <!-- LOAD JQUERY LIBRARY: -->  
      <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 type="text/css">
    #mstrWrapper {
    		position: relative;
    		height: 200px;
    		width: 800px;
    		border: 1px solid #808080;
    		
    		overflow-y: scroll;
    		overflow-x: scroll;
    		scrollbar-base-color: #DFDFDF;
    		scrollbar-arrow-color: #235A81;
    
    }
    
    #mstrTable {
            width: 800px;
            color: #235A81;
            font-family: Arial;
            font-size: 9pt;
            border: 0px;
    }
    
    #mstrTable th, #mstrTable td {
    	    border-bottom: 1px solid #808080;
    	    border-right: 1px solid #808080;
    	    padding: 3px;
    }
    
    #mstrTable th {
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
            width: 110px;
        	height: 18px;
        	border-bottom: 1px solid #808080;
        	border-top: 0px;
    }
    
    #mstrTable thead tr {
    		position: absolute;
    		top: expression(this.offsetParent.scrollTop);
    }
    	
    
    #mstrTable tbody tr:first-child td {
    		padding: 28px 3px 3px 3px;
    }
    #mstrTable tr.normal td {
        color: #235A81;
        background-color: white;
    }
    #mstrTable tr.highlighted td {
        color: #FFFFFF;
        background-color: #235A81;
    }
    
    </style>
    
    
    <script type="text/javascript">
    var table
    var tbody
    var ishigh
    
    function writeit() {
    
    var html = '<table id="mstrTable" cellspacing="0" cellpadding="0" class="ui-widget-content">\n'
    	html +='<thead>\n'
    	html +='<tr> \n'
    	html +='<th>File Number<\/th>\n'
    	html +='<th>Date1<\/th>\n'
    	html +='<th>Date2<\/th>\n'
    	html +='<th>Status<\/th>\n'
    	html +='<th>Num.<\/th>\n'
    	html +='<\/tr>\n'
    	html +='<\/thead>\n'
    	html +='<tbody>\n'
    	html +='<tr> \n'
    	html +='<td>KABC<\/td>\n'
    	html +='<td>09\/12\/2002<\/td>\n'
    	html +='<td>09\/12\/2002<\/td>\n'
    	html +='<td>Submitted<\/td>\n'
    	html +='<td>0<\/td>\n'
    	html +='<\/tr>\n'
    	html +='<tr> \n'
    	html +='<td>KCBS<\/td>\n'
    	html +='<td>09\/11\/2002<\/td>\n'
    	html +='<td>09\/11\/2002<\/td>\n'
    	html +='<td>Lockdown<\/td>\n'
    	html +='<td>2<\/td>\n'
    	html +='<\/tr>\n'
    	html +='<tr>\n'
    	html +='<td>WFLA<\/td>\n'
    	html +='<td>09\/11\/2002<\/td>\n'
    	html +='<td>09\/11\/2002<\/td>\n'
    	html +='<td>Submitted<\/td>\n'
    	html +='<td>1<\/td>\n'
    	html +='<\/tr>\n'
    	html +='<tr> \n'
    	html +='<td>WPPP<\/td>\n'
    	html +='<td>03\/19\/2003<\/td>\n'
    	html +='<td>03\/19\/2003<\/td>\n'
    	html +='<td>In-Progress<\/td>\n'
    	html +='<td>0<\/td>\n'
    	html +='<\/tr>\n'
    	html +='<tr> \n'
    	html +='<td>WRRR<\/td>\n'
    	html +='<td>02\/19\/2002<\/td>\n'
    	html +='<td>02\/19\/2002<\/td>\n'
    	html +='<td>Submitted<\/td>\n'
    	html +='<td>5<\/td>\n'
    	html +='<\/tr>\n'
    	html +='<tr>\n'
    	html +='<td>WTTT<\/td>\n'
    	html +='<td>02\/19\/2002<\/td>\n'
    	html +='<td>02\/19\/2002<\/td>\n'
    	html +='<td>In-Progress<\/td>\n'
    	html +='<td>0<\/td>\n'
    	html +='<\/tr>\n'
    	html +='<tr> \n'
    	html +='<td>WYYD<\/td>\n'
    	html +='<td>02\/11\/2002<\/td>\n'
    	html +='<td>02\/11\/2002<\/td>\n'
    	html +='<td>Submitted<\/td>\n'
    	html +='<td>7<\/td>\n'
    	html +='<\/tr>\n'
    	html +='<tr> \n'
    	html +='<td>WRRR<\/td>\n'
    	html +='<td>02\/19\/2002<\/td>\n'
    	html +='<td>02\/19\/2002<\/td>\n'
    	html +='<td>Submitted<\/td>\n'
    	html +='<td>5<\/td>\n'
    	html +='<\/tr>\n'
    	html +='<\/tbody>\n'
    	html +='<\/table>'
    
    document.getElementById('mstrWrapper').innerHTML = html
    
    table = document.getElementById("mstrTable");
    tbody = table.getElementsByTagName("tbody")[0];
    
    tbody.onclick = function (e) {
      e = e || window.event;
      var td = e.target || e.srcElement; //assumes there are no other elements inside the td
      var row = td.parentNode;
      if (ishigh&&ishigh!=row){
        ishigh.className='';
      }
      row.className = row.className==="highlighted" ? "" : "highlighted";
      ishigh=row;
    }
    
    document.onkeydown = function(e){
    	e = e || event;
    	var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
    	if(code === 38){ //up arraow
    		newhigh = rowindex(ishigh) - 2;
    		if(!ishigh || newhigh < 0){return GoTo('mstrTable', rowslim);}
    		return GoTo('mstrTable', newhigh);
    	} else if (code === 40){ //down arrow
    		newhigh = rowindex(ishigh);
    		if(!ishigh || newhigh > rowslim){return GoTo('mstrTable', 0);}
    		return GoTo('mstrTable', newhigh);
    	}
    }
    
    
    //JQUERY:
      $(function() {
        $( "#mstrTable tr th" ).resizable({
          handles: 'e'
        });
      });
    
    }//end of function
    
    function rowindex(row){
    	var rows = table.rows, i = rows.length;
    	while(--i > -1){
    		if(rows[i] === row){return i;}
    	}
    }
    function GoTo(id,nu){
      var obj=document.getElementById(id),
          trs=obj.getElementsByTagName('TR');
      nu = nu + 1;
      if (trs[nu]){
        if (ishigh&&ishigh!=trs[nu]){
          ishigh.className='';
        }
        trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
        ishigh=trs[nu];
       }
    }
    </script>
    
    </head>
    
    <body>
    <div id="mstrWrapper"></div>
    
    <input type="button" value="LOAD" onclick="writeit()">
    
    </body>
    
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,775
    Thanks
    55
    Thanked 519 Times in 516 Posts
    I assume that you are having problems in firefox, as that code runs fine for me in Chrome and IE.

    This is a known bug in Firefox, it has to do with the way it renders tables. From what I can tell, the easiest workaround for you would be to add a little css:
    Code:
    th { display:inline-block; }

  • Users who have thanked xelawho for this post:

    jason_kelly (03-07-2013)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts
    Thanks xelawho,

    I am using IE7 (were stuck that browser at work), still no go though after putting the display:inlinbe-block;

    Code:
    #mstrTable th {
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
            width: 110px;
        	height: 18px;
        	border-bottom: 1px solid #808080;
        	border-top: 0px;
        	display:inline-block;
    }

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,775
    Thanks
    55
    Thanked 519 Times in 516 Posts
    the other solution that I have seen is putting a div inside each of those th's and applying the resizable() to that. But that was for the same firefox bug, dunno if it will help with IE7.

    As a possible aside, IE is very finicky about constructing tables using innerHTML - yours renders fine in IE8, but if the above doesn't work, maybe consider using proper DOM methods?

    (and why does it have to be made that way, anyway..? there's nothing dynamic getting added - you could just as easily hardcode it and hide/show it)


  •  

    Posting Permissions

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