JQuery UI Accordion - Nested Accordions not animated - javascript

I have multiple nested JQuery UI accordions - one accordion contains another.
Look at the attached fiddle and the animation (or rather missing animation) after unfolding the nested accordion which is not visible at first. It's hard to explain by words.
How can i achieve a smooth "pushing" animation?
HTML with accordions:
<div id="accordion_broadcasts">
<div id="acc_broadcasts_header">
<div class="accordion_descriptions">
<div class="acc_descriptions_header">
<table class="broadcast_table">
<tr class="broadcast_tr">
<td class="broadcast_td1">foobar</td>
<td class="broadcast_td2">CLICK (working)</td>
</tr>
</table>
</div>
<div>
only visible if unfolded
</div>
</div>
</div>
<div>
<div class="accordion_descriptions">
<div class="acc_descriptions_header">
<table class="broadcast_table">
<tr class="broadcast_tr">
<td class="broadcast_td1">foobar</td>
<td class="broadcast_td2">CLICK (poorly animated)</td>
</tr>
</table>
</div>
<div>
only visible if unfolded
</div>
</div>
</div>
</div>
Javascript:
//Outer accordion
$( "#accordion_broadcasts" ).accordion({
collapsible: true,
active: false,
disabled: true,
header: "#acc_broadcasts_header",
activate: function(event, ui) {
$( ".accordion_descriptions" ).accordion("refresh");
$( "#accordion_broadcasts" ).accordion("refresh");
}
});
//Inner accordion
$( ".accordion_descriptions" ).accordion({
collapsible: true,
active: false,
header: ".acc_descriptions_header",
disabled: true,
activate: function(event, ui) {
$( ".accordion_descriptions" ).accordion("refresh");
$( "#accordion_broadcasts" ).accordion("refresh");
}
});
//fold outer accordion
$("#unfold_broadcast").click(function(){
if ($("#accordion_broadcasts").accordion( "option", "active") === false){
$( "#accordion_broadcasts" ).accordion({active: 0});
}
else{
$( "#accordion_broadcasts" ).accordion({active: false});
}
$( "#unfold_broadcast" ).remove();
});
//fold inner accordion
$(".broadcast_td2").click(function(){
if ($(this).closest(".accordion_descriptions").accordion( "option", "active") === false){
$(this).closest(".accordion_descriptions").accordion({active: 0});
}
else{
$(this).closest(".accordion_descriptions").accordion({active: false});
}
});
JSFiddle
Note 1: The jsfiddle example is a simplified version of my actual code. The problem remains the same.
Note 2: There are probably some unnecessary refresh calls on these accordions. I've played around with the refresh method until the accordions worked somewhat.

The magic is to add heightStyle: "content" to the properties of the outer accordion.
So its Javascript looks like that:
$( "#accordion_broadcasts" ).accordion({
collapsible: true,
active: false,
disabled: true,
header: "#acc_broadcasts_header",
heightStyle: "content",
activate: function(event, ui) {
$( ".accordion_descriptions" ).accordion("refresh");
$( "#accordion_broadcasts" ).accordion("refresh");
}
});
See my updated JSFiddle.
I had the same problem, and fixed it this way.
During my research, i found out, that the content height of the outer accordion was zero while it was unfolded. So setting a height to the content div would be a solution, if you now the exact size of the nested content, but heightStyle: "content" does this for you.

Related

Jquery, draggable div is not automatically resizing with accordion inside using Firefox

I have a jquery accordion inside a draggable div. Once the div has been dragged it becomes a fixed height and doesn't react to the accordion as expected. Any advice?
You can see it not working at http://addresslabels.tk/templates just select the 14 per sheet template and it's the menu on the left.
$(function() {
$( ".draggable" ).draggable();
});
$(function() {
$( ".closedaccordion" ).accordion({
collapsible: true,
active: false
});
$( ".openaccordion" ).accordion({
collapsible: true,
});
Css:
#printmenu {
position:fixed;
width: 235px;
height: auto;
padding: 10px;
border-radius: 5px;
}
html
<div id="printmenu" class="jsonly ui-widget-content draggable">
<div class="closedaccordion">
<h3>Accordion</h3>
<p>content</p>
</div>
</div>
The answer shown in the duplicate question doesn't work for me so I have to add this question!
I used this javascript to fix this problem happening in firefox -
$("#printmenu").draggable({ handle: "#printmenutitle" });
$( ".closedaccordion" ).accordion({ collapsible: true, active: false });
$( ".openaccordion" ).accordion({ collapsible: true, });
$('#printmenutitle') .bind('mouseup', function(){
document.getElementById('printmenu').style.height = 'auto';
});
It looks glitchy because it isn't animated, but adding $('#printmenu').css('height', 'auto') to the activate event of the accordian does resize the box properly:
$(function () {
$(".draggable").draggable();
$(".closedaccordion").accordion({
activate: function () {
$('#printmenu').css('height', 'auto');
},
collapsible: true,
active: false
});
$(".openaccordion").accordion({
collapsible: true
});
});

jQuery UI draggable inside Slick-slider

I need to have a jQuery UI draggable element inside a Slick-slider. I know that jQuery UI has the handles option http://jqueryui.com/draggable/#handle but I'm not sure how to apply this to the slick-slider.
I found this SO question: jQuery UI Slider Interference with slick carousel but it's using jQuery UI's slider option. When I did something similar on my example I was able to disable the slick-slider dragging... But my draggable elements still aren't draggable.
JSfiddle: http://jsfiddle.net/NateW/u1burczm/
How do I disable dragging on the Slick-slider only when it's inside one of my draggable elements and still have the draggable elements draggable?
HTML:
<div class="wrapper-slider">
<div>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="draggable" class="ui-widget-content">
<p>and me!</p>
</div>
</div>
<div><h3>1</h3><h3>1</h3><h3>1</h3></div>
<div><h3>2</h3><h3>2</h3><h3>2</h3><h3>2</h3></div>
<div><h3>3</h3><h3>3</h3></div>
</div>
JS:
$('.wrapper-slider').slick({
dots: false,
infinite: false,
centerPadding: "20px",
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
$(function() {
$( ".draggable-element" ).draggable();
});
$(".draggable-element").on("draggable mouseenter mousedown",function(event){
event.stopPropagation();
});
for that to work you need to unbind the dragstart event registered by slick slider like follow before binding the draggble to element
$('.wrapper-slider').slick({
dots: false,
infinite: false,
centerPadding: "20px",
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
$(function() {
$('*[draggable!=true]','.slick-track').unbind('dragstart');
$( ".draggable-element" ).draggable();
});
$(".draggable-element").on("draggable mouseenter mousedown",function(event){
event.stopPropagation();
});
here is working jsfiddle
http://jsfiddle.net/samcoolone70/u1burczm/3/

How to fit html page in pop up window (dialogue box) without using scrollbar?

I am newbie to JS/Html world and trying to load a html page in popup/dialog window on clicking some text in html but loaded page is bigger than poppup window size so there is scroll-bar.
Javascript/Jquery code
$(document).ready(function(){
$('.showModal2').click(function(){
$('#popup2').dialog({width: 450,height: 450});
});
});
$(function(){
$("#data").load("frontend/js/page.html");
});
Html code
<div id="popup2" title="Results" style="display:none;">
<div id="data" style="min-width: 200; height: 400; max-width: 400; margin: 0 auto"></div>
</div>
<font color="blue">Link</font>
Is there any way to fit page within popup/dialog window size (here l=450 & b=450) completely without using scroll-bar like cropping page?
Try this.
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: "auto"
});
$(".dialogify").on("click", function(e) {
e.preventDefault();
$("#dialog").html("");
$("#dialog").dialog("option", "position", {
my: "center",
at: "center",
of: window
});
if ($("#dialog").dialog("isOpen") == false) {
$("#dialog").dialog("open");
}
});
});
Try this below code, it works for me:
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});

Why does my jquery function not work on div in page loaded by ajax

I'm just starting out with jquery. Already learned some things and like it, but I have been struggling with the following issue for a few days.
I copied the "dialog-confirm"-function from https://jqueryui.com/. I placed this script between the tags on my index.php page.
<script type = "text/javascript">
$(document).ready(function(){
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
$(window).resize(function() {
$('#scrollpage').height($(window).height() - 250);
});
$(window).trigger('resize');
$('.container').on('click', '.mainmenu', function(event){
event.preventDefault();
var url = $(this).attr('href');
$.get(url, function(data) {
//alert(data);
$("#div1").load(url);
});
$( this ).parent().addClass('current_page_item');
$( this ).parent().siblings().removeClass('current_page_item');
});
$('.container').on('click', '.rapport', function(event){
event.preventDefault();
//$(".dialog-confirm").dialog( "open" );
var url = $(this).attr('href');
$.get(url, function(data) {
//alert(data);
$("#div1").load(url);
});
});
});
</script>
If i place the matching div in the same index.php page. It works fine, the div pops up.
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Blablabla</p>
</div>
However when i place the div in a page which is loaded by ajax in the div1, then I cant get it to work.
<div class="scrollpage" id="scrollpage">
<div class="container" class="page" id="div1">
</div>
</div>
Can anyone explain to me why this is, and how I can fix this?
What's happening is that your $(document).ready() function executes as soon as the DOM is loaded. This DOM contains just what it is in the html file. At that time, there's no div with an id equal to 'dialog-confirm'. Loading pieces of HTML with ajax doesn't trigger a DOMReady event. What you've got to do is to call the .dialog() jQuery function AFTER you've loaded the div with Ajax:
$("#div1").load(url, function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
Here is what happens in your program(loading div with ajax):
First, your script initiates dialog window container by looking an element with id dialog-confirm.
Since, you don't have an element with that id yet, dialog container cannot be prepared.
There are two ways you can make it work:
Call dialog() after ajax requests,
Place div statically on page and change content with ajax request.
Solutions:
1- Use the code below instead of $("#div1").load(url);
$("#div1").load(url, function(){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
2- Place divs statically on your page:
<div class="scrollpage" id="scrollpage">
<div class="container" class="page" id="div1">
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Blablabla</p>
</div>
</div>
</div>
Then load just <p>... with $("#dialog-confirm").load(data); instead of $("#div1").load(url);.
Your jquery is executed only once after your page is loaded. Then is initiating everything needed for the tool!
This means every .container is being 'transformed'.
If you later add a new div.container it is not 'transformed' yet. You have to execute the jquery again after your div is appended!

disable sortable or dragging with jquery ui

I have a div inside a div that I don't want to be able to drag around as it is a navigation element.
example:
$(function() {
$( "#container" ).sortable();
$( "#container" ).disableSelection();
});
<div id="container">
<div class="move">drag me around</div>
<div class="nav">Don't move me</div>
</div>
Basically the .nav I don't want to be able to drag I tried this but it didn't work
$( "#sortable1" ).sortable({
items: "li:not(.ui-state-disabled)"
});
Just filter out the item you don't want to be sortable:
$('#container').sortable({
items: 'div:not(.nav)'
});
Your current filter is acting on li elements, you're using div elements.

Categories