How to delay background to show after the popup appear and disappear - javascript

I want the popup to show once the page is load. I have made the popup everything working fine I but there is one issue page shows just for a split second before the popup. I want the popup to load first without showing the page.
This is the link of the page http://test2429d.vinnugrunnur.is/home popup has video which runs for 7 second and disappear.

Looking at your sample site, you will have to hide the content and unhide it when you hide the popup.
The reason being your popup is dynamically being added using Javascript. So the popup won't get shown until the page is completely loaded.
There are several ways to do this. If this popup is only limited to this page, you can perhaps use the body class as a reference to hide your .jupiterx-site.
body.elementor-page-10 .jupiterx-site {
display: none;
}
And your Javascript should unhide it after 7 seconds
jQuery(document).ready(function(){
// setTimeout() function will be fired after page is loaded
// it will wait for 5 sec. and then will fire
// $("#successMessage").hide() function
setTimeout(function() {
jQuery('.eael-lightbox-popup-window').fadeOut('slow');
jQuery('.jupiterx-site').show();
}, 7000);
});

Related

Navigation links do not load correctly

I want to open a page studio-x.net.au then after waiting for 5 seconds js setTimeout opens about section of page incorrectly as https://www.studio-x.net.au/#about and in wrong position.
I have tried:
setTimeout("window.location.href=\"#about\";", 5000);
and this
setTimeout(function(){
window.top.location.href="/#about"
} , 5000);
and currently Eric's suggestion
setTimeout(function () {
window.location.replace('#about');}, 5000);
all seem to work to open but does not display as desired.
Are my navigation links the problem? ie. href="#about"
The behavior that I have issue with is when js triggers page opens on https://www.studio-x.net.au/#about in incorrect position.
When you use click on mouse or click on nav, about page opens as intended on the about page and shows only https://www.studio-x.net.au in url,
likewise on other sections such as portfolio, pricing, contact sections showing only https://www.studio-x.net.au in url.
Once triggered the https://www.studio-x.net.au/#about in incorrect position continues possibly cached.
setTimeout(function () {
window.location.replace('#about');
}, 5000);

Creating a popup box that pops ip after 3 seconds

I want to make a popup box, that when a user accesses this site: http://www.isicar.net/ it pops up after 2 seconds. So, no clicking of any buttons invoiced to make the popup box appear
The popup box would act as a n advertisement, for users to sign up via this website: http://isicar.mine.nu/ so it would have to contain a button that redirects them to that URL and one that closes the popup box so they can return to the original page.
Thanks in advance.
Use this in ready or DOMContentLoaded or load callback:
Use setTimeout:
Calls a function or executes a code snippet after a specified delay.
setTimeout(function () {
// Open the popup
}, 2000); // 2 seconds

How can a page be refreshed every 5 secconds only when tab/window has focus?

I have a iframe that I would like to refresh every 5 seconds, but only if the window or tab is active.
I was doing this with META Refresh, but I cant figure out a way to make this conditional to the page being active, so I have tried javascript, but without success. This is what I have tried, but it is not working:
<SCRIPT>
$(window).focus(function(){
setTimeout(function(){
window.location.reload(1);
}, 5000);
});
<SCRIPT>
Am I headed in the right direction, or is there a cleaner way to do this?
You may use the page visibility API and check every 5 seconds the visibility state of your page: if it's not hidden then refresh the page
$(function() {
window.setInterval(function() {
if (!document.hidden) {
window.location.reload(1);
}
}, 5000)
});
where hidden here means
the page content is not visible to the user. In practice this means
that the document is either a background tab or part of a minimized
window, or the OS screen lock is active.

jQuery delay and javascript settimeout won't work with facebook button

I'm using socialite.js to put social buttoms on my page, social buttons are inside div id="social". Div is initially hidden (display: none;).
I'm calling Socialite.load($('#social'));
and nextly want to show this div after some delay,
I tried:
$('#social').delay(4000).fadeIn(400);
and:
timeoutID = setTimeout(function(){ $('#social').fadeIn(400)}, 3000);
It doesn't matter which method I would like to use, IE and FF shows only g+ and twitter buttons, but FB button is missing, Chrome shows all three buttons.
Except without timeout:
$('#social').fadeIn(400);
this works great in every browser.
Any idea, please?
Facebook button won't load if the container div is hidden.
Try this:
Set opacity to 0.0 and after fb button is loaded, change it to 1.0 and then hide div.
Now You can show or hide it whenever you want.
timeoutID = setTimeout(function(){
$('#social').css("display", "none");
$('#social').css("opacity", "1.0");
$('#social').fadeIn(500)
}, 3000);
Is the Facebook button loaded onto the page but just not visible? Like, maybe it's overflowing out of the div?
Have you checked the developer console in IE and FF to see if there are any errors occurring that aren't occurring in Chrome? If the button's not loading on the page at all, that could mean that the JavaScript is stopping before it reaches the point in the code where the FB button is rendered.

Open link in same page and once link is open, execute some code

I have several pop-ups on home page. I open and close them by selecting them with ID and using fadeIn() and fadeOut(). Now I want to open a specific pop-up by clicking on link from another window? For example, if from that new window I click on 'Pop Up 1', I want home page to open and then show 'Pop Up 1'.
I tried using this code below but while writing this code I realized that the script gets reloaded and thus my function of loading a pop-up does not work.
So my question is, is there some elegant solution you could recommend to show element in one page while a link that specifies which element has to be shown is in another?
$("#galleryNav a").on('click', function() {
window.open("/pixeleyes",'_self',false);
setTimeout(function() {
var popToShow = $(this).attr('data-pop');
$(".text-content-outer").hide();
$("#" + popToShow).fadeIn();
}, 5000);
});
One idea might work is
When you are opening a new page using the below line then send some parameter or hash value with it.
window.open("/pixeleyes",'_self',false);
like
window.open("/pixeleyes#openpopup",'_self',false);
Then in the page ready of this page check if the hash exists open the popup otherwise do nothing.
Not sure if this is what you are looking for.
$("#galleryNav a").on('click', function() {
window.open("/pixeleyes#showpopup",'_self',false);
});
showpopup could be anything that you want to open as popup...

Categories