Every time I ask a question here, no matter how dumb it is, I do always learn something.
Anyway, I'm hoping to get some more good answers to this one.
I'm calling a jquery plugin for a modal on document.ready
<script>
$(document).ready(function() {
// Initialize the plugin
$('#JPO').popup({
absolute: false,
autoopen: true
});
$.fn.popup.defaults.pagecontainer = '#page'
});
</script>
it auto opens a modal but I only want the modal to open after either a user scrolls down 400px, or after being on the page for 5 seconds, or on exit (exit intent).
This is the jquery plugin I'm using: https://dev.vast.com/jquery-popup-overlay/
Thanks so much in advance!
use setTimeout() function.
Read More about setTimeout
Sample Code:
setTimeout(
function()
{
//do something special
}, 5000);
I used a combination of setTimeout, and onmouseleave to create my popup.
<script>
function openPopup(){
$('#JPO').popup({
autoopen: true,
detatch: true,
transition: 'all 1.0s'
});
};
function exitPopup(){
$('#JPO').popup('show');
};
function cookiePopup(){
$('#JPO').popup({
autoopen: false,
detatch: true,
transition: 'all 1.0s'
});
};
$(document).ready(function(){
$('.modal-content').hide();
var dialogShown = Cookies.get('dialogShown');
if (!dialogShown) {
setTimeout(openPopup, {{ section.settings.delay }});
$(document).mouseleave(function(){
setTimeout(exitPopup,1050)
});
Cookies.set('dialogShown', 1, { expires: 1 });
}
else {
setTimeout(cookiePopup, {{ section.settings.delay }});
}
});
</script>
I also used a plugin called js-cookie to make my pop-up less annoying to repeat visitors.
PS. this is for a shopify section, so it does contain some liquid.
Plugins used:
PopUp https://dev.vast.com/jquery-popup-overlay/
Cookies https://github.com/js-cookie/js-cookie/tree/v1.5.1
Related
My problem is javascript not wait for file selection dialog closing.
I have just found an solution that we declare a onChange event for element. So onChange event work right, but script still run before onChange event. They a asynchronous.
I think may be there is a way to check if there is any dialog opening ?
Please help me, 2 day of mine :)
If you want to call back method after dialog is completely opened, you can use using jQuery Promise object as mentioned in this answer:
$("#dialog").dialog({
show: {
effect: "drop",
direction: "up",
duration: 1000
},
hide: {
effect: "drop",
direction: "down",
duration: 1000
},
open: function () {
$(this).parent().promise().done(function () {
console.log("[#Dialog] Opened");
});
},
close: function () {
$(this).parent().promise().done(function () {
console.log("[#Dialog] Closed");
});
}
});
Here is the usual JSFiddle Demo: http://jsfiddle.net/losnir/jcmpm/
I have a popup window using fancybox which I would like to add some timings to, show after 1 second maybe and disappear after 5. I cant figure out where to add any delays in the code i am using, please can anyone help?
<script type="text/javascript">
jQuery(document).ready(function ($popup) {
$popup("#hidden_link").fancybox({
onComplete: function () {
$popup("#fancybox-img").wrap($popup("<a />", {
href: "mylink.html",
target: "_blank",
// delay: 9000 would like a delay ideally
}));
}
}).trigger("click");
});
</script>
<a id="hidden_link" href="images/myimage.jpg" style="visibility:hidden;"></a>
You can use $.fancybox.open(), see details here - Can you explain $.fancybox.open( [group], [options] ) params and if I can add youtube link as href?, and $.fancybox.close().
setTimeout(function(){
$.fancybox.open(...)
}, 1000);
setTimeout(function(){
$.fancybox.close(...)
}, 5000);
If your link is not going to be visible, you may rather open fancybox programmatically using the $.fancybox.open() method and close it using the $.fancybox.close() method.
As pointed out, you could use setTimeout() to delay the execution of either those methods like :
jQuery(document).ready(function ($popup) {
// open with delay
setTimeout(function () {
$popup.fancybox({
href: 'images/image01.jpg',
onComplete: function () {
$popup("#fancybox-img").wrap($popup("<a />", {
href: "mylink.html",
target: "_blank"
}));
// close with delay
setTimeout(function () {
$popup.fancybox.close();
}, 9000); // setTimeout close
}
});
}, 2000); // setTimeout open
}); // ready
See JSFIDDLE
Note: this is for fancybox v1.3.4.
I have a mobile site already, and what I want to do is add an image that shows up when you hit the page for 5 seconds. Once 5 seconds has passed it just disappears and you're at the homepage.
Is this possible for an android device? Is there a way to make the image display on the entire screen?
Thanks!
It's easier with jQuery. You can style a div to be your splash page and set a function to run when the page is loaded. After the 5 second duration, you can hide the div.
It could possibly look something like this:
$('div.introDiv').animate( {
opacity: 'toggle' // if div is hidden, it will fade in
},
{
duration: 5000, // in ms
complete: function () {
$('div.introDiv').animate(
{
opacity: 'toggle' // div will fade out
},
{
duration: 5000, // 5 seconds
complete:function () {
// hide div and show main content
}
})
}
}
);
This isn't the only way to do this, but it works.
Try something like...
<body onload="redirectMobile()">
var redirectMobile = function() {
setTimeout(function(){
window.location = 'http://www.google.com/';
},5000);
};
or skip the function and do...
<body onload="setTimeout(function(){window.location = 'http://www.google.com/'},5000)">
Like the previous answer said, jquery or another way might be easier, but this should work with pure javascript.
i am using the magnific Popup Plugin (http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup)
May i put my code in here first:
$(document).ready(function() {
$('.open-popup-link').magnificPopup({
// Delay in milliseconds before popup is removed
removalDelay: 600,
// Class that is added to popup wrapper and background
// make it unique to apply your CSS animations just to this exact popup
mainClass: 'mfp-fade',
type:'inline',
midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.,
callbacks: {
beforeOpen: function() {
if($(".image-container img").attr("title") != "" && $('.image-container img').length > 0){
if ($('.imagetitle').length > 0) {
// it exists
}else{
$(".image-container").append("<span class='imagetitle'>"+$(".image-container img").attr("title")+"</span>");
$(".image-container span.imagetitle").css({
"left": $(".image-container img").position().left+"px",
"margin-top":10+"px",
"margin-bottom":10+"px"
});
}
}
//Make it a Gallery! - Whoop Whoop
if($("div.white-popup").length > 1){
$("div.white-popup").append("<div class='popupgalleryarrowleft'> </div>");
$("div.white-popup").append("<div class='popupgalleryarrowright'> </div>");
}
},
open: function(){
// Klick Function für die Gallery einbauen!
$(".popupgalleryarrowleft").click(function(){
$.magnificPopup.instance.prev();
});
$(".popupgalleryarrowright").click(function(){
$.magnificPopup.instance.next();
});
}
}
});
});
So i want to have an inline gallery. It works everything fine, but this part doesnt:
// Klick Function für die Gallery einbauen!
$(".popupgalleryarrowleft").click(function(){
$.magnificPopup.instance.prev();
});
$(".popupgalleryarrowright").click(function(){
$.magnificPopup.instance.next();
});
I am just trying to get the next instance, when there is one. When i am running this code via firebug on runtime, it works!
Can anyone help me with this? Hopefully.
Greetings David
was looking for the same thing.
I think here what you are looking for http://codepen.io/anon/pen/kInjm
$('.open-gallery-link').click(function() {
var items = [];
$( $(this).attr('href') ).find('.slide').each(function() {
items.push( {
src: $(this)
} );
});
$.magnificPopup.open({
items:items,
gallery: {
enabled: true
}
});
});
I needed to create a custom navigation for galleries, so I played with using $.magnificPopup.instance.next();. It does work when put into a click handler for a gallery.
Otherwise, there is no "next instance" to find because it doesn't exist yet.
This will navigate to the next gallery image when clicking on bottom/title bar (see it on codepen):
$('.gallery').magnificPopup({
type: 'image',
gallery: {
enabled: true
}
});
$('.gallery').click(function() {
$('.mfp-bottom-bar').click(function() {
$.magnificPopup.instance.next();
});
return false;
});
And here's a more complete example on Codepen, with multiple galleries.
This one also adjusts for the height of the custom navigation and padding in the popup, using callbacks. Useful because the navigation button in my project had significant height and was being cut off by the bottom of the screen. (By default, only the image height itself is used to calculate how the popup fits in the viewport.)
Hope this is useful to someone. I know the question was two years ago, but maybe others will also find it by Googling, like I did.
I am using JQuery idleTimeout plugin from here :
http://www.erichynds.com/examples/jquery-idle-timeout/example-mint.htm
It worked fine when I imlemented in my code, but whenever I launch my page it refreshes 5 times everytime so I checked by removing idleTimeout code. And then it was not giving this issue.
After going into detail, I found if I remove or comment "pollingInterval:2" line of code, everything works fine, the refresh issue reolves and the TimeOut functionality still works.
Can someone help me understand what pollingInterval:2 is actually doing.
Here is the code from Plugin
JS:
<script type="text/javascript">
// setup the dialog
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 400,
height: 210,
closeOnEscape: false,
draggable: false,
resizable: false,
buttons: {
'Yes, Keep Working': function () {
$(this).dialog('close');
},
'No, Logoff': function () {
// fire whatever the configured onTimeout callback is.
// using .call(this) keeps the default behavior of "this" being the warning
// element (the dialog in this case) inside the callback.
$.idleTimeout.options.onTimeout.call(this);
}
}
});
// cache a reference to the countdown element so we don't have to query the DOM for it on each ping.
var $countdown = $("#dialog-countdown");
// start the idle timer plugin
$.idleTimeout('#dialog', 'div.ui-dialog-buttonpane button:first', {
idleAfter: 600,
pollingInterval: 2, //<--- THIS IS CAUSING ISSUE
serverResponseEquals: 'OK',
onTimeout: function () {
window.location = "/Home/Index/";
},
onIdle: function () {
$(this).dialog("open");
},
onCountdown: function (counter) {
$countdown.html(counter); // update the counter
}
});
</script>
The Dialog box it generates,
<!-- Session Time Out Message box -->
<div id="dialog" title="Your session is about to expire!">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>You will be logged off in <span id="dialog-countdown" style="font-weight: bold"></span>seconds. </p>
<p>Do you want to continue your session?</p>
</div>
Here are the 2 Jquery which needs to be added:
http://www.erichynds.com/examples/jquery-idle-timeout/src/jquery.idletimer.js
http://www.erichynds.com/examples/jquery-idle-timeout/src/jquery.idletimeout.js
Let me know if you need any other information!
PLEASE SUGGEST!
I was able find the solution to my issue so thought of sharing it:
The problem was that I was missing a line of code: keepAliveURL: '/Home/KeepAlive'
$.idleTimeout('#dialog', 'div.ui-dialog-buttonpane button:first', {
idleAfter: 600,
keepAliveURL: '/Home/KeepAlive',
pollingInterval: 2,
serverResponseEquals: 'OK',
onTimeout: function () {
window.location = "/Home/Index/";
},
onIdle: function () {
$(this).dialog("open");
},
onCountdown: function (counter) {
$countdown.html(counter); // update the counter
}
});
As per this line, I am returning a message "OK" as "serverResponseEquals: " was looking for a response "OK". My code is in MVC so under "Home" Controller I created a ContentClass which returns "OK":
public ContentResult KeepAlive()
{
return Content("OK");
}
And it worked, my page stopped refreshing!
Thanks to all for looking into the issue!