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
Related
I have read few similar questions regarding the same issue and I have implemented my function. However it doesn't work as expected. I am using Bootstrap for my website thus every element on the page is responsive.
Problem description: I am using jQuery stick plugin http://stickyjs.com/ and I am making one element of my page always visible. Now what I am trying to achieve that the sticky plugin call would only work if the window width is above 1024px. Since I am using bootstrap and below 1024 px every element get stacked underneath.
Here is my function
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize >= 1024) {
$(".rightmain").sticky({
topSpacing:0
});
}
}
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
This code doesn't invoke the sticky plugin.
If I remover the width calculation function and simply invoke the sticky plugin like the one mentioned below then it works fine.
$(document).ready(function(){
$(".rightmain").sticky({
topSpacing:0
});
});
Also, if anyone can give me some pointers to some other library other than http://stickyjs.com/ where I have the option to disable the plugin after a certain given windows (height/width) then it would be great. Since I am using bootstrap I dont want to invoke the sticky plugin in every other cases.
I've replicated the fluid/responsive mode of Isotope: http://isotope.metafizzy.co/demos/fluid-responsive.html but with the addition of animating the width of the clicked element using "transition: width 0.3s". This does work, however it disables the 'reLayout' animation of which I'm triggering on 'transitionend'.
I'm thinking that one is overriding / conflicting with the other. Has anyone had similar issues or know a way around this? I've tried setting 'animationEngine : 'jquery', and this does resolve the issue, but it looks terrible - browser re-paining issues!?
Thanks for any help!
And here's a live demo...
http://www.voyced.com/isotope-test/
If you disable the css property "transition: width 0.3s" in the developer tools the 'reLayout' animation works again.
Issue a $(window).resize() after you animate the item.
or
$container.isotope('reLayout', function() {
$(window).resize();
});
I am using the fittext JS plugin to resize my headings on a page I am working on. For some reason it only kicks in if/once you adjust your window size, I cant seem to figure out why it is doing this.
Anyone have any ideas? Here is a link:
http://voltagenewmedia.ca/testserver/dry/#/homepage
Thanks!
For those who are still having the issue, this fix works for me
Replace this code inside jquery.fittext.js
// Call once to set.
resizer();
With this code,
$(window).load(function(){
resizer();
});
Your link is down so I can't actually see what the problem is. Fittext should resize immediately and then update on resize:
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};
// Call once to set.
resizer();
// Call on resize. Opera debounces their resize by default.
$(window).on('resize', resizer);
Are you waiting until the DOM is loaded before you use the plug-in?
I just ran into a similar problem that was driving me nuts. The element holding my text could not shrink within it's container because the max font size was too large, so I start it off with the width of the parent container. Then I just use the fittext algorithm once after initializing to get it loading properly and it seems to solve the issue.
$("#hero").find('h1').fitText(.65, { maxFontSize: '142px' });
$("#hero").find('h1').each(function(){
startSize = Math.max(Math.min($('#hero').width() / (compressor.*10)));
$(this).css({'font-size':startSize});
});
I have some divs that have dynamic heights controlled by a 'click' function as below:
$('.expand').click(function() {
$(this).next('.collapse').slideToggle();
});
I am attempting to apply the jQuery wookmark plugin to the divs, and it works, apart from when their heights are dynamically resized by expanding one of the sections. From the documentation, I copied over one of the examples to my code, and the dynamic height works
$(document).ready(new function() {
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#container'), // Optional, used for some extra CSS styling
offset: 30, // Optional, the distance between grid items
itemWidth: 300 // Optional, the width of a grid item
};
// Get a reference to your grid items.
var handler = $('.outerwrapper');
// Call the layout function.
handler.wookmark(options);
// Capture clicks on grid items.
handler.click(function(){
// Randomize the height of the clicked item.
var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
$(this).css('height', newHeight+'px');
// Update the layout.
handler.wookmark();
});
});
You can see this working here. How can I make it so that when you click one of the headings inside the divs, the layout updates, as it does in the example. Thanks in advance.
Usually third party jQuery plugins include some kind of "Refresh" or "Resize" function.
Taking a quick look at the function, it doesn't appear to have one; however, since there is an "autoResize" option (which will reload the layout on browser resize), you could simply create a click event that triggers the "resize" event like so:
JAVASCRIPT:
$("h1.resize").live("click", function()
{
$(window).trigger('resize');
});
http://api.jquery.com/trigger/
http://api.jquery.com/resize/
EDIT:
Re-reading the question again,
Looks like this:
handler.wookmark();
should refresh the layout (based on your posted code). So you should be able to use that instead of the resize trigger.
$("h1.resize").live("click", function()
{
handler.wookmark();
});
I am trying to have a resizable on a div, but the resizer handle is always contained within the div can I have it where scrollbars end.
/////////// Edit ///////////
I have achieved it with jScrollPane but after using jScroll I am unable to resize horizontally.
demo http://i53.tinypic.com/906rk9.png
It should work, if you put a wrapper around the element to be resized, and make this wrapper resizable.
I was playing around with that idea and this result seems to work:
<script>
$(document).ready(function() {
$(".resizable")
.wrap('<div/>')
.css({'overflow':'hidden'})
.parent()
.css({'display':'inline-block',
'overflow':'hidden',
'height':function(){return $('.resizable',this).height();},
'width': function(){return $('.resizable',this).width();},
'paddingBottom':'12px',
'paddingRight':'12px'
}).resizable()
.find('.resizable')
.css({overflow:'auto',
width:'100%',
height:'100%'});
});
</script>
Test with jsfiddle
jQuery UI team considers scrollable resizable div as a bad design. So it is "won't fix feature:
http://bugs.jqueryui.com/ticket/9119
Workaround as Dr.Molle already stated - resizable wrapper for scrollable div.
Check option http://api.jqueryui.com/resizable/#option-alsoResize
This works for me
$(".responsive-table th").resizable({
handles: "e",
containment: 'document',
alsoResize: ".responsive-table table"
});