Creating a popup box that pops ip after 3 seconds - javascript

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

Related

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

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);
});

How to switch between different window.locations depending on answer to window confirm() method

I have a page that presents a test, where javascript sets a timeOut to abandon the page if the user waits too much (180") before giving an answer and pressing submit.
It has to be done for various reasons, and I cannot modify the committment.
After 180" on the page, so, currently the code goes back to a beginningpage.php where the user will have to re-enter its unique ID to continue the test.
This is the simple javascript code:
setTimeout(function () {
window.location.href= "beginningpage.php";
}, 180000);
Everything runs smooth. Now I need to modify the code to better manage the case. We assume that if the user has gone away, it will not be able to answer to an alert box. So let's say we push a confirm() after those 180".
How to write code so that - when the confirm() windows is displayed - if nobody clicks a confirm button (for let's say 30") the code automatically close the confirm window and leaves the page going back to beginningpage.php?
Otherwise, if the user is still at his desk and is simply wondering about the answer to give, he must be given the possibility to click "ok, I hurry up" to remain on the page for say another 60". That means that after the first displaying of the confirm window, the timeout must be set to a different deadline, not 180000 as before but 60000.
Maybe the idea of using different window.locations.href is not the right one.
How could be the code to accomplish everything I need as above explained?
Just don't use a confirm box... Show a div with two buttons after 180 seconds and then start counting your 30 seconds.
So let's say we push a confirm() after those 180".
How to write code so that - when the confirm() windows is displayed - if nobody clicks a confirm button (for let's say 30") the code automatically close the confirm window and leaves the page going back to beginningpage.php?
You can't. confirm, alert, and promopt are 1990s holdovers with stop-the-world behavior. (Mostly. Browsers are eroding that slowly over time.) That means none of your JavaScript code can run while the archaic window is showing.
Instead, switch to using modern alerting techniques (showing a "modal" div, etc.) so that your JavaScript code can use setTimeout to give up after the relevant amount of time.
You can never achieve this with alert or confirm because they block further js execution till the popup is active.
You need a custom modal with html element and a js function
All you have to do is call clearTimer for auto-page reload based on the response from custom confirm modal.
var x = document.getElementById("stopReloadBtn")
var reloadTimer
setTimeout(function() {
x.style.display = "block"
reloadTimer = setTimeout(function() {
window.location.href = "beginningpage.php"
}, 5000)
}, 5000);
function stopReload(){
clearTimeout(reloadTimer)
x.style.display = "none"
}
<button id="stopReloadBtn" style="display: none" onclick="stopReload()">Still Here?</button>
I have reduced the timers to 5 sec in this code. A button will appear after 5 sec. After which you will have 5 sec to click this button else the page will reload.

Protractor wait for modal-dialog

How do I get Protractor to wait for a modal-dialog pop up?
Background: After clicking a button protractor should wait for a modal dialog to pop up (and get the time right when the button is clicked and when the dialog pops up). How can I do that? With browser.wait()?
The reason is, I have to do End-to-End tests and measure the time the user experiences between clicking the button and getting a feedback from the website.
When I do the test manually, it can take between 5 and 30 seconds for the website to give a feedback. How do I get protractor to wait and then read out the dialog that shows up at the top of the page?
So, you need to measure the time difference between the clicking of button and the time the modal-dialogue window comes up.
Get the Time after button click
//you can use any selector for clicking the button
element(by.buttonText("button_text_for_thebutton").click();
//getting the time
var buttonClickTime = new date();
Use the expected conditions inside of your browser.wait() to wait for the modal-dialog to pop up
//you can use any other locator for modal window
browser.wait(EC.presenceOf(element(by.css('css_locator_formodal'))), 1000, 'Unable to find the modal-popup');
//get the time post Modal dialog appearance
var ModalDialogTime = new date();
Then get the difference between buttonClickTime and ModalDialogTime using
var timeDifference = ModalDialogTime.getTime() - buttonClickTime.getTime();
Note : Expected conditions code is taken from #alexce answer in this SO post.
After hours of research, I found a very useful script: waitReady.js.
This is my working solution now.
I also added functionality that the script also prints out the text of the modal-dialog.
it('Should wait until modal-dialog pops up', function() {
var dialog = element(by.className('modal-dialog'));
expect(dialog.waitReady()).toBeTruthy();
var dialogtext = element(by.className('modal-body-content'));
expect(dialogtext.waitReady()).toBeTruthy().then(function () {
dialogtext.getText().then(function (text) {
console.log('Button Text: ' + text);
});
});
});

PHP Calculator - Show results on page and in Ajax Popup

UPDATE - this was solved by adding $('.popup-with-form').magnificPopup('open'); to the StateChanged function in the JS. Thanks to #Bollis.
Original Question:
I have a simple calculator here: http://www.roofingcalculator.org/popup/popup.htm
when click on "Calculate" button, i need results to be displayed on that page AND initiate Ajax Popup (Magnific inline) with results displayed in popup as well.
Question: How do i make it so that pressing "calculate" button would both of these at the same time:
1) display results on page
2) Launch pupup with results of calculator
Right now, to show Popup, user needs to click on the link "Open Form".
If you open popup AND don't click "calculte" button, no results are displayed.
If you click Calculate first and then open popup, results are shown on both the page and in popup (see image).
The two things that initiate popup are:
<a class="popup-with-form" href="#test-form">
If i add class="popup-with-form" and href="#test-form" to the Calculate button, it launches popup, but no calculation is done.
All codes for calculator (JS / PHP) can be seen here.
Here is AJAX code that opens popup (i think)
$(document).ready(function() {
$('.popup-with-form').magnificPopup({
type: 'inline',
preloader: false,
focus: '#name',
// When elemened is focused, some mobile browsers in some cases zoom in
// It looks not nice, so we disable it:
callbacks: {
beforeOpen: function() {
if($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
}
}
});
});
Try adding onsubmit="openPopupFunctionHere()" to your form tag. The onsubmit event will be triggered whenever the form should submit, which happens when you press the "Calculate" button.

Call javascript during modalpopup.show()

I have a javascript that disables a button for x seconds and then enables the button after x seconds pass. An update button checks for certain constraints, and if met, a modal popup is shown. The button the javascript is meant for is located in a panel displayed by this modal popup. Is there a way I can execute the javascript when the modal popup / panel is shown?
You can use the following approach if you want to run JavaScript code when a modal popup is showing:
$find("myModalPopupExtender").add_showing(function() {
alert("Modal popup will be shown.");
});
The alert will be shown each time the modal popup extender shows the popup.

Categories