I'm trying to use lightbox_me as a message alert but, I'm having some problems getting the element to close after a few seconds. Is this possible?
Here's my code
$('#message').lightbox_me({
centered: true,
closeSelector: "#close-message",
overlayCSS:{background: 'black', opacity: .8},
onLoad: function() {
$('#message').find('input:first').focus()
$ele.lightbox_me();
}
});
Ended up using this after help from Dunli, thanks
// test message
$('#message').lightbox_me({
centered: true,
overlayCSS:{background: 'black', opacity: .8},
onLoad: function() {
$('#message').find('input:first').focus()
setTimeout(lightbox, 5000);
function lightbox() {
$('#message').trigger('close');
}
}
});
Try this:
setTimeout(function(){
$('#lightbox_elem_id').trigger('close');
}, seconds*1000);
Related
I have a modal Window which pops up and wait for 5 seconds and then closes.
The code is as follows
function callMe()
{
//alert("entering");
$("#dialog").dialog({
modal: true,
//title: "Confirm",
resizable: false,
width: 300,
height: 150,
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
buttons: {
Ok: function () {
// $(this).dialog("close"); //closing on Ok
},
Cancel: function () {
// $(this).dialog("close"); //closing on Cancel
}
}
});
alert("Some Text");
}
callMe() function is called on load of the HTML file. Here I want to show the alert message "Some Text" after the modal window closes in 5 second. But every time when I run this it shows both the modal window and alert box together. I want the modal window to display first , wait for 5 sec and then show the alert box.I tried using sleep but its still coming the same way.
You have 2 options
function callMe()
{
//alert("entering");
$("#dialog").dialog({
modal: true,
//title: "Confirm",
resizable: false,
width: 300,
height: 150,
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
buttons: {
Ok: function () {
// $(this).dialog("close"); //closing on Ok
},
Cancel: function () {
// $(this).dialog("close"); //closing on Cancel
}
},
close: function(){
alert("Some Text");
}
});
$('#dialog').on('dialogclose', function(event) {
alert('Some Text');
});
}
USE "close" method
use on dialogueClose event both examples are given in code above
It would be nicer if you can tell us what plugin you use for the dialog. I'm guessing the dialog has a close option that accepts a function. So try this:
...
open: function (event, ui)
{
setTimeout(function () { $("#dialog").dialog("close");}, 5000);
},
close: function() {
alert("Some Text");
},
...
You can put the alert inside the setTimeout, just after you close the window.
JAVASCRIPT
open: function (event, ui)
{
setTimeout(function () {
$("#dialog").dialog("close");
alert("Some Text");
}, 5000);
},
I want to create one customized confirm box in jQuery with two buttons(OK , Save)
If user press OK, two javascript functions in order should be called and executed, if user press Save just one js function should be called.
Now my question:
how can I call one js function inside the dialoge of confirm box.
this is my code
$('<div></div>').appendTo('body')
.html('<div><h6>If you Click on OK,you willaccept modifications and close the activity, click on Save means: only acceptance without closure the activity?</h6></div>')
.dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
OK: function () {
f1(); // How can I call it...my question is from syntax problem
f2(); // How can I call it...my question is from syntax problem
$(this).dialog("close");
},
Save: function () {
f1(); // How can I call it...my question is from syntax problem
$(this).dialog("close");
}
}
});
as you maybe understand my problem is syntax of this calling.let me tell you f1() and f2() are two javascript function which have defined and implemented.
Thanks in advance
Now I have another Question from this dialog..I want to get response from this dialoge...Let me copy my code maybe in this way you can understand more.
$('<div></div>').appendTo('body')
.html('<div><h6><fmt:message key="message" /></h6></div>')
.dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
OK: function () {
close='yes';
arg="&accept_op_id="+op_id+"&tat="+tat+"&acdd="+acdd+"&ente="+ente+"&fdd="+fdd+"&aed="+aed+"&add="+add+"&close="+close;
openSched('piano',arg,'non_sched');
},
Save: function () {
close='no';
arg="&accept_op_id="+op_id+"&tat="+tat+"&acdd="+acdd+"&ente="+ente+"&fdd="+fdd+"&aed="+aed+"&add="+add+"&close="+close;
openSched('piano',arg,'non_sched');
}
}
});
I want to say: if user clicked on OK,one variable which is called 'close' is assigned yes and then one function (openSched()) will be called with this close value....If user clicked on Save , close =no
How can I do that...do you see one syntax problem??
Thanks in advance for your help
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
modal: true, title: 'message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
OK: function () {
f1();
f2();
$(this).dialog("close");
},
Save: function () {
f1();
$(this).dialog("close");
}}
});
$('#dialog').dialog('open');
});
function f1()
{
alert("f1 called");
}
function f2()
{
alert("f2 called");
}
<div id="dialog"><h6>If you Click on OK,you willaccept modifications and close the activity, click on Save means: only acceptance without closure the activity?</h6></div>
Try like this
Working Demo
$("<div></div>").appendTo("body").html("<div title='You Title here' class='newDiv'><h6>If you Click on OK, you will accept modifications and close the activity, <br/><br/> Click on Save means: only acceptance without closure the activity?</h6></div>").find(".newDiv").dialog({
dialogClass: "no-close",
buttons: [{
text: "OK",
click: function () {
fnOnOkay();
$(this).dialog("close");
}
}, {
text: "Save",
click: function () {
fnOnSave();
$(this).dialog("close");
}
}]
});
function fnOnOkay() {
fnOne();
fnTwo();}
function fnOnSave() {
console.log("Call one on save clicked");}
function fnOne() {
console.log("Call one on OK clicked");}
function fnTwo() {
console.log("Call Two on OK clicked");}
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 = { };
Following code, but it is not working.
$('#img').on('click', function () {
$("#new").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("_new", "Help")');
},
buttons: {
"Add User": function () {
addUserInfo();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
I have a partial view name _new in Help Folder Under Views.
Can someone guide me too achieve it. I am using MVC4 framework :)
You have to move the click to the anchor (a) instead of the img. The click event will never reach the img.
See jsfiddle.
I Load this way:
$('.selector').each(function(){
$(this).qtip({
content: { url: '/qtip.php?'+$(this).attr('rel')+' #'+$(this).attr('div'), text:'<center><img src="/images/loader.gif" alt="loading..." /></center>' },
show: { delay: 700, solo: true,effect: { length: 500 }},
hide: { fixed: true, delay: 200 },
position: {
corner: {
target: 'topRight',
tooltip: 'left'
}
},
show: {
// Show it on click
solo: true // And hide all other tooltips
},
style: {
name: 'light',
width: 730,border: {
width: 4,
radius: 3,
color: '#5588CC'
}
}
});
});
And that looks like if there is a thelay cause of the effect. but qtip.php it's loaded with no delay which is what I really want (to reduce unneeded requests)
Can I delay 300ms before loading qtip.php?
You could set it to use a custom event, then trigger the event after a timeout. The hoverIntent plugin might help, if you want to wait until the mouse stops.
Using hoverIntent:
$(selector).hoverIntent(function() {
$(this).trigger('show-qtip');
}, function() {
$(this).trigger('hide-qtip');
}).qtip({
// ...
show: {
when: { event: 'show-qtip' }
},
hide: {
when: { event: 'hide-qtip' }
}
});
If you want to make hoverIntent wait longer before triggering, you can give it a configuration object with an interval property:
$(selector).hoverIntent({
over: showFunction,
out: hideFunction,
interval: 300 // Don't trigger until the mouse is still for 300ms
});
Without a plugin (I haven't tested this):
(function() { // Create a private scope
var timer = null;
var delay = 300; // Set this to however long you want to wait
$(selector).hover(function() {
var $this = $(this);
timer = setTimeout(function() {
$this.trigger('show-qtip');
}, delay);
}, function() {
if (timer) {
clearTimeout(timer);
}
}).qtip({
// ...
show: {
when: { event: 'show-qtip' }
}
});
})();
Here I just created another param and it's more simple to use, I have tested this in qtip1(not sure about qtip2)
$('.qtip').qtip({
show: {
when: 'mouseover',
//customized param, when 'mouseout' the qtip will not shown and delay will clean
cancel : 'mouseout',
delay: 500
}
});
To add this param, you need to modify the code of function assignEvents() in qtip:
function assignEvents()
{
...
function showMethod(event)
{
if(self.status.disabled === true) return;
// If set, hide tooltip when inactive for delay period
if(self.options.hide.when.event == 'inactive')
{
// Assign each reset event
$(inactiveEvents).each(function()
{
hideTarget.bind(this+'.qtip-inactive', inactiveMethod);
self.elements.content.bind(this+'.qtip-inactive', inactiveMethod);
});
// Start the inactive timer
inactiveMethod();
};
// Clear hide timers
clearTimeout(self.timers.show);
clearTimeout(self.timers.hide);
// line : 1539
// Added code
--------------------------------------------
// Cancel show timers
if(self.options.show.cancel)
{
showTarget.bind(self.options.show.cancel,function(){
clearTimeout(self.timers.show);
});
}
--------------------------------------------
// Start show timer
self.timers.show = setTimeout(function(){ self.show(event); },self.options.show.delay);
};
For qtip2 there is parameter, called show while initializing the plugin, which represents time in milliseconds by which to delay the showing of the tooltip when the show.event is triggered on the show.target.
For example:
/*This tooltip will only show after hovering the `show.target` for 2000ms (2 seconds):*/
jQuery('.selector').qtip({
content: {
text: 'I have a longer delay then default qTips'
},
show: {
delay: 2000
}
});