Develop Reference

jQuery UI resizable with jQuery floatThead plugin

Trying to make column resizing work with floatThead . I tried using jquery resizable and colResizable plugins but in vain. Does anyone know any example implementation of resizable columns with floatThead?
I am using the following configuration for floatThead.
useAbsolutePositioning: false,
autoReflow: false,
headerCellSelector: "tr:first>th:visible",
zIndex: 10,
debounceResizeMs: 300,
scrollContainer: function ($table) {
return $table.closest('div');
}
Thanks.

I have been struggling with similar problems now for 3 hours and I finaly solved it!
My problem was that the min-width in px on the table set by the floatThead script made it impossible to scale down the parent element with jQuery UI resizable. It was only possible to scale up.
My solution is to disable floatThead on resizing and enable it again after.
Probably you want to add code to store the scroll state.
var resizeId;
$("YourResizableParent").on( "resize", function( event, ui ) {
//Disabeling floatThead removes the min-width on the table
$("#assignment-table").floatThead('destroy');
//Fire function after resizing is finished
clearTimeout(resizeId);
resizeId = setTimeout(doneResizing, 500);
});
function doneResizing(){
//Initiate floatThead again
$('#assignment-table').floatThead();
}

I had same problem, and in my case it was all because of simple mistake.
I was attaching resizer to both of my original table and the ghost table created by floatThead plugin. Then I was unable to resize anything.
So my advice is: Always init resizable before you init floatThead, then all works just fine

Jquery Isotope: making horizontal Masonry

I am trying to build a horizontal version of JQuery Masonry using JQuery Isotope. I want my result to look something like this:
Layout-modes (CLICK THE masonryHorizontal OPTION).
As per the sites instructions:
Masonry Horizontal
my script looks like:
$('#isotopecontainer').isotope({
itemSelector : '.item',
masonry : {
columnWidth : 270
}
});
However, 2 things are happening:
1) when the page loads the height of the #isotopecontainer div is set at 60px so you only see the tops of the .item divs.
2) if you resize the browser the #isotopecontainer div expands but the .item divs do not line up like the example.
Can anyone help point me in the right direction at all? My demo site is here.
Thanks.

You're demo site is working in Firefox.
Although, you're right, in Chrome it's not. The problem is fairly simple. You need to set width and height attributes on your images. Or else, Chrome load them as 0px height (which made container with default height of line-height value) until they get the file. Firefox isn't acting this way and waits for knowing the images size before creating the layout.
Hope this help!

You need to add layoutMode: 'masonryHorizontal' or else it won't work. Like this:
$('#isotopecontainer').isotope({
itemSelector : '.item',
layoutMode: 'masonryHorizontal',
masonry : {
columnWidth : 270
}
});

#isotophecontainer has overflow: hidden. Removing this shows all of the images for me in Chrome.

jquery isotope plugin container height will not grow with isotope-item (same with masonry)

I have an isotope-item that will grow in height when somebody comments inside of it. When it grows, how do I tell the main isotope container to grow with it? Right now what is happening is, as the isotope-item grows, the isotope container maintains it's initial height that was set when calling $(".home_main").isotope(); So when I leave comments inside the isotope-item, the item grows, then is cut off by the main container. Thanks.
I have seen that you can set resizesContainer: true but this hasn't helped me. Thanks.
Not sure if it makes any difference but I have also tried this with the Masonry jquery plugin as well (seems pretty similar) and had the same problem.

Found the answer here:
https://github.com/desandro/isotope/issues/275
You have to call relayout like this:
$("#your_container").isotope( 'reLayout' )

In Isotope V2 the syntax is
$("#your_container").isotope('layout')

In Isotope PACKAGED v2.2.2, you can also 're-arrange / re-layout' your container:
$(window).scroll(function(){
$container.isotope( 'layout' );
}

In Isotope V3
$(window).on('load', function(){
var $container = $('#your_container');
$container.isotope({
itemSelector: '.item'
});
});

If your using the latest isotope, (not specified version but you can see the date of this comment) read the first link and include the appropriate couple of lines and include the library from the second link.
http://isotope.metafizzy.co/appendix.html
http://imagesloaded.desandro.com/

Javascript / jQuery Parallel Resize Plugin

I am looking for a plugin which can resize two parallel divs at the same time in the opposite direction.
<div class='one'></div>
<div class='handle'></div>
<div class='two'></div>
Assume the divs are floated next to each other.
When a user drags .handle to the right it should make .two smaller and .one bigger.
I've tried writing a basic plugin but I can't account for all browsers etc.
What I'm really trying to do if anyone is interested is resize multiple CKEditor instances. .one and .two would contain an instance of CKEditor and handle would need to resize them in parallel.
Thanks

You need is the plugin called "jQuery UI resizable".
There is an example of what your are trying to do on the samples page: Synchronous Resize

In my application, I had two divs side by side with same height, so I used jquery UI to make one resizable, and then using the size information from first div to set the position for the second one. This was done in the resize callback function.
<script>
$(function() {
$( ".one" ).resizable({
handles: "e",
resize: function(event, ui) {
$( ".two" ).css("left", $(this).width() );
}
});
});
</script>

jQuery UI Accordion - Each Panel Fit To Contents

I'm using jQuery UI's Accordion http://jqueryui.com/demos/accordion/ and I'm trying to get it to fit the height of each panels contents.
The way it currently works is to fit the largest panels contents, but I would like it to resize based on which panel is open.
Also, is there a way to make one panel open instead of the top one by default? I'd like to have the bottommost panel open when the user loads the page.
Thanks in advance!
EDIT: I've tried putting height:auto !important; in the jquery-ui.css file on .ui-accordion .ui-accordion-content-active which does work, but results in a weird issue when closing an accordion, where one stays open while the other is opening.

To keep things current, it seems that for jquery UI version 1.9, the autoHeight has been replaced by heightStyle. http://api.jqueryui.com/accordion/#option-heightStyle
The way to do this after 1.9 would be $( ".selector" ).accordion({ heightStyle: "content"});
autoHeight still works under most circumstances, but I ran into difficulties in Chrome and Safari but not Firefox when I used autoHeight: false and my .ui-accordion-content included an image whose height was set to auto. Using heightStyle instead worked much better.

Ahh, found out they just have a setting for this! http://jqueryui.com/demos/accordion/#no-auto-height
So basically, just do this: $( ".selector" ).accordion({ autoHeight: false });

Question is fairly old but now jQuery has option to set the height as per the content.
More information here: http://api.jqueryui.com/accordion/#option-heightStyl
$(function () {
$("#accordion").accordion({
{heightStyle: "content" }
});
});

this working for me
$(function () {
$("#accordion").accordion({
header: "h3",
autoFill:true,
autoHeight: false
});
});