Visitors can right click the web page and select view source or they press ctrl+u or ctr+shft+i or ctrl+shft+j or f12 and they can view the web page source code.
i did not create this code. i only modified it to suit my needs. So credit goes to those out there that are true coders! Thank you! initially i had embedded my html code into an iframe. when a visitor right clicked on the page they got an option for viewing the page source or frame source. other functions were also available that allowed the viewing of the code. adding this code to my pages stopped visitors from easily viewing the code by using any of the above mentioned methods.
<script language="JavaScript">
window.onload = function () {
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
document.addEventListener("keydown", function (e) {
//document.onkeydown = function(e) {
// "I" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
disabledEvent(e);
}
// "J" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
disabledEvent(e);
}
// "S" key + macOS
if (e.keyCode == 83 && (navigator.platform.match("Mac") ?
e.metaKey : e.ctrlKey)) {
disabledEvent(e);
}
// "U" key
if (e.ctrlKey && e.keyCode == 85) {
disabledEvent(e);
}
// "F12" key
if (event.keyCode == 123) {
disabledEvent(e);
}
}, false);
function disabledEvent(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
e.preventDefault();
return false;
}
}
</script>
</head>
<body oncontextmenu="return false">
<body>
Thanks for the comments everyone! I'm still learning. And yes, it is correct that this usually isn't a good idea to do to a page and yes there will be some who know all the different ways one can access the source code of a page. However, there will be many who only know of a couple ways to get there and many more who dont know how to at all. So I posted the previous before i found some issues with it. so i re-worked the script and now it does what i wanted. Im posting in the hopes that it helps someone. Goal: visitors will be unable to right-click the "page" or use ctrl+u, ctrl+shft+i, ctrl+shft+j or f12 to view options AND will be unable to use the browser back button. NOTE: web page is embedded within an iframe. Again, thanks to you coders and the info that you post! it's helping me learn!
<script type = "text/javascript" >
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
document.addEventListener("keydown", function (e) {
//document.onkeydown = function(e) {
// "I" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
disabledEvent(e);
}
// "J" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
disabledEvent(e);
}
// "S" key + macOS
if (e.keyCode == 83 && (navigator.platform.match("Mac") ?
e.metaKey : e.ctrlKey)) {
disabledEvent(e);
}
// "U" key
if (e.ctrlKey && e.keyCode == 85) {
disabledEvent(e);
}
// "F12" key
if (event.keyCode == 123) {
disabledEvent(e);
}
}, false);
function disabledEvent(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
e.preventDefault();
return false;
}
}, 50);
</script>
</head>
<body onLoad="changeHashOnLoad(); ">
On Internet Explorer, i am using below code
if (navigator.appName == 'Microsoft Internet Explorer' || !!(navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv:11/)) || (typeof $.browser !== "undefined" && $.browser.msie == 1)) {
window.onbeforeunload = function () {
//return "Ticket upload progress will be lost if you close/reload this window.\nDo you really want to continue?"
var message = confirm("Ticket upload progress will be lost if you close/reload this window.\nDo you really want to continue?");
if (message == true) {
alert(1);
}
else if(message == false) {
return;
}
}
}
When user click on ok or cancel in both the conditions, page is closed.
I want to stay on same page, if user clicked on cancel.
I have tried everything but not working.
Any help is highly appreciated.
Try to replace
else if(message == false) {
return;
}
with
else if(message === false) {
return null;
}
I have following JS which used to make a page fullscreen after clicking on link:
// mozfullscreenerror event handler
function errorHandler() {
alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);
// toggle full screen
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
// keydown event handler
document.addEventListener('keydown', function(e) {
if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
toggleFullScreen();
}
}, false);
Is there a way to make page scroll (overflow) be visible only in fullscreen mode, and when user cancel full screen by clicking same link again or by another way, overflow becomes hidden?
You could just use a class to represent "no overflow" or vice versa. And then just work it into your function, like so:
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
document.body.className = document.body.className.replace(' no-scroll', '');
...
} else {
document.body.className += " no-scroll";
See this working example using the following method for "toggling" the class to turn scroll "on/off"
// add/remove no scroll class to body
function toggleNoScroll(off) {
// test if already exist:
var a = Array.prototype.indexOf.call(document.body.classList, 'no-scroll') + 1;
// remove if does exist, so as not to double up
document.body.className = document.body.className.replace(' no-scroll', '');
// add only if off IS False OR off is empty & it did not previously exist (thus "toggle")
if (off === false || (off !== true && !a)) document.body.className += " no-scroll";
return document.body.classList;
}
So then I have:
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
toggleNoScroll(true);
...
else {
toggleNoScroll(false);
You can add a class to your body element when you run the toggleFullscreen() function like this:
document.body.className += ' ' + 'fullScreened'
then add a css rule like this:
.fullScreened {
overflow:hidden;
}
Let me know if it works :)
I'm building a site that contains a Bootstrap Nav Tab section. The problem is my dev team is implementing an accessibility javascript that conflicts with Bootstrap. I am attaching a link to a codepen showing the problem. (See Below). Which its basically the nav tabs simply do not work. No click event is happening.
I don't have much experience with accessibility scripting but I am hoping someone here does and can tell me how to make bootstrap work without losing the functionality this accessibility script provides.
The script is designed to allow non-sighted users using screen readers (i.e. JAWS) to be able to tab around the menus and screen items based on what JAWS is telling them by reading the ARIAS and navigating through ROLES.
The Javascript is as follows:
$(function(){
$('.nav').setup_navigation();
});
var keyCodeMap = {
48:"0", 49:"1", 50:"2", 51:"3", 52:"4", 53:"5", 54:"6", 55:"7", 56:"8", 57:"9", 59:";",
65:"a", 66:"b", 67:"c", 68:"d", 69:"e", 70:"f", 71:"g", 72:"h", 73:"i", 74:"j", 75:"k", 76:"l",
77:"m", 78:"n", 79:"o", 80:"p", 81:"q", 82:"r", 83:"s", 84:"t", 85:"u", 86:"v", 87:"w", 88:"x", 89:"y", 90:"z",
96:"0", 97:"1", 98:"2", 99:"3", 100:"4", 101:"5", 102:"6", 103:"7", 104:"8", 105:"9"
}
$.fn.setup_navigation = function(settings) {
settings = jQuery.extend({
menuHoverClass: 'main-menu-item',
}, settings
);
// Add ARIA role to menubar and menu items
$(this).attr('role', 'menubar').find('li').attr('role', 'menuitem');
var top_level_links = $(this).find('> li > a');
//// Set tabIndex to -1 so that top_level_links can't receive focus until menu is open
//$(top_level_links).next('ul')
//.attr({ 'aria-hidden': 'true', 'role': 'menu' })
//.find('a');
// Adding aria-haspopup for appropriate items
$(top_level_links).each(function(){
if($(this).next('ul').length > 0)
$(this).parent('li').attr('aria-haspopup', 'true');
});
$(top_level_links).each(function(){
if($(this).next('ul').length > 0)
$(this).parent('ul').attr('aria-haspopup', 'true');
});
$(top_level_links).hover(function(){
$(this).closest('ul')
.attr('aria-hidden', 'false')
.find('.'+settings.menuHoverClass)
.attr('aria-hidden', 'true')
.removeClass(settings.menuHoverClass)
.find('a')
//.attr('tabIndex',-1);
$(this).next('ul')
.attr('aria-hidden', 'false')
.addClass(settings.menuHoverClass)
.find('a').attr('tabIndex',0);
});
$(top_level_links).focus(function(){
$(this).closest('ul')
.attr('aria-hidden', 'false')
.find('.'+settings.menuHoverClass)
.attr('aria-hidden', 'true')
.removeClass(settings.menuHoverClass)
.find('a')
//.attr('tabIndex',1);
$(this).next('ul')
.attr('aria-hidden', 'false')
.addClass(settings.menuHoverClass)
.find('a').attr('tabIndex',0);
});
// Bind arrow keys for navigation
$(top_level_links).keydown(function(e){
if(e.keyCode == 37) {
e.preventDefault();
// This is the first item
if($(this).parent('li').prev('li').length == 0) {
$(this).parents('ul').find('> li').last().find('a').first().focus();
} else {
$(this).parent('li').prev('li').find('a').first().focus();
}
} else if(e.keyCode == 38) {
e.preventDefault();
if($(this).parent('li').find('ul').length > 0) {
$(this).parent('li').find('ul')
.attr('aria-hidden', 'false')
.addClass(settings.menuHoverClass)
.find('a').attr('tabIndex',0)
.last().focus();
}
} else if(e.keyCode == 39) {
e.preventDefault();
// This is the last item
if($(this).parent('li').next('li').length == 0) {
$(this).parents('ul').find('> li').first().find('a').first().focus();
} else {
$(this).parent('li').next('li').find('a').first().focus();
}
} else if(e.keyCode == 40) {
e.preventDefault();
if($(this).parent('li').find('ul').length > 0) {
$(this).parent('li').find('ul')
.attr('aria-hidden', 'false')
.addClass(settings.menuHoverClass)
.find('a').attr('tabIndex',0)
.first().focus();
}
} else if(e.keyCode == 13 || e.keyCode == 32) {
// If submenu is hidden, open it
//e.preventDefault();
$(this).parent('li').find('ul[aria-hidden=true]')
.attr('aria-hidden', 'false')
.addClass(settings.menuHoverClass)
.find('a').attr('tabIndex',0)
.first().focus();
} else if(e.keyCode == 27) {
e.preventDefault();
$('.'+settings.menuHoverClass)
.attr('aria-hidden', 'true')
.removeClass(settings.menuHoverClass)
.find('a')
//.attr('tabIndex',-1);
} else {
$(this).parent('li').find('ul[aria-hidden=false] a').each(function(){
if($(this).text().substring(0,1).toLowerCase() == keyCodeMap[e.keyCode]) {
$(this).focus();
return false;
}
});
}
});
var links = $(top_level_links).parent('li').find('ul').find('a');
$(links).keydown(function(e){
if(e.keyCode == 38) {
e.preventDefault();
// This is the first item
if($(this).parent('li').prev('li').length == 0) {
$(this).parents('ul').parents('li').find('a').first().focus();
} else {
$(this).parent('li').prev('li').find('a').first().focus();
}
} else if(e.keyCode == 40) {
e.preventDefault();
if($(this).parent('li').next('li').length == 0) {
$(this).parents('ul').parents('li').find('a').first().focus();
} else {
$(this).parent('li').next('li').find('a').first().focus();
}
} else if(e.keyCode == 27 || e.keyCode == 37) {
e.preventDefault();
$(this)
.parents('ul').first()
.prev('a').focus()
.parents('ul').first().find('.'+settings.menuHoverClass)
.attr('aria-hidden', 'true')
.removeClass(settings.menuHoverClass)
.find('a')
//.attr('tabIndex',-1);
} else if(e.keyCode == 32) {
e.preventDefault();
window.location = $(this).attr('href');
} else {
var found = false;
$(this).parent('li').nextAll('li').find('a').each(function(){
if($(this).text().substring(0,1).toLowerCase() == keyCodeMap[e.keyCode]) {
$(this).focus();
found = true;
return false;
}
});
if(!found) {
$(this).parent('li').prevAll('li').find('a').each(function(){
if($(this).text().substring(0,1).toLowerCase() == keyCodeMap[e.keyCode]) {
$(this).focus();
return false;
}
});
}
}
});
//Hide menu if click or focus occurs outside of navigation
$(this).find('a').last().keydown(function(e){
if(e.keyCode == 9) {
// If the user tabs out of the navigation hide all menus
$('.'+settings.menuHoverClass)
.attr('aria-hidden', 'true')
.removeClass(settings.menuHoverClass)
.find('a')
//.attr('tabIndex',-1);
}
});
$(document).click(function () {
$('.' + settings.menuHoverClass).attr('aria-hidden', 'true').removeClass(settings.menuHoverClass).find('a').attr('tabIndex', 0);
});
$(this).click(function(e){
e.stopPropagation();
});
}
The HTML is in the pen link attached for the sake of not cluttering this question. Besides, you'll be able to test it there better.
CODEPEN DEMO HERE
p.s. Also, I am using a small Bootstrap accordion within one of the Tabs. (Not shown in the demo for simplicity purposes). So if you think of a fix that can globally fix all Bootstrap functionality rather than the navtabs only, I'll appreciate it even more, but I am not expecting it.
Thanks in advance
The problem is with this event handler at the very end of the code in the CodePen:
$(this).click(function(e){
e.stopPropagation();
});
That's explicitly preventing clicks on the menu tabs from bubbling up to any other event handler. Probably the Bootstrap tab code binds its event handlers at the top of the DOM.
It's not clear what the intention of that code is; it's not commented and it's not apparent from looking at the rest of the code. It may be just a gratuitous addition, in which case it's erroneous given the nature of that code.
I've used this but it doesn't work; no errors in the firebug:
$("div").live('mousedown', function(e) {
if( (e.which == 1) ) {
return ;
}if( (e.which == 3) ) {
return false;
}else if( (e.which == 2) ) {
return false;
}
})
I can disable right click with contextmenu but I dont know what to do about middle button.
You can do so with Javascript and/or an HTML attribute (which is really a Javascript event handler anyway) as described here
<script language="javascript">
document.onmousedown=disableclick;
status="Right Click Disabled";
function disableclick(e)
{
if (e.button == 2) {
alert(status);
return false;
}
}
</script>
and
<body oncontextmenu="return false">
...
</body>
That being said: DON'T DO IT.
Why? Because it achieves nothing other than annoying users. Also many browsers have a security option to disallow disabling of the right click (context) menu anyway.
Not sure why you'd want to. If it's out of some misplaced belief that you can protect your source code or images that way, think again: you can't.
You missed an 'else' in your code.
$("div").live('mousedown', function(e) {
if( (e.which == 1) ) {
return ;
}else if( (e.which == 3) ) {
return false;
}else if( (e.which == 2) ) {
return false;
}
})