Hola.
El codigo que dejare al final sirve para mostrar un menu al hacer click con el boton derecho del raton y quiero cambiarlo por el izquierdo.
Me podeis echar una mano?
JS:
var xMousePosition = 0;
var yMousePosition = 0;
document.onmousemove = function(e)
{
xMousePosition = e.clientX + window.pageXOffset;
yMousePosition = e.clientY + window.pageYOffset;
};
function configurar(element)
{
alert("Configurar");
}
function salir(element)
{
alert("Salir");
}
function mymenu(element)
{
var x = document.getElementById('ctxmenu1');
if(x) x.parentNode.removeChild(x);
var d = document.createElement('div');
d.setAttribute('class', 'ctxmenu');
d.setAttribute('id', 'ctxmenu1');
element.parentNode.appendChild(d);
d.style.left = xMousePosition-150 + "px";
d.style.top = yMousePosition + "px";
d.onmouseover = function(e) { this.style.cursor = 'pointer'; }
d.onclick = function(e) { element.parentNode.removeChild(d); }
document.body.onclick = function(e) { element.parentNode.removeChild(d); }
var p = document.createElement('p');
d.appendChild(p);
p.onclick=function() { configurar(element) };
p.setAttribute('class', 'ctxline');
p.innerHTML = "Configurar";
var p2 = document.createElement('p');
d.appendChild(p2);
p2.onclick=function() { salir(element) };
p2.setAttribute('class', 'ctxline');
p2.innerHTML = "Salir";
return false;
}
CSS:
.ctxmenu
{
position:absolute;
min-width: 128px;
height:auto;
padding: 8px;
margin:0;
margin-left:32px;
margin-top:-16px;
border: 1px solid #999;
background: #F8F8F8;
box-shadow: 2px 2px 2px #AAA;
z-index:11;
overflow: visible;
}
.ctxline
{
display:block;
margin:0px;
padding:2px 2px 2px 8px;
border:1px solid #F8F8F8;
border-radius:3px;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
overflow:visible;
}
.ctxline:hover
{
border:1px solid #BBB;
background-color: #F0F0F0;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%,
from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#e6e6e6', GradientType=0);
}
HTML:
<div onContextMenu="return mymenu(this)">
CLICK
</div>
Probe cambiando oncontextmenu por onclick pero nada, no sirve... ayudaaa
¿A mi me funciona tu código tal cual, que navegador tienes?
Mira:
http://jsfiddle.net/2fwqH/
Pero quiero activar el menu al presionar el click izquierdo no el derecho.
Como lo cambio?.
Prueba así:
var xMousePosition = 0;
var yMousePosition = 0;
window.onload = function () {
document.body.onclick = function () {
checkIfPossible(event);
}
document.getElementById("menu").onclick = function () {
mymenu(event, this)
}
}
document.onmousemove = function (e) {
xMousePosition = e.clientX + window.pageXOffset;
yMousePosition = e.clientY + window.pageYOffset;
};
function configurar(element) {
alert("Configurar");
}
function salir(element) {
alert("Salir");
}
function checkIfPossible(event) {
var temp = document.getElementById('ctxmenu1');
if (temp != null) temp.parentNode.removeChild(temp);
}
function mymenu(event, element) {
var x = document.getElementById('ctxmenu1');
if (x) x.parentNode.removeChild(x);
var d = document.createElement('div');
d.setAttribute('class', 'ctxmenu');
d.setAttribute('id', 'ctxmenu1');
element.parentNode.appendChild(d);
d.style.left = xMousePosition + "px";
d.style.top = yMousePosition + "px";
d.onmouseover = function (e) {
this.style.cursor = 'pointer';
}
d.onclick = function (e) {
element.parentNode.removeChild(d);
}
var p = document.createElement('p');
d.appendChild(p);
p.onclick = function () {
configurar(element)
};
p.setAttribute('class', 'ctxline');
p.innerHTML = "Configurar";
var p2 = document.createElement('p');
d.appendChild(p2);
p2.onclick = function () {
salir(element)
};
p2.setAttribute('class', 'ctxline');
p2.innerHTML = "Salir";
event.stopPropagation();
return false;
}
Y así:
<body>
<div id="menu">Click here!</div>
</body>
http://jsfiddle.net/2fwqH/1/
Muchas gracias por contestar... Pero es que al final e optado por un code mas simple solo con css
Cita de: 70N1 en 15 Julio 2014, 16:30 PM
Muchas gracias por contestar... Pero es que al final e optado por un code mas simple solo con css
Y ésto es lo que llamo estar haciendo copy-paste de los resultados de Google.
Si te parece voy a gastar el tiempo creando uno desde el principio... no fastidies.