How to destroy a progressbar on dialog closing? - javascript

I have these 2 functions one of them is to create a dialog and the other is to destroy a progressbar,
after i create the dialog i might need to create a progress bar inside it and start it, but when i close the dialog, the progress bar keeps running in the back ground.
what i need is to destroy or do anything to stop this progress bar from working.
I wrote the createdialog function with a beforeclose event to destroy the progress bar but it doesn't work, and the dialog is not even closing, like the close button is none responsive.
function createdialog(trgt,h,w) {
$( trgt ).dialog({
height:h,
width:w,
autoOpen: false,
show: {
effect: "blind",
duration: 200
},
hide: {
effect: "blind",
duration: 100
},
beforeClose: function( event, ui ) {
destroyprogresspar(trgt);
}
});
}
destroyprogresspar(dialg) {
if(dialg=="#myfilesdialog") {
$("#progressbar").progressbar("destroy");
} else if(dialg=="#ibrowser") {
$("#progressbar2").progressbar("destroy");
}
}
i tried making a closing handler upon creating the dialog like this (WORKS BUT MESSY):
$(trgt).on("dialogbeforeclose", function( event, ui ) {
if(trgt=="#myfilesdialog") {
$("#progressbar").progressbar("destroy");
} else if(trgt=="#ibrowser") {
$("#progressbar2").progressbar("destroy");
}
});
and it works but can't make it call a function instead the if conditions like this (DOESN'T WORK):
$(trgt).on("dialogbeforeclose", function( event, ui ) {
destroyprogresspar(trgt);
});

Related

Stop/reverse animation on mouse off (baraja jquery plugin)

I've implemented the baraja jquery plugin for a section on a 'web app' that I need to create.
Rather than the plugin spreading the cards on the click of a button, I've opted to alter the script and spread out the cards on hover. On the face of it this works but if you hover over the cards and back off quickly before the animation is finished the cards will stay open. And then when you hover over the 'deck' they close. I've created a codepen below to show this:
http://codepen.io/moy/pen/OPyGgw
I've tried using .stop(); but it doesn't seem to have an impact on the result. Can anyone help me with this?
Additionally I'd like the deck to be open on page load, then close after a second or 2. I tried this with $( document ).ready() including the baraja.fan call but that didn't trigger it - any ideas?
this one really tickled me ;) tried several things, but - as already told - the plugin doesn't expect to get the close animation call faster, then the opening animation will run.
so finally i build you the following.
- opening the fan, right at document ready
- created a timeout for the mouseleave, to wait for the opening animation duration, before closing it - you will have a 400ms delay when mouseleave the element, but it will close, even when you've been to fast...
$(document).ready(function () {
if ($("#baraja-el").length) {
var $el = $('#baraja-el');
baraja = $el.baraja();
}
//initial open
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
$('.baraja-container').addClass('open');
// navigation
$('#baraja-prev').on('click', function (event) {
baraja.previous();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1000") {
$(this).addClass('visited');
}
});
});
$('#baraja-next').on('click', function (event) {
baraja.next();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1010") {
$(this).addClass('visited');
}
});
});
$('.baraja-container').hover(function (event) {
if(!$(this).hasClass('open'))
{
$(this).addClass('open');
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
}
}, function (event) {
curBarCon = $(this);
setTimeout(function(){
curBarCon.removeClass('open');
baraja.close();
}, 400);
});
$('.baraja-container li').click(function () {
$(this).addClass('visited');
});
});
since i fiddled in your codepen, you should have the working version here: http://codepen.io/moy/pen/OPyGgw
but... it's really no perfect solution. i'd suggest to get another plugin or rework baraja to get callback functions, which would test if the animation is currently running and dequeue them if needed.
rgrds,
E

How to add <a href links into tooltip and be able to mouseover and click on it? for jQuery UI 1.10

I am using jQuery UI 1.10 Tooltip. Below is my call to tooltip. I cannot find on the documentation on how to do this. I want to add a href links into the tooltip and let user be able to mouseover and click on it. Right now as soon as my mouse hover away from the tip trigger, the tooltip disappear.
$(function () {
$(document).tooltip({
track: false,
show: {
effect: "slideDown",
delay: 20
},
hide: {
effect: "explode",
delay: 5
}
});
})
Documentation:
http://api.jqueryui.com/tooltip/#option-position
Thanks,
Will
jQuery UI tooltips don't support this out the box however You can add the following code which delays the hide function allowing you to move the mouse over the tooltip:
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeIn(250);
},
function () {
$(this).fadeOut("250", function () {
$(this).remove();
})
}
);
}
This won't work with the custom explode animation you defined for hiding the tooltip though so I've had to remove that and it will just fade out:
/*hide: {
effect: "explode",
delay: 5
},*/
You will then need to add the following code to allow the tooltip to display HTML but please be aware that you are potentially opening your site up to an XSS Vulnerability by doing this:
content: function () {
return $(this).prop('title');
},
See here for a fiddle

JqueryUI Tooltip on modal button re-appears on modal close

Hi there StackOverflowvians!
I'm learning to Javascript and JQuery and I've got a connundrum I'm not solving very well. I've used JqueryUI tooltips on some buttons. The tooltip uses the following code to display. I realize that my structure and organizational skills with regards to code suck, and there's probably a million more efficient ways to do what I'm doing, but bear with me - This is quite literally my first attempt at any kind of javascript.
$(function() {
$("#button-menu").tooltip({
position: {
my: "top",
at: "bottom+10",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" ).addClass( "arrow" ).addClass( "top" ).appendTo( this );
}
}
});
$("#button-menu").tooltip({ hide: { effect: "fadeOut", duration: 100 }, show: { effect: "fadeIn", duration: 100 }});
});
So I'm calling a tooltip when you hover on the buttons, it's pretty and does what I want. A couple of the buttons when you click them lead to Modal Dialog windows. If one clicks a.search, one gets a modal dialog window with a search form. If one decides to simply close the modal window, it closes and whatnot. I note that when the modal is open, the tooltip closes and the state of the button returns to unfocused. When I close the Modal, the tooltip returns as if I'm hovering on the button - no matter where my mouse is positioned.
I tried to call blur on close for the button item for all buttons in the div, but to no avail. I might try setting a timeout on that function next, because somewhere the tooltip function is re-instating the aria-tooltip class after the button close event and I suppose if I can wait it out I can close it after it opens, but that feels sloppy. The code below was my interpretation of the correct way to call a dialog and close the tooltip for the button on dialog close, but it doesn't do what I think it should. The tooltip still re-appears
$(function() {
$( "#searchform" ).dialog({
modal: true,
autoOpen: false,
close: function( event, ui ) {$('a.search').blur();},
show: {
effect: "fade",
duration: 500
},
hide: {
effect: "fade",
duration: 1000
}
});
$( "a.search" ).click(function() {
$( "#searchform" ).dialog( "open" );
});
});
edit: I suppose I should ask the question - why is this behavior happening, and is there something I can do identify how that tooltip is firing, or just stop it from reappearing when I close the modal?
The Dialog widget has an open() event. I'd be inclined to us it to disable tooltips (like so), and re-enable them on close() by naming your init function and calling it.
Something like:
$('.dialogSelector').dialog({
open: function( event, ui ) {
$('.tooltipSelector').tooltip('disable');
}
});
$('.dialogSelector').dialog({
close: function( event, ui ) {
$('.tooltipSelector').tooltip();
// OR
myTooltipFunction();
}
});
I was having the same problem. What solved it for me was adding an 'Ok' buton
$("#dialog").dialog({
resizable: false,
autoOpen: false,
height: 200,
width: 440,
modal: false,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});

jQuery - cannot call methods on dialog prior to initialization

This one is really bugging me. I'm getting an error in my console of Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
$( function() {
$('#search_all_notes_input').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
/* Make the Search div a button and open dialog on click */
$( "#search_all_button" ).button().click(function() {
$( "#search_all_notes_input" ).dialog( "open" );
});
});
$('#submit_search_all_button').click( function () {
var searchText = $('#search_all_text').val();
var query = location.search.split('=');
var urlMrn = query[1];
formData = { mnr: urlMRN, search_text: searchText };
console.log(formData);
//$.post('note_search.php', formData, getMatchedNotes(data));
$(this).dialog('close');
});
Any ideas? I'm using a button element inside my dialog div instead of a custom dialog button. Also, the script is loaded at the very end of my HTML page
The problem is you're calling the dialog('close') on the #submit_search_all_button button, not the #search_all_notes_input element that you originally created a dialog on.
Instead of $(this).dialog('close');, use this:
$('#search_all_notes_input').dialog('close');

Dynamically choosing the close effect on a jquery-ui-dialog

I'm using this dialog:
$("#myDialog").dialog({
hide: {effect: "fade", duration: 3000},
buttons: {
Save: function() {
$.post(someurl, function() {
$("#myDialog").dialog( "close" );
});
},
Cancel: function() {
$("#myDialog").dialog( "close" );
}
}
});
I have two close actions that are different semantically:
Close after success - in this case I want to slowly fade out the dialog (I'm also displaying a green Vee icon, not shown in the above code snippet).
Close after cancel - I would like to immediately make the dialog disappear, the fade effect doesn't fit here IMO.
The above code just uses .dialog("close") in both cases, so of course both cases get the same fade out effect.
What's the best way to achieve instant close on the second case, while retaining the slow fadeout in the first?
Edit: I also want clicking ESCAPE to have the exact same effect as the Cancel button - instant fade out.
The simplest way to do it is:
$("#myDialog").dialog({
hide: null,
buttons: {
Save: function() {
$("#myDialog").dialog("option", "hide", "fade").dialog("close");
},
Cancel: function() {
$("#myDialog").dialog("close");
}
},
close: function(e) {
$("#myDialog").dialog("option", "hide", null);
}
});
Just set the hide option in both case:
$("#myDialog").dialog({
buttons: {
Save: function() {
$("#myDialog").dialog("option", "hide", "fade").dialog("close");
},
Cancel: function() {
$("#myDialog").dialog("option", "hide", null).dialog("close");
}
},
beforeClose: function(event, ui) {
if (event.which === 27) {
$("#dialog").dialog("option", "hide", false);
}
}
});
DEMO
For your "Close after success" case you could just issue
$('.ui-dialog').fadeOut(5000);
This is how I used the above:
$('input').keypress(function () {
if ($(this).val() === "") { //works on 1st char you type
$('.ui-dialog').fadeOut(5000);
}
});
Also, instead of just open, you'd need:
myDlg.dialog('close').dialog('open');

Categories

Resources