I try to prevent contextual menu to be displayed on right click with Paperjs. I tried to catch the right click event with the following JS code:
window.addEventListener("contextmenu", function(event){
//document.body.addEventListener("contextmenu", function(event){
console.log ('Right click');
//event.stopImmediatePropagation();
event.stopPropagation();
return false;
//return true;
});
I tried many combinations (commented lines). None is working. I can't figure out why it is not working, while the following line does the job:
<body oncontextmenu="return false;">
I can't add attribute to <body> so I would like to do in from the JavaScript.
Here is a JSFiddle: https://jsfiddle.net/Imabot/zujxaL95/5/
You're looking for event.preventDefault()
window.addEventListener("contextmenu", function(event){
//document.body.addEventListener("contextmenu", function(event){
console.log ('Right click');
//event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
return false;
//return true;
});
//var canvas = document.getElementById("canvas");
paper.install(window);
paper.setup(canvas);
var c1 = new Path.Circle(new Point(200, 140), 100);
c1.fillColor = 'red';
c1.visible = true;
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
canvas[resize] {
background: #ccc;
cursor: pointer;
width: 100%;
height: 100%;
margin:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>
<canvas id="canvas" resize></canvas>
Related
I have a form/div displayed on top of the map. I want to make it so that it is hidden when there is a click outside the form/div area but not when the click is inside the form/div.
I can't get to detect when the click is done inside the div. Instead all clicks inside the form/div are detected as done on the map, as if the div doesn't exist.
<div id="map" class="map"><div id="popup">
//input data of form
</div> </div>
<script>
map.on('click', function(evt) {
console.log('Clicked #map');
//one method I tried from another stack overflow answer
(evt.target !== this) ? $("#popup").show() : $popup.hide();
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
loadInfo(feature.get('id'));
$("#popup").show();
}
});
$("popup").on('click', function(e) {
e.stopPropagation();
console.log('Clicked #popup');
});
</script>
Output
Clicked #map
Clicked #popup
As you can see in the code I tried few different methods on detecting clicks on the popup but none of them worked. All of them are as if, the popup is not even there.
I am using openlayers3 if that matters.
You can use Event.stopPropagation() to prevent further propagation of the current click event in the capturing and bubbling phases:
var $map = $('#map'),
$popup = $('#popup');
$map.on('click', function(e) {
console.log('Clicked #map');
(e.target !== this) ? $popup.show() : $popup.hide();
});
$popup.on('click', function(e) {
e.stopPropagation();
console.log('Clicked #popup');
});
#map {
background-color: grey;
width: 80%;
height: 120px;
margin: auto;
padding: 40px;
}
#popup {
background-color: #000000;
color: #ffffff;
width: 60%;
margin: auto;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="map">
<div id="popup">
// input data of form
</div>
</div>
[ Learning Purpose ]
I'm Trying to use only javascript for this..
any advices with the simplest way is very appreciate it..
I Have explained what I need to do in the button functions with comments..
P.S: I'm not sure if this is done using CSS.. so please guide me if it does.
Seems Like I'm being misunderstood I'm look for this effect:
http://lokeshdhakar.com/projects/lightbox2/
<!DOCTYPE html>
<html>
<head>
<style>#mydiv{height: 250px; width: 250px; background-color:#34f;}</style>
<script>
document.onreadystatechange = function()
{
if(document.readyState == "complete")
{
var div = document.getElementById("mydiv");
var mybutton = document.getElementById("mybutton");
mybutton.onclick = function()
{
// center div
// gray out the rest
};
document.onclick = function()
{
// remove gray out effect to the page
};
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="mybutton"></button>
</body>
</html>
HTML:
<div id="mydiv" style="display:none"></div>
CSS:
#mydiv
{
background-color: white;
filter:alpha(opacity=50); /* IE */
opacity: 0.5; /* Safari, Opera */
-moz-opacity:0.50; /* FireFox */
top: 0px;
left: 0px;
z-index: 20;
height: 100%;
width: 100%;
background-repeat:no-repeat;
background-position:center;
position:absolute;
}
JavaScript:
mybutton.onclick = function()
{
document.getElementById("mydiv").style.display = "";
};
document.onclick = function()
{
document.getElementById("mydiv").style.display = "none";
};
may be helps you.
While attaching a contextmenu event to a content-editable div filled with spelling mistakes, IE(11) is ignoring the callback and showing its own Spell-check menu.
jsbin: http://jsbin.com/favit/3/ (You should preview it, then edit the div, and you will see the problem)
Turning off Spell-check is not an option, because i can't tell clients to do so.
I came across this question on Google and I figured I would post an answer in case anyone else Googles this. This is how to add your own context menu on IE without disabling spellcheck. It even works when you right-click on an incorrectly-spelled word with a red underline beneath it.
Basically, there are 2 steps:
1) In the mousedown event, you need to disable spellcheck on the contenteditable element.
2) Afterwards, you re-enable spellcheck on the contenteditable element.
Below is a working example.
var editable = $('#editable');
var mouseX, mouseY;
$(document).mousemove(function(event) {
mouseX = event.pageX;
mouseY = event.pageY;
});
editable.mousedown(function(e) {
if (e.button == 2) {
editable.attr('spellcheck','false');
e.preventDefault ? e.preventDefault : e.returnValue = false;
e.stopPropagation();
return false;
}
return true;
});
editable.get(0).oncontextmenu = function(e) {
e.preventDefault ? e.preventDefault : e.returnValue = false;
return false;
};
editable.on("contextmenu", function(e) {
e.preventDefault ? e.preventDefault : e.returnValue = false;
e.stopPropagation();
if ($('#contextmenu').length == 0) {
$('<div>').attr('id', 'contextmenu').appendTo('body');
$('#contextmenu').css('z-index', 1000);
$('#contextmenu').css('position', 'absolute');
$('<ul>').appendTo('#contextmenu');
$('<li>').html('some').appendTo('#contextmenu ul');
$('<li>').html('text').appendTo('#contextmenu ul');
$('<li>').html('here').appendTo('#contextmenu ul');
}
$('#contextmenu').css('top', mouseY);
$('#contextmenu').css('left', mouseX);
$('#contextmenu li').click(function() {
$('#contextmenu').remove();
editable.attr('spellcheck','true');
});
});
#contextmenu {
border: 1px solid #000;
background-color: #fff;
padding: 5px;
}
#contextmenu ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#contextmenu li {
cursor: pointer;
padding: 2px;
}
#contextmenu li:hover {
background-color: #2daade;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editable" contenteditable="true">Click me and type some badly spelled words.</div>
Got it:
Adding the attribute "spellcheck", setting its value to "false" has fixed it.
<div contenteditable="true" spellcheck="false">
example notaword
</div>
I'm trying to make a range slider but it's working in single direction(to right) only and dragging out of parent container(#volume). How can I fix this?
I've attached a demo fiddle link.
Markup
<div id="volume">
<div class="progress">
<div class="volumeslider"></div>
</div>
</div>
CSS
#volume{
width:300px;
background: #ddd;
cursor:pointer;
}
.progress{
height:10px;
background:#999;
position:relative;
width:0;
}
.volumeslider {
background: #808080;
position: absolute;
width: 20px;
height: 20px;
border-radius: 15px;
right: -10px;
top: -5px;
}
JS
$('.volumeslider').bind('mousedown', function(e){
$('.volumeslider').bind('mousemove', function(e){
$('.progress').width(e.pageX - $('.progress').offset().left + 'px');
$(this).css('left', e.pageX - ($(this).width()/2) );
});
$('.volumeslider').bind('mouseup',function(){
$('.volumeslider').unbind('mousemove');
});
});
JS Fiddle:
http://jsfiddle.net/2mYm7/
You have not taken into consideration the padding you have given to the body element.
I have made some changes to the code.
$('.volumeslider').bind('mousedown', function (e) {
console.log('binded');
$('.volumeslider').bind('mouseup', function (e) {
console.log('unbinded');
$('.volumeslider').unbind('mousemove');
});
$('.volumeslider').bind('mousemove', function (e) {
console.log('mousemove');
$('.progress').width(e.pageX - $('.progress').offset().left + 'px');
$(this).css('left', e.pageX - 25- $(this).width());
});
});
Check this jsFiddle http://jsfiddle.net/2mYm7/1/
Here's an example of how to make it work always and everywhere. Right now it will stay dragging forever if you leave the element.
It includes border checks and makes sure the body is large enough so it stops dragging wherever on the page.
http://jsfiddle.net/2mYm7/5/
var dragging = null;
function startDrag(){
console.log('started dragging', this);
var $this = $(this);
dragging = $this;
$(document.body).bind('mouseup', stopDrag);
$(document.body).bind('mousemove', drag);
}
function stopDrag(){
console.log('stopped dragging', dragging[0]);
$(document.body).unbind('mouseup', stopDrag);
$(document.body).unbind('mousemove', drag);
dragging = null;
}
function drag(e){
var slider = dragging;
var progress = slider.parent();
var container = progress.parent();
var maxOffset = container.width();
progress.width(Math.min(e.pageX - progress.offset().left, maxOffset) + 'px');
}
$('.volumeslider').bind('mousedown', startDrag);
I have a VML shape in which I'm trying to prevent the browser from navigating to the href:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a, #b {
position: absolute;
top: 10px;
width: 100px;
height: 100px;
display: block;
}
#a {
left: 10px;
background: red;
}
#b { left: 120px; }
</style>
<script type="text/javascript">
(function() {
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML');
window.onload = function() {
var a = document.getElementById('a');
a.attachEvent('onclick', function(e) {
console.log('A');
e.returnValue = false;
return false;
});
var b = document.getElementById('b');
b.attachEvent('onclick', function(e) {
console.log('B');
e.returnValue = false;
return false;
});
};
})();
</script>
</head>
<body>
<a id="a" href="/foo"></a>
<v:rect id="b" href="/bar"><v:fill color="#0000ff" /></v:rect>
</body>
</html>
Run this sample in IE8. Clicking on the link (the red shape) properly prevents browser from going to /foo with returnValue = false/return false.
However, attempting to cancel the navigation on the <v:rect> does not work. The browser navigates to /bar!
Is there a solution to get around this?
This should work:
var b = document.getElementById('b');
b.attachEvent('onclick', function(e) {
e.preventDefault();
});