I have a boostrap switchery on my site:
<div class="form-group">
<label class="checkbox-inline checkbox-right checkbox-switchery switchery-sm">
<input type="checkbox" class="switchery" id="test55">
Live
</label>
</div>
<div id="tableHolder"></div>
I want to achive this:
on page load load external page into "tableHolder" div.
Switchery is default turned off.
When you click on switchery, load the same external page, but with div resfresh every 5 seconds.
If you turn off switchery, show only loaded external page, without resfresh interval.
I'm having troubles, because everything works ok, but when i press switchery to off, the div still keeps refreshing, so clearInterval doesnt' work :(
Here is my script:
<script type="text/javascript">
$(document).ready(function () {
$('#tableHolder').load('external.php?name=myId001')
var documentInterval = 0;
$('#test55').change(function () {
if ($(this).prop("checked")) {
documentInterval = setInterval(function () {
$('#tableHolder').load('external.php?name=myId001')
}, 3000);
} else {
clearInterval(documentInterval)
}
});
});
</script>
Use click, not change function.
$(document).ready(function() {
$('#tableHolder').load('external.php?name=myId001');
var elem = document.querySelector('#test55');
var init = new Switchery(elem);
var documentInterval = 0;
var clickCheckbox = document.querySelector('#test55');
$(document).on('click', '#test55', function() {
if ($(this).prop("checked")) {
documentInterval = setInterval(function() {
$('#tableHolder').load('external.php?name=myId001');}, 3000);
} else {
clearInterval(documentInterval);
}
});
});
Sample fiddle here . This will append some text to the div as when switch is on and will stop appending when switch is turned off. If you change the 'click' event to 'change' event the text appending will continue even when the switch is off
In my page a pop up window display of confirmation only when am going to close the browser/tab. It works for my page but it also ask while am going to navigate to another page. I want the pop up window when i close tab not while navigating to another page. Can anyone plz help me.
Here is code.
var PreventExitPop = false;
function ExitPop() {
if(PreventExitPop == false) {
PreventExitPop=true;
window.alert("hi!\n\click ok to go on next page");
var frm = document.forms['exitpopform'];
frm.action = 'deals.html';
frm.submit();
scroll(0, 0);
return "\n\n\n***************************************\n\n";
}
}
window.onbeforeunload = ExitPop;
</SCRIPT>
<form id='exitpopform' method='post' action='#'>
<input type='hidden' value='' />
</form>
Try Below Code for this.
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
window.onbeforeunload = null;
});
$(window).bind("beforeunload", function () {
return confirm("Do you really want to close?");
});
})
</script>
Above code will set NULL for onbeforeunload when any anchor tag is cliked throughout the website.
And if user will close browser/tab than it will raise the onbeforeunload function and it will show the popup with warning message.
For this this function you have to add JQuery reference into <head> tag of you HTML page as below.
<script src="your folder name/Javascript/jquery-1.8.2.js" type="text/javascript"></script>
I want to close pop up on click of back button for mobile. I implemented this using onhashchange:
window.onhashchange = function (event) {
};
In this case, if pop up is opened multiple times then on click of back button, it opens and closes the modal pop up. But, I want modal pop up to close on first back and navigate to prev page on next back.
I also tried using onbeforeunload, but it will show another alert to leave or stay on the page.
$(window).bind('beforeunload', function(e) {
return false;
});
What is the best way to close the pop up on back button and redirect to prev page on next back?
if (window.history && window.history.pushState) {
$('#myModal').on('show.bs.modal', function (e) {
window.history.pushState('forward', null, './#modal');
});
$(window).on('popstate', function () {
$('#myModal').modal('hide');
});
}
bootply.com was down when I was testing my answer. See the inline script and comments at the bottom of the code below. The rest is just Twitter Bootstrap boilerplate so that I could easily test it locally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>modal.html</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p>If you press the back button now, you should return to whatever page you were on before this page.</p>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Show me the modal!</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>If you press the web browser's back button OR the modal's close buttons, the modal will close and the hash will return to "modal.html#modalClosed".</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
// Immutable hash state identifiers.
var closedModalHashStateId = "#modalClosed";
var openModalHashStateId = "#modalOpen";
/* Updating the hash state creates a new entry
* in the web browser's history. The latest entry in the web browser's
* history is "modal.html#modalClosed". */
window.location.hash = closedModalHashStateId;
/* The latest entry in the web browser's history is now "modal.html#modalOpen".
* The entry before this is "modal.html#modalClosed". */
$('#myModal').on('show.bs.modal', function(e) {
window.location.hash = openModalHashStateId;
});
/* When the user closes the modal using the Twitter Bootstrap UI,
* we just return to the previous entry in the web
* browser's history, which is "modal.html#modalClosed". This is the same thing
* that happens when the user clicks the web browser's back button. */
$('#myModal').on('hide.bs.modal', function(e) {
window.history.back();
});
</script>
</body>
</html>
This is my solution for bootstrap modals. It adds support closing with back button to all bootstrap modals. You can adapt it for your non-bootstrap popups.
//Modal Closer With Back Button Support (Uses EventDelegation, so it works for ajax loaded content too.)
(function() {
var activeOpenedModalId = null;
var isHidingModalByPopState = false;
$(document).on('show.bs.modal', '.modal', function() {
activeOpenedModalId = $(this).attr('id');
window.location.hash = activeOpenedModalId;
}).on('hide.bs.modal', '.modal', function() {
if(!isHidingModalByPopState) {
window.history.back();
}
isHidingModalByPopState = false;
activeOpenedModalId = null;
});
$(window).on('popstate', function() {
if(activeOpenedModalId && window.location.hash !== '#'+activeOpenedModalId) {
isHidingModalByPopState = true;
$("#" + activeOpenedModalId).modal('hide');
}
});
})();
I write this code for my own website
and tested too many times with different devices and browsers
Chromium 71 , Chrome 67 , FireFox 65 , Android 4.1 , Android 4.2 , Android 7.1
window.onload=function(){
State=0;
$(".modal").on("show.bs.modal",function(){
path=window.location.pathname+window.location.search;
history.pushState("hide",null,path);
history.pushState("show",null,path);
State="show";
})
.on("hidden.bs.modal",function(){
if(!!State)
history.go(State=="hide"?-1:-2);
});
setTimeout(function(){// fix old webkit bug
window.onpopstate=function(e){
State=e.state;
if(e.state=="hide"){
$(".modal").modal("hide");
}
};
},999);
$("#myModal").modal("show");
};
dont use $(document).ready instead of window.onload
This could be done easily using Apache Cordova but not sure if you are using it to show your page in webview.
function onBackKeyDown(e) {
e.preventDefault();
}
document.addEventListener("backbutton", onBackKeyDown, false);
http://cordova.apache.org/docs/en/2.4.0/cordova_events_events.md.html#backbutton
according to http://www.mylearning.in/2015/06/close-modal-pop-up-on-back-button.html
$('#myModal').on('show.bs.modal', function(e) {
window.location.hash = "modal";
});
$(window).on('hashchange', function (event) {
if(window.location.hash != "#modal") {
$('#myModal').modal('hide');
}
});
By clicking back, automatically $('.modal').hide() function get activated.
So no need to hide modal. We can see grey shaded background after back button.You can use either of these line of code to close modal pop up.
$('.modal' ).modal( 'hide' ).data( 'bs.modal', null ); [work on bootstrap 3]
Or
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
Inspect the page when modal is active you can see these classes.
Do correct me if this method is wrong or other simple way exist.
Just add this code to script:
//update url to current url + #modal-open. example: https://your-url.test/home#modal-open
$('body').on('shown.bs.modal', '.modal', function () {
location.hash = '#modal-open'
})
//remove #modal-open from current url, so the url back to: https://yoururl.test/home
$('body').on('hidden.bs.modal', '.modal', function () {
location.hash = ''
})
//when user press back button
$(window).on('hashchange', function (e) {
if(location.hash == ''){
$('.modal').modal('hide')
}
})
and the above code works perfectly even though the modal is opened and closed several times.
*note:
jQuery 3.^
Bootstrap 4.^
My Solution in Angular
// push history state when a dialog is opened
dialogRef.afterOpened.subscribe((ref: MatDialogRef<any, any>) => {
window.history.pushState(ref.id, '');
// pop from history if dialog has not been closed with back button, and gurrent state is still ref.id
ref.afterClosed().subscribe(() => {
if (history.state === ref.id) {
window.history.go(-1);
}
});
});
Issue : When a modal is open and the user clicks browser's back button, the page navigates (backwards or forward) but the modal remains open.
Solution :
In Javascript :
$(window).on('popstate', function() {
$('.modal').click();
});
In Angular :
ngAfterViewInit() {
$(window).on('popstate', function() {
$('.modal').click();
});}
I don't like hash. And this code without hash in url
onModalMounted() => {
if (isMobile) {
history.pushState('modalShow', "", path); // add history point
window.onpopstate = (e) => {
e.stopPropagation()
e.preventDefault()
closeModalFn() // your func close modal
history.replaceState('', "", path);
window.onpopstate = () => {} // stop event listener window.onpopstate
}
} else {
window.onpopstate = (e) => {
e.stopPropagation()
e.preventDefault()
closeModalFn() // your func close modal
window.onpopstate = () => {} // stop event listener window.onpopstate
}
}
}
I'll did it like this :
// 2.0 and above
#Override
public void onBackPressed(evt) {
evt.preventDefault();
closeTab();
}
// Before 2.0
#Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
evt.preventDefault();
closeTab();
return true;
}
return super.onKeyDown(keyCode, event);
}
--> These are handlers btw, need addEventListener =)
I've done it by memory, i'll check it later when i find it in my 'code mess' folder
I am tring to open a new popup url in chrome extension pop up on the onclick event of a button. In my case I have a page which will display two buttons on startup. This has been set in the useropt.html page
useropt.html
<script src="scripts/usmanager.js"></script>
<body>
<div id="btn_wrap_inner">
<button class="btn" id="signin">Sign In</button><br /><br />
<button class="btn" id="signup">Sign Up</button>
</div>
</body>
The JS file usnmanager.js has js code which has code to open a new popurl url in the popup window on the onlick event of the buttons above.
usnmanager.js
function btn_clicked(tgtUrl) {
if(tgtUrl == "signin") {
var manager_url = "signin.html";
chrome.tabs.query(
{
currentWindow: true,
active : true
}, function(openselection) {
chrome.browserAction.setPopup({
popup: manager_url
});
});
} else if(tgtUrl = "signup") {
var manager_url = "signup.html";
chrome.tabs.query(
{
currentWindow: true,
active : true
}, function(openselection) {
chrome.browserAction.setPopup({
popup: manager_url
});
});
}
}
document.addEventListener("click", function() {
document.querySelector('#signin').addEventListener('click', btn_clicked('signin'));
document.querySelector('#signup').addEventListener('click', btn_clicked('signup'));
});
But when I am clicking either of the button the popup window is not loading the new popup page as set. Please let me know what have I done wrong
I would not try to pass the string in the event handler but use an attribute of the clicked button
function btn_clicked() {
var id=this.id;
if(id == "signup") {
Also in you code you test signup twice and you only add the event handler when you click something. Instead you likely want
document.addEventListener("DOMContentLoaded", function() {
Below i mentioned my page contents
Currently it'l show only popup box for a sec only ,but i need to extend the time ihave no idea how to do that
script i used
<script type="text/javascript">
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
my button
<input type="submit" value="SUBMIT" onclick="lightbox_open();" />
poup box
<div id="light">
<h3 th:text="${result}"></h3>
hi hello
</div>
<div id="fade" onClick="lightbox_close();"></div>
You can use Window setTimeout() method for this purpose.
var t=setTimeout(lightbox_close,3000)
You'll want to use the window.setTimeout event. If you are using jQuery for example:
$(document).ready( function() {
$('#element').hide();
window.setTimeout(function() {
$('#element').show();
}, 5000);
});
You can swap the hide/show around to suit your needs.
JSFiddle: http://jsfiddle.net/NfCHG/1/