I'm attempting to stop users being able to refresh the page using 'F5', but only when the Thickbox is shown.
Trouble is, after I switch between pages in the Thickbox, my check below to see if the Thickbox is visible always returns false -
var bol_thickbox_shown = ($('#TB_window').is(':visible')) ? true : false;
I assume this is to do with the way in which the page is loaded (probably an AJAX call), but I don't know how to accout for that when checking if the Thickbox is visible. Can anybody please help? Thanks.
Here is my full code -
/**
* Prevent F5 from refreshing the page if the Thickbox is shown
*/
document.onkeydown = function(e){
/** Check to see if the Thickbox is being shown */
var bol_thickbox_shown = ($('#TB_window').is(':visible')) ? true : false;
console.log('bol_thickbox_shown: '+bol_thickbox_shown);
if(bol_thickbox_shown && e.keyCode === 116){ // F5 keycode is 116
e.preventDefault();
e.returnValue = false; // for IE
}
}
You could trigger the var bol_thickbox_shown outside this function and set it to true when the thickbox open and to false if they where closed.
for example:
var bol_thickbox_shown = false;
/* hook this bol_thickbox_shown true/false
to wherever you fire the Thickbox */
document.onkeydown = function(e){
console.log('bol_thickbox_shown: '+bol_thickbox_shown);
if(bol_thickbox_shown && e.keyCode === 116){ // F5 keycode is 116
e.preventDefault();
e.returnValue = false; // for IE
}
}
and even you don't like this solution you could optimize the following line:
var bol_thickbox_shown = ($('#TB_window').is(':visible')) ? true : false;
to
var bol_thickbox_shown = $('#TB_window').is(':visible');
Related
My asp.net application contains iframe element named "bodyFrm".
bodyFrm content changes dynamically, the content pages contains iframe and more html elements.
sometime the child page contains iframe with more child page.
I want to cancel the action go to previous page when user pressed the backspace.
I try to call CancelBackspace functoin in window.onkeydown event of main page,
but it's called sometimes,not for every key press,
how can I call the function for every key press in application ?
I can't use jquery.
in main page, works part time:
<script type="text/javascript">
document.onkeydown = CancelBackspace();
function CancelBackspace(e){
if(!e)
e = event;
if(e.keyCode == 8)
return false;
}
</script>
you can prevent the back space key operation with this
document.onkeydown=function(event){
switch (event.keyCode) {
case 8 :
{
if (!event)
event = window.event;
// FOR IE9 & Other Browsers
if (event. preventDefault) {
event. preventDefault();
}
//FOR IE8 and Lower
else {
event.returnValue = false;
event.keyCode = 0;
}
}
break;
}
};
I'm using WP and I use the Thickbox to upload images in the back end on a custom page.
Is there a way for JS to check to see if the Thickbox is open?
I need to check this as I have an onbeforeunload event (to show a warning when the user leaves the page, in certain situations), but obviously Idon't want the warning shown when the user is just navigating between Thickbox pages. Thanks.
Code I currently use -
var bol_submit_clicked = false;
$('input[name="Submit"]').click(function(){
bol_submit_clicked = true;
});
window.onbeforeunload = function closeEditorWarning(){
var bol_option_changed = false;
/** Check to see if the settings warning is displayed */
if($('#unsaved-settings').css('display') !== 'none'){
bol_option_changed = true;
}
/** Display a warning if the user is trying to leave the page with unsaved settings */
if(bol_option_changed === true && bol_submit_clicked === false){
return '';
}
};
There's no inherent function in Thickbox to check, but looking at the code, you should just be able to check for the presence and visibility of #TB_window:
var thickbox_shown = ($('#TB_window').is(':visible')) ? true : false;
Or, try counting the length of #TB_load:
var thickbox_shown = ($('#TB_load').length > 0) ? true : false;\
I have a javascript confirm dialog popping up, but when I tap 'Cancel', then after the dialog closes, tap anywhere on the screen, the dialog pops up again. It only happens the one extra time, then you can tap on the page again without the dialog popping up.
I'm only seeing this on iPhone/iPad running iOS 5.0.1. I don't have an iOS 6 device, so I'm not sure it's happening there.
Here's the code I'm using:
$(bpm.remoteAppDivName).on('tap', 'a.delete-pending-payment', function(event) {
if (isJQMGhostClick(event)) { return false; }
var deleteGlobalPaymentURL = $(this).attr('href');
var confirmMsg = confirm ("Are you sure you want to do that?");
if (confirmMsg === true){
window.location = '/index.htm';
}
event.preventDefault();
return false;
});
var lastclickpoint, curclickpoint;
var isJQMGhostClick = function(event){
curclickpoint = event.clientX+'x'+event.clientY;
var ret=false;
if (lastclickpoint === curclickpoint) {
ret=true;
} else {
ret=false;
}
lastclickpoint = curclickpoint;
return ret;
}
Here's a link to the problem page: http://www.5280skateparks.com/dev/confirmBug.htm
Any help would be extremely appreciated.
UPDATE: I just confirmed that it's happening on iOS 6.0.1 as well.
This is the jQuery Mobile "Ghost Click" discussed in some detail here and here. On the forum page, a solution was proposed, which I have reproduced below with a small bug fix:
var lastclickpoint, curclickpoint;
var isJQMGhostClick = function(event){
curclickpoint = event.clientX+'x'+event.clientY;
var ret=false;
if (lastclickpoint === curclickpoint) {
ret=true;
} else {
ret=false;
}
lastclickpoint = curclickpoint;
return ret;
}
I have modified this code slightly to not always expect a pair of clicks. This function now works correctly in the case of 0 ghost clicks and more than 2 ghost clicks. You can use it by checking isJQMGhostClick(event) at the beginning of your tap handler and ignoring the event if the isJQMGhostClick function returns true.
I am working on a Javascript that is suppose to do a click feature on an element as well as showing a pop-up asking if you want to really leave the site (close the tab). Now The code works fine on IE and Firefox. But Chrome while it does do the important thing in terms of doing the click(); It will not show a pop-up asking if I want to leave or not. I Don't know if its a feature I need to enable in the Chrome browser or something else. Here is the code I am using. Any help would be much appreciated.
var validNavigation = false;
function wireUpEvents() {
var dont_confirm_leave = 0;
var leave_message = document.getElementById("kioskform:broswerCloseSubmit");
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave!==1) {
if(!e) e = window.event;
//for IE
e.cancelBubble = true;
e.returnValue = leave_message.click();
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message.click();
alert("Removing information.");
//add the code to delete the kiosk information here.
// this is what is to be done.
}
}
}
window.onbeforeunload=goodbye;
// Attach the event keypress to exclude the F5 refresh
jQuery('document').bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
// Attach the event click for all links in the page
jQuery("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
jQuery("form").bind("submit", function() {
validNavigation = true;
});
// Attach the event click for all inputs in the page
jQuery("input[type=submit]").bind("click", function() {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
jQuery(document).ready(function() {
wireUpEvents();
});
You have to return a string in the onbeforeunload function to show the message to the user, see also Setting onbeforeunload on body element in Chrome and IE using jQuery
We have a web page which is often reloaded by clicking F5 or Ctrl-R just for sake of looking if some new data arrived.
All images in this page have a cache forever header, so should never be reloaded by the browser.
But when a user presses F5 most browsers check every cache entry with a request and a if-modfied-since header. Our HTML page is never cached anyway but the images should be cached for a long time and there is no need to ask if the image was modified. It is a useless request and we want to get rid of it.
We have a reload icon on our page but users will still use the keyboard to reload (I would rather too).
So I tried to trigger F5 and Ctrl-R keys and do the reload manually like this (btw we are using jquery):
<img src="someimg.png" />
<a id="reload" href="mypage.html">Reload</a>
<script type="text/javascript">
function loading() {
window.location.href = $('#reload').attr("href");
return false;
}
function isF5(e) {
return e.which == 116;
}
function isCtrlR(e) {
return e.ctrlKey && e.which == 82;
}
function triggerReloadKeys(e) {
if (isF5(e) || isCtrlR(e)) {
$('#reload').click();
}
}
$(document).bind("keydown", triggerReloadKeys);
$('#reload').click(loading);
someimg.png is always delivered with a long lasting cache directive.
My first answer would be to tell me not taking over the users browser and let him refresh if he wants to. You are right, but we something up to 5000 pages/sec in peak time. And even more images because everybody is reloading the page all the time. We just want to scale down the amount of request, regardless of how fast they are. (and I know that I can't trigger the browser refresh button in the menu bar, but I don't care about it right now).
We were pretty successful with reducing the amount of requests in our App as we just don't have any reload button or F5 but everybody is forced to use our own HTML reload link.
What is possible is to disable the F5 key all together like this:
function triggerReloadKeys(e) {
if (isF5(e) || isCtrlR(e)) {
return false;
}
}
I don't know if it's even possible to trigger F5 and force a reload while still using the cache and mimic the behaviour of clicking another link on the page.
Any ideas?
I assume you did not get your answer yet.
This is what I am using on my website:
var ctrlDown = false;
var ctrlKey = 17, f5Key = 116, rKey = 82;
$(document).keydown(function( e ) {
if( e.keyCode == f5Key )
{
//F5 pressed. Copy your code here or try
//window.location = window.location;
//It will avoid if-modified-since requests.
e.preventDefault( );
}
if( e.keyCode == ctrlKey )
ctrlDown = true;
if( ctrlDown && ( e.keyCode == rKey ) )
{
//Ctrl + R pressed. Do whatever you want
//or copy the same code here that you did above
e.preventDefault( );
}
}).keyup(function(e) {
if (e.keyCode == ctrlKey)
ctrlDown = false;
});
Hope it works for you.
You are trying to solve this problem in the wrong place (i.e. on the client).
If your images truly never change, then add a far-future Expires http header on the server side to those images. This way the browser cache will not attempt to see if the image has been updated because the caching directive assures that it will not.
<body onload="JavaScript:document.body.focus();" onkeydown="return showKeyCode(event)">
</body>
<script src="<?php echo $this->webroot; ?>assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script>
var version = navigator.appVersion;
function showKeyCode(e) {
var keycode = (window.event) ? event.keyCode : e.keyCode;
if ((version.indexOf('MSIE') != -1)) {
if (keycode == 116) {
event.keyCode = 0;
event.returnValue = false;
return false;
}
if (keycode != 154) {
event.keyCode = 0;
event.returnValue = false;
return false;
}
if (keycode != 123) {
event.keyCode = 0;
event.returnValue = false;
return false;
}
}
else {
if ((keycode == 116)||(keycode != 123)||(keycode != 154)) {
return false;
}
}
}
</script>