Brian Grinstead » jquery-ui http://www.briangrinstead.com/blog Wed, 11 Jan 2012 20:23:16 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 jQuery UI CDN Boilerplate http://www.briangrinstead.com/blog/jquery-ui-cdn-boilerplate http://www.briangrinstead.com/blog/jquery-ui-cdn-boilerplate#comments Tue, 13 Dec 2011 22:13:21 +0000 Brian http://www.briangrinstead.com/blog/?p=682 I always forget these links, and they are surprisingly hard to find. Here is a quick markup skeleton to throw together for prototypes using jQuery UI.

<!doctype html>
<head>
  <title></title>
 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" />
 
  <style type="text/css">
    #draggable {
		background: orange;
		width: 100px;
		height: 100px;
	}
  </style>
 
  <script type='text/javascript'>
	$(function() {
		$("#draggable").draggable().resizable();
	});
  </script>
</head>
 
<body>
<div id='draggable'>drag!</div>
</body>
 
</html>
]]> http://www.briangrinstead.com/blog/jquery-ui-cdn-boilerplate/feed 1 Make Table Rows Sortable Using jQuery UI Sortable http://www.briangrinstead.com/blog/make-table-rows-sortable-using-jquery-ui-sortable http://www.briangrinstead.com/blog/make-table-rows-sortable-using-jquery-ui-sortable#comments Thu, 30 Jul 2009 20:17:51 +0000 Brian http://www.briangrinstead.com/blog/?p=352 I wrote an article, Make Table Rows Sortable Using jQuery UI Sortable on the Foliotek Development Blog about a problem that I ran into when trying to set up a basic sortable table using jQuery UI. The columns would collapse down once the dragging began.

sortable-row-collapsed

This was fixed by adjusting the helper object for the sortable function. Check out the [article][] for all the details, but here is a sample of the code if you are just looking for the solution:

// Return a helper with preserved width of cells
var fixHelper = function(e, ui) {
	ui.children().each(function() {
		$(this).width($(this).width());
	});
	return ui;
};
 
$("#sort tbody").sortable({
	helper: fixHelper
}).disableSelection();
]]> http://www.briangrinstead.com/blog/make-table-rows-sortable-using-jquery-ui-sortable/feed 3