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
});
});
Related
I have a several blocks of content which open in a Fancybox. This all works as it's meant to but the contents of a couple of the boxes is quite small and doesn't really warrant a 1000px width Fancybox overlay. Is there a way to set the widths of these boxes to something else?
I've tried added a width to the content box (#login-overlay) for example but Fancybox just ignores this as it is built around the content once the relative link has been clicked which opens the overlay.
Here's my javascript:
$(document).ready(function() {
$(".fancybox").fancybox({
margin: [20,20,20,20],
padding: [20,20,0,20],
openEffect: 'fade',
openEasing: 'easeInQuad',
openSpeed: 400,
title: false,
//closeBtn: false,
//autoCenter: false,
scrolling : 'no', // turns off scrolling in box.
fitToView : false, // allows box to overflow out of viewport.
autoSize: false, // needs to be turned off for width/maxWidth to work.
height: 'auto', // if autoSize is set to 'false', this needs to be 'auto' so height matches content.
width: '100%',
maxWidth: 960,
helpers: {
overlay: {
// locked: false, // Prevents jump to top of window when opening a fancybox.
showEarly : false
}
},
tpl: {
closeBtn : '<a title="Close" class="fancybox-item fancybox-close icon-circle-cross" href="javascript:;"><span>Close</span></a>'
}
});
});
As you can see I'm using maxWidth to see the width of the default size. I couple of boxes could be almost half that. I've tried setting auto so see if it would inherit the width set on the content block in the CSS but this doesn't seem to work.
Any ideas that don't involve writing a whole need block of script for $(".fancybox-narrow")?
EDIT
I actually found an example on the Fancybox page which uses data-fancybox-width to set the width of an overlay: http://jsfiddle.net/wgPTR/
Though this doesn't seem to work with my code. The width sets but it isn't responsive anymore. Setting fitToView to false seems to get that working but then the fancybox crops when there's not enough vertical space and it's un-scrollable.
UPDATE
Just to update, here's a CodePen of the working (default) fancybox: http://codepen.io/moy/pen/YGgjqv
I've also created a forked version which uses data-fancybox-width to set a width - which works but unfortunately the fancybox is no longer responsive. The only way to get this to work is to take out fitToView: false which breaks my vertical scrolling.
Any ideas?
I seem to have found a solution (with a lot of help from the CSS Tricks forum) by using the following beforeLoad if statement:
beforeLoad: function() {
if ($(this.element).hasClass('fancybox--small')) {
this.maxWidth = 600;
}
}
Basically it checks for the class fancybox--small and if it's present it amends the maxWidth of the fancybox.
Can't see any problems with it (yet), checking in IE it seems to work down to IE8 as well. Hopefully this helps someone else but let me know if you find any issues with it ;)
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
I have a jQuery UI accordion of which I need to urgently change the speed/duration of the animation before the site goes live.
$(".faq-accordion > div").accordion({ header: "h4", collapsible: true, active: false, speed: "fast", });
Editing the speed in this line doesn't affect anything.
See JSFiddle for full code.
The show all/hide all buttons open the accordion at a much faster speed than when they are individually clicked.
I need to speed up the animation of the accordion so both are the same speed if possible.
If you take a look at the accordion API you'll see that there's no option called speed, you need to use animate. The equivalent to a duration setting of fast for slideUp and slideDown, in milliseconds, is 200, so you can just use that as a number value:
$(".faq-accordion > div").accordion({
header: "h4", collapsible: true, active: false,
animate:200
});
Here's your fiddle updated with this: http://jsfiddle.net/z3Lx1o0y/
You can specify the speed at a more granular level in the slideUp/slideDown function
e.g.
$('.applying div div').slideDown(1000);
Try tweaking this.
I used the jQuery ui (jquery-ui-1.10.3) dialog pluggin for one of our products, and found a possible "problem":
When the hosting page is small or the current view of the hosting page is scrolled to the top, dragging an openned dialog box behaves as what is expected. The problem start to manifest when hosting a dialog in a large page which is scrolled to somewhere not at the top, in which case the dialog box starts to jump around during dragging. It happens to both IE 9 and the latest Firefox (21.0).
The page is dynamically generaed, complex and has to be long. I am not familiar with fiddle, but it seems to have no option for jQuery-ui lib option that I can use.
More specifically, I found if I scoll the hosting page 100px down (so the top 100px of the hosting page is 'feed' into the top border of the browser window) then when I drag the dialog, instead of it following the mouse, it jumps down 100px so that it is out of the mouse capture.
The dialog is initiallized as
$(element).dialog({
autoOpen: false, width: 950, height: 820,
modal: false, resizable: true, draggable: true
});
My questiong is: 1) does any one else has the same issue? 2) If so, is this an setting issue or a bug.
Any expert here can help me with it?
I used to have the same issue, content on the page is generated automatically. It is very long.
html, body {position: relative} solves the problem.
OK, I found this is a bug of jQuery-ui 1.10.3, see here:
That appears only with using UI 1.10.3 and when the scrollbar is not
at the very top in Firefox, Opera, IE8.
In Chrome works fine and also with 1.10.2 on other browsers.
The UI dialog demo page has this bug too:
drag the dialog down until appears the scrollbar scroll down again
drag the dialog down. dialog goes down with the offset
My solution to fix this bug is similar to that of Dado, but using the drag event:
$(element).dialog({
draggable: true,
drag: function(event, ui) {
var fixPix = $(document).scrollTop();
iObj = ui.position;
iObj.top = iObj.top - fixPix;
$(this).closest(".ui-dialog").css("top", iObj.top + "px");
}
});
My version: jQuery UI - v1.10.3 - 2013-10-10
I think there is a bug. I faced to this problem too. My solution for fixing this to turn off the dragging. Just make draggable false.
Like this:
$(element).dialog({
autoOpen: false, width: 950, height: 820,
modal: false, resizable: true, draggable: false
});
Update the jQuery UI Library (js) worked for me.
http://jqueryui.com/download/
Remember to update your css files too.
Bugreport: view bug report
My solution to fix this bug is to "reset" the "ui.position.top" (for me 228px).
$(element).dialog({
dragStart: function(event, ui) {
var fixPix = 228; // offset top (add your own here!)
iObj = ui.position;
if (iObj.top > fixPix) {
iObj.top = iObj.top - fixPix;
}
ui.position = iObj;
}
});
My version: jQuery UI - v1.10.4 - 2014-01-17
This solution works for me. Hope it helps you too until this ugly bug is fixed.
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"
});