Having a struggle, I have created a Modal Popup for a mail signup however it has become annoying showing everytime on a page load so I am wanting to just show this once per session and no matter how I adjust the script I cannot get this to happen. Please can anyone help?
The code is as follows for the popup:
<script type="text/javascript">
window.onload = function() {
OpenBootstrapPopup();
};
function OpenBootstrapPopup() {
$("#simpleModal").modal('show');
}
</script>
<script>
$('#simpleModal').on('click', 'button.close', function(eventObject) {
$('#simpleModal').modal('hide');
});
</script>
I just want the modal popup to show once per session
Related
I have successfully integrated PayPal Identify/Login but the issue is, the site (my return URL) opens up in the PayPal popup dialogue where the client logged in.
I want the login window to close and then have the main calling window go to the return URL, so the user continues on the main screen.
I can't find any details on how to do this on the PayPal Developer Docs. Is there an option in the button render that I am missing?
Current code:
paypal.use( ['login'], function (login) {
login.render ({
"appid":"My_API_ID",
"authend":"sandbox",
"scopes":"openid profile email address",
"containerid":"paypalLogin",
"responseType":"code",
"locale":"en-us",
"buttonType":"LWP",
"buttonShape":"pill",
"buttonSize":"lg",
"fullPage":"false",
"returnurl":"http://mysite/php/paypal/paypal_api_login.php"
});
});
The redirect back happens in the window. Add JS code there to save the URL info or redirect the opening window (set window.opener.location.href) and window.close() if desired.
Not tested but should be as simple as:
<script type="text/javascript">
if(window.opener) {
window.opener.location.href = window.location.href;
window.close()
}
</script>
or maybe better to also add and check for an additional parameter
<script type="text/javascript">
const REDIRECT_PARAM = '&redirected_opener=true';
if(window.opener && !window.location.href.includes(REDIRECT_PARAM)) {
window.opener.location.href = window.location.href + REDIRECT_PARAM;
window.close()
}
</script>
I need to create a timer for my website. I am setting up a form with multiple choice questions. i want users to submit the form/ answers at a specified time say 30 minutes,.. if the time elapses the submit button get disabled and alert message; time is up, Test failed.
Help with entire code; Jquery, and PHP Pease;
For this you can use the setTimeOut() javascript function.
The following line for example shows an alert box with the text Hello, after 3 seconds.
setTimeout(function(){ alert("Hello"); }, 3000);
In your case you want to disable a submit button and show an alert after 30 minutes, 30 minutes = 30*60 = 1800 seconds, equals 1800000 miliseconds.
So the code becomes like this:
setTimeout(function(){
//disable the button with id="submitbutton"
document.getElementById('submitbutton').disabled = true;
alert("Time out!");
}, 1800000);
To make this work once the page is loaded you need to place it in a javascript file or <script></script> tags and wrap it in the on document ready event. The complete code is then:
<html>
<head>
</head>
<body>
Your HTML here with the <input type="submit" id="submitbutton">
<script>
// self executing function
(function() {
setTimeout(function(){
//disable the button with id="submitbutton"
document.getElementById('submitbutton').disabled = true;
alert("Time out!");
}, 1800000);
})();
</script>
</body>
</html>
I am using the Onsen framework with jQuery and jQuery mobile, it appears that there is no way to catch the event that fires once the new page is loaded.
My current code, which executes in the index.html file (the master page)
<script src="scripts/jQuery.js"></script>
<script src="scripts/jquery.mobile.custom.min.js"></script>
<script src="scripts/app.js"></script>
<script>
ons.bootstrap();
ons.ready(function() {
$(document.body).on('pageinit', '#recentPage', function() {
initRecentPage();
});
});
in app.js is the following code
function initRecentPage() {
$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
ons.compile(content);
}
and the HTML:
<ons-page id="recentPage">
<ons-toolbar id="myToolbar">
<div id="toolBarTitle" class="center">Recent Checks</div>
<div class="right">
<ons-toolbar-button ng-click="mySlidingMenu.toggleMenu()">
<ons-icon icon="bars"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-scroller>
<h3 class="headingTitle"> Checks</h3>
<div id="Free" class="tabArea">
<ons-list id="yourReports">
</ons-list>
<ons-button id="clearFreeRecentButton">
<span id="clearRecentText" class="bold">Clear Recent Checks</span>
</ons-button>
</div>
</ons-scroller>
</ons-page>
in this instance the variable 'content' is always null. I've debuged significantly, and the element I am trying to get is not present when this event fires. It is loaded later.
So, the question is, how do I ensure that all of the content is present before using a selector. It feels like this is an onsen specific issue.
In the end I could only find one reliable way of making this work.
Essentially I had to wait, using setTimeout 300 milliseconds for the DOM elements to be ready. It feels like a hack, but honestly there is no other reliable way of making this behave. The app is in the app store and works well, so even though it seems like a hack, it works:
$(document).on('pageinit', '#homePage', function() {
initHomePage();
});
function initHomePage() {
setTimeout(function() {
setUpHomePage();
}, 300);
}
Move your $(document.body).on('pageinit', '#recentPage', function() { outside of ons.ready block.
JS
ons.bootstrap();
ons.ready(function() {
console.log("ready");
});
$(document.body).on('pageinit', '#recentPage', function() {
initRecentPage();
});
function initRecentPage() {
//$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
alert(content)
ons.compile(content);
}
I commented out a line because I do not have access to that "recentShowReport"
You can see how it works here: 'http://codepen.io/vnguyen972/pen/xCqDe'
The alert will show that 'content' is not NULL.
Hope this helps.
I have a redirection code (working fine) in several pages as follow :
<meta http-equiv="refresh" content ="42; url=http://my url.html#">
But i want the automatic redirection to be cancelled or delayed if the user clicks in any point of the page.
What code should i use ?
Thanks
Here is the code for click on page anywhere:
<script>
$('html').click(function () {
alert("ok"); // Do whatever you want here, just replace. Since i dont know your code. So i can help you till this point.
});
</script>
Remove you <meta http-equiv="refresh"> from Documents <head></head>
Insert a simple JS-Timer and use window.location to refer the User after the Page loaded.
var timeVar = setInterval(function () {myTimer()}, 1000);
var t = 9;
function myTimer() {
if (t>0) {
document.getElementById("timer").innerHTML = t;
t--;
}
else { window.location = 'what/ever/you/are/workingon.html'; }
}
function StopFunction() { clearInterval(timeVar); }
<p>Redirecting in <span id="timer" style="font-weight: bold;">10</span>Seconds.</p>
<p onclick="StopFunction();" style="cursor: pointer; ">Cancel!</p>
The User will load your page and when not canceling the Timer be redirected to the Page you defined. If stopping the Timer the user wont be redirected and stay on the Page. br
Try just to empty cache, it should work.
I'm trying to prevent the back button from working on one of my asp.net mvc pages.
I've read a couple of places that if i put "window.history.forward(1);" in my page it will prevent the back button from working on a given page.
This is what I did in my page:
<script type="text/javascript">
$(document).ready(function () {
window.history.forward(1);
});
</script>
It doesn't seem to be working. Am I using this incorrectly or is this approach wrong? thanks.
The way I've seen this trick used is to put history.forward() on every page before the page where you don't want the back button to work, then every time the user hits the back button it forwards them back to where they were. The common use is to prevent others from returning to a page (usually in a given, linear sequence) once they have progressed. This is sometimes used in the sign-in sequence for banking websites, for example.
As far as I know, there is no way to actually disable the back button. Sometimes people get around this by opening the page in a new window, which will not have a history of pages preceding it, and thus nothing to go back to. Others simply display a warning message before going back to inform a user that they may lose unsaved data, if that is the main concern.
That said, maybe this will help you: http://viralpatel.net/blogs/disable-back-button-browser-javascript/
maybe:...
<script type="text/javascript">
function disableBackButton()
{
window.history.forward();
}
setTimeout("disableBackButton()", 0);
$(document).ready(function () {
disableBackButton();
});
</script>
Use on the page in which you don't want back button to work.
window.history.forward(1);
This is working for me... Hope it helpful for you..
<script type="text/javascript">
window.history.forward();
function noBack(){
window.history.forward();
}
</script>
$(document).ready(function() {
noBack();
});
You can use
history.go(index)
index =0 //for the current page.
index>0 //e.g 1,2 for forward navigation
index<0 //e.g -1,-2 for backward navigation
history.go(-2)
<SCRIPT type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</SCRIPT>
And in html Body tag write the following code.
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload=" " >
Try this, it worked for me.
Not sure if this is relevant but I found it and it might be worth a try:
<script type="text/javascript">
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function() {
null
};
</script>
<script>
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () {
null
};
</script>
window.history.forward();
function noBack()
{
window.history.forward();
}
function setit() {
noBack();
}
<script>
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () {
null
};
</script>
The code needs to be on the page infront as well as the page you require for it to work