I have built accordion inside tinyscroll bar div. But the problem is tiny scrollbar is not extending (height) when the accordion menu opens.
Here is my code
$('#test').click(function(){
$('#dialog').show();
$('#scrollbar1').tinyscrollbar();
$('#overlay').show();
});
//Accordion
$('#accordion-3').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: false,
disableLink: false,
showCount: false,
speed: 'slow'
});
FIDDLE
you need to call $('#scrollbar1').tinyscrollbar_update(); once the accordion has finished its animation, like so:
fiddle
$('#test').click(function(){
$('#dialog').show();
$('#scrollbar1').tinyscrollbar();
$('#overlay').show();
});
//Accordion
$('#accordion-3').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: false,
disableLink: false,
showCount: false,
speed: '400'
});
$("#accordion-3").on("click", function() {
window.setTimeout( function() {
$('#scrollbar1').tinyscrollbar_update();
} , 400 );
});
I don't think dcAccordion has any sort of callback feature, so you're stuck with setTimeout
Related
Everytime I use dialog, all my other elements bind get lost, for example, I bind click event of elements with class '.submit-button' it works fine until I open a dialog...
Any idea?
Yours,
Diogo
edit:
Example:
Sure!
<span onclick="normalDialog()">Open Dialog</span>
<span class="submit-butto">alert ok</span>
<script>
$('.submit-butto').click(function(){
alert('Ok');
});
function normalDialog(){
$("#dialog").dialog({
title: 'Hello',
bgiframe: true,
resizable: false,
draggable: false,
height:160,
width:290,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
"Close": function() {
$(this).dialog('close');
}
});
}
</script>
When I click 'open dialog','alert ok' stops working...
Found the problem, it was nothing related to dialog,
Found this line on my code, it was resetting everything:
jQuery.cache = { };
here is my code with jquery ui:
jQuery("#nodeliverydate").dialog({
resizable:false,
draggable:false,
modal:false,
buttons:[{text:"Close",click:function(){jQuery(this).dialog("close");}}]
});
It is a very simple code that using jquery dialog as an alert box. I defined one button to close the dialog. However, it runs in a very odd way that the dialog will contain many buttons, and the text on the buttons are all function names such as "each","all","clone","select","size", etc. And after I close it, if the dialog shows again, it will be normal. Does anyone have any idea about why this happens?
jQuery("#nodeliverydate").dialog({
modal: true, title: 'Delete msg', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
This work pretty well: Yes or No confirm box using jQuery
I used according menu and slides in a single page. I used "easeOutBounce" from using jquery.easing.1.3.js to according menu.
Now the menu is working fine.
But it conflict with the Slider. I don't need this effect with the Slider. I don't know how to solve this issue.
I don't need "easeOutBounce" effect the Bottom slide of this URL.
The slide is not a problem when I remove this line $.easing.def = "easeOutBounce"; from my code. But I need this effect to according menu.
My code is
<script>
$(document).ready(function(){
$.easing.def = "easeOutBounce";
$('li.button a').click(function(e){
var dropDown = $(this).parent().next();
$('li.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});
</script>
<script>
$(function(){
$('#slides_two').slides({
generateNextPrev: true,
pagination: false,
preload: true,
preloadImage: 'images/loading.gif',
generatePagination: false,
play: 10000,
slideSpeed: 3000,
effect: 'slide',
pause: 4000,
hoverPause: true
});
});
</script>
You can use slideEasing option for your slider. This is how your code would be with this option:
<script type="text/javascript">
$(document).ready(function(){
$.easing.def = "easeOutBounce";
$('li.button a').click(function(e){
var dropDown = $(this).parent().next();
$('li.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});
</script>
<script type="text/javascript">
$(function(){
$('#slides_two').slides({
generateNextPrev: true,
pagination: false,
preload: true,
preloadImage: 'images/loading.gif',
generatePagination: false,
play: 10000,
slideSpeed: 3000,
effect: 'slide',
pause: 4000,
hoverPause: true,
slideEasing: "jswing"
});
});
</script>
Easing types you can see here.
Is it possible to apply a fade out effect on the jQuery UI modal dialog box overlay? The issue is that the overlay div is destroyed when the modal dialog box is closed preventing any kind of animation. This is the code I have that would work if the overlay div was not destroyed on close.
$("#edit-dialog-box").dialog(
{
autoOpen: false,
modal: true,
width: "30em",
show: "fade",
hide: "fade",
open: function()
{
$(".ui-widget-overlay").hide().fadeIn();
},
close: function()
{
$(".ui-widget-overlay").fadeOut();
}
});
Demo: http://jsfiddle.net/276Ft/2/
$('#dialog').dialog({
autoOpen: true,
modal: true,
width: '100px',
height: '100px',
show: 'fade',
hide: 'fade',
open: function () {
$('.ui-widget-overlay', this).hide().fadeIn();
$('.ui-icon-closethick').bind('click.close', function () {
$('.ui-widget-overlay').fadeOut(function () {
$('.ui-icon-closethick').unbind('click.close');
$('.ui-icon-closethick').trigger('click');
});
return false;
});
}
});
I advise not to bind the fadeOut of the overlay to the “closethick” close event.
This solution will work in all cases, for example if you use a “Cancel” button, or if the dialog closes itself after doing anything else due to other buttons:
$('#dialog').dialog({
autoOpen: true,
modal: true,
width: '100px',
height: '100px',
show: 'fade',
hide: 'fade',
open: function () {
$('.ui-widget-overlay', this).hide().fadeIn();
},
beforeClose: function(event, ui){
// Wait for the overlay to be faded out to try to close it again
if($('.ui-widget-overlay').is(":visible")){
$('.ui-widget-overlay').fadeOut(function(){
$('.ui-widget-overlay').hide();
$('.ui-icon-closethick').trigger('click');
});
return false; // Avoid closing
}
}
});
I have multiple images on a page, that pops up the related big image in a dialog box.
But when I click image 2, images 1 shows first before image 2 comes in, in the first .5 seconds.
How can I clear image 1 out completed when I close it?
I try destroy, but that kills the entire functionality when time to click image 2.
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
resizable: false,
position: 'middle',
draggable: false,
minWidth: '960',
maxheight:'500',
overlay: true,
modal: true,
show: "fade",
hide: "fade",
position:'top',
close: function(event, ui) {
$("#dialog").dialog("destroy");
}
});
});
.dialog('destroy') only removes the dialog capabilities from that div. you need to empty it!
close: function(event, ui) {
$("#dialog").empty().dialog("destroy");
}
edit: ahh, right, you want to keep the dialog, but empty it right? take off the .dialog('destory') then, just empty it.
close: function(event, ui) {
$("#dialog").empty();
}
I use remove instead of empty..
close: function(event, ui) {
$("#dialog").remove().dialog("destroy");
}