I need to set an alert nice message box via Jquery-UI
and then after the effects of the animation is done , and only then
to navigate to a different URL
This is the code I am using though no matter what I did try
the navigation occurs... only the UI effects does not get the chance to perform.
$("#dialog").dialog({
show: { effect: "puff", duration: 2000 },
hide: { effect: "explode", duration: 500 },
height: 340,
width: 400,
modal: true,
buttons: {
"אישור": function () {
$(this).dialog("close").delay(2000).delay(800, function () {
window.location = "http://rcl.co.il";
});
}
}
});
Try bind redirect function on dialogclose event.
http://jsfiddle.net/tarabyte/tDFq3/
$("#dialog").dialog({
show: { effect: "puff", duration: 2000 },
hide: { effect: "explode", duration: 500 },
height: 340,
width: 400,
modal: true,
buttons: {
"אישור": function () {
$(this).on('dialogclose', function () {
window.location = "http://rcl.co.il";
}).dialog('close');
}
}
});
Related
I am using the JQuery slides that you can find here http://www.slidesjs.com/examples/standard/
but the fade effect is not working on play, only on navigation !
<script>
$(function() {
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: {
fade: {
speed: 1000
}
}
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
});
</script>
I also tried to remove the speed from the first part of your code will get the fade working on initial play.
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: "fade"
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
I've made this work. Per the docs, you can set the effect property for play to a string.
Check out the jsfiddle: https://jsfiddle.net/cale_b/5ac1cebL/
$(function() {
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 500,
// within the play property, effect should be a string, i.e. "fade"
effect: "fade"
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
});
Removing the speed from the first part of your code will get the fade working on initial play.
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: "fade"
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
I am using the script below for Modal Dialog box.I have a textbox and a button under dialog box div but when i click on button textbox value remains null why ? Can anyone help please
//Everything is working fine but textboxes are losing their values on button click
$("#dialog").dialog({ modal: true });
$("#dialog").dialog({ resizable: false });
$("#dialog").dialog({
buttons: {
//'Confirm': function () {
// $("[id*=btn_Confirm_View]").click();
//},
'Cancel': function () {
$(this).dialog('close');
}
}
});
$("#dialog").dialog({ draggable: false });
$("#dialog").dialog({ closeOnEscape: false });
$("#dialog").dialog({
width: 'auto',
autoOpen: false,
show: {
effect: "blind",
duration: 1500
},
hide: {
effect: "scale",
duration: 300
}
});
$("#dialog").dialog({
close: function (event, ui) {
}
});
//Everything is working fine but textboxes are losing their values on button
I got the solution ... :)
Here is my Modified Code...
// $("#dialog").dialog({ modal: true });
$("#dialog").dialog({ resizable: false });
$("#dialog").dialog({
buttons: {
//'Confirm': function () {
// $("[id*=btn_Confirm_View]").click();
//},
'Cancel': function () {
$(this).dialog('close');
}
}
});
$("#dialog").dialog({ draggable: false });
$("#dialog").dialog({ closeOnEscape: false });
$("#dialog").dialog({
width: 'auto',
autoOpen: false,
show: {
effect: "blind",
duration: 1500
},
hide: {
effect: "scale",
duration: 300
}
});
//I Added these two lines and now they are working fine
$("#dialog").parent().appendTo(jQuery("form:first"));
$("#dialog").dialog({
close: function (event, ui) {
}
});
I'm trying to call javascript function from jquery dialog buton, but it is not working
my code :
============================
$('#dialogAddActe').dialog({
autoOpen: false,
modal: true,
width: 800,
height:400,
show: "slide",
hide: "slide",
buttons: {
"Suivant": function() {
$(this).dialog("close");
if ($(this).checkNombre())
{
document.forms[0].dispatch.value = "ajouterActe";
document.forms[0].submit();
}
},
"Annuler": function() {
$(this).dialog("close");
document.forms[0].patientId.value="";
}
}
});
============================
$(this).checkNombre() is not working.
BR,
Med Baba
Remove $(this), just use if (checkNombre()).
For the last few hours I've been trying to have an animated dialog that will initiate a puff animation, is draggable and when closed will center again when opened. As of now I have it so the animation initiates, it's draggable but when I close and open it, it's fixed in the same position it was dragged to.
I've tried using the open function, complete function in show/hide, setting the div/dialog in a function, using position: center and yeah...
Anyway, here is the code:
frm_location.jsp:
//this is in an "a" tag, can't seem to get it to display properly
id="NEW_LOCATION_BUTTON" href="javascript:openDialog('#dialog-form','#popupBoxCancel','orange-theme','625');" class="btn_sel">
jQueryDialog.js:
function openDialog(_dialog, _cancel, _theme, _size) {
jQuery(document).ready(function ($) {
$(_dialog).dialog({
autoOpen: true,
width: _size,
modal: true,
position: "center",
resizable: false,
draggable: true,
dialogClass: _theme,
show: {
effect: "puff",
percent: "-150",
duration: 250
},
hide: {
effect: "puff",
percent: "-150",
duration: 250,
},
});
$(_cancel).click(function() {
$(_dialog).dialog("close");
});
}
Take a look at this. I'm not sure how you're reopening the dialog, but this should do. jsfiddle code
<div id='dialog'>PUFF</div>
<button id='reopen'>OPEN DIALOG</button>
$(function () {
$('#reopen').click(function () {
$( "#dialog" ).dialog({ position: 'center'});
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: true,
width: 200,
modal: true,
position: "center",
resizable: false,
draggable: true,
show: {
effect: "puff",
percent: "-150",
duration: 250
},
hide: {
effect: "puff",
percent: "-150",
duration: 250,
},
});
});
Using dialog it is possible multiples effects at same time? For example, in show, bounce and highlight.
I tried {effect: 'bounce', duration: 550, effect: 'highlight', duration: 550}, but only the last effect runs.
$('.modal').click(function () {
$(".dialog-modal").dialog({
modal: true,
hide: "fadeOut",
show: {effect: 'bounce', duration: 550, effect: 'highlight', duration: 550},
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
The amount of time I just spent on this makes 0 sense. And I still didn't get the result I wanted.
But this should at least help you on your way. Check da fiddle
jQueryUI:
$(document).ready(function () {
var $dlg = $('.dialog-modal');
var $mdl = $('.modal');
$dlg.dialog({
autoOpen: false,
modal: true,
dialogClass: 'sweetums',
hide: "fadeOut",
show: {
effect: 'bounce',
duration: 550
},
buttons: {
Ok: function () {
$dlg.dialog("close");
}
}
});
var $newDialog = $('.sweetums');
$mdl.click(function () {
$dlg.dialog('open');
$newDialog.effect("highlight", 550);
});
});
HTML:
<button class="modal">Click</button>
<div class="dialog-modal">some stuff</div>
If you're wondering why I made a second object for $newDialog it's because the old one was originally a div and text but when the modal is made, it expands and adds buttons. $dlg would only do the effect on the text itself and not the box as a whole, so wrapping the whole thing was necessary.