Autor Zpráva
sniclman
Profil *
Dobrý den,

mám script pro otevření vlastního kontextového menu.

http://matraux.com/test.php

Použil jsem pro internet explorer styl
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#505050');
abych docílil stíňu za kontextovým menu.
Nevím ale proč mi nefunguje pak hover pro text v kontextovém menu. Když nepoužiju stínování tak hover mi funguje v naprostém pořádku.
Děkuji za rady.
ShiraNai7
Profil
sniclman:
V IE9 není problém. Pro starší IE (<9) doporučuji filtr vypnout podmíněným CSS.. jedná se o chybu v těchto verzích.
<!--[if lte IE 8]><link href="oldie.css" rel="stylesheet" type="text/css" /><![endif]-->

selektor {filter: none;}
Keeehi
Profil
ShiraNai7:
Byl by nějaký odkaz, kdy by si člověk mohl přečíst o této chybě více?
Chamurappi
Profil
Reaguji na sniclmana:
Proč používáš setAttribute? Opravdu je problém se stínem, nebo je příčina nefunkčnosti úplně jinde?


Reaguji na ShiraNaiho7:
jedná se o chybu v těchto verzích
Jakou konkrétně?

Pro starší IE (<9) doporučuji filtr vypnout podmíněným CSS
Divný postup. Devítka zná box-shadow, filter tam má jen kvůli starším verzím.
ShiraNai7
Profil
Chamurappi:
Divný postup. Devítka zná box-shadow, filter tam má jen kvůli starším verzím.
No tak ať tam ten filter vůbec nedává, když rozbije hover..

Jakou konkrétně?
Že by chybu s hoverem?
sniclman
Profil *
Chamurappi:
Proč používáš setAttribute? Opravdu je problém se stínem, nebo je příčina nefunkčnosti úplně jinde?

Ani nevím, zdálo se mi to dobré použít k document.createElement.
Přečetl jsem si "Doporučuji užívat standardní vlastnosti HTML DOMu místo getAttribute/setAttribute" a předělal všechny setAttribute.
Jen nevím jakou správnou syntaxi použít zde
object.setAttribute("onmouseup", "contentObject(event, this);");
Ale bohužel to nepomohlo.

ShiraNai7:
No tak ať tam ten filter vůbec nedává, když rozbije hover..
No ale já řeším právě problém jak sloučit tyto dva styly dohromady.
Chamurappi
Profil
Reaguji na sniclmana:
Jen nevím jakou správnou syntaxi použít zde
object.onmouseup = function(e)
{
  contentObject(e || window.event, this);
};
V některých prohlížečích je globální objekt window.event, v jiných se předává objekt s popisem události jako argument, zápis e || window.event srovnává tuto nekompatibilitu (logické nebo v JavaScriptu vrací buď první pravdivou hodnotu, nebo false).
sniclman
Profil *
Tak jsem to mírně předělal.
Text menu je samostatný DIV a stín tvoří také samostatný DIV.

Kompletní kód pro zájemce.
javascript:
<script type="text/javascript">
/*VYPNUTÍ KONTEXTOVÉHO MENU PRO ELEMENT - NASTAVENÍ FUKNCE PRAVÉHO TLAČÍTKA*/
function contentMenu(object){
if(object.oncontextmenu == null){object.oncontextmenu = function(){return false;};
object.onmouseup = function(e){contentObject(e || window.event, this);};
object.onmouseover = function(){return false;};}}

/*FUNKCE PRAVÉHO TLAČÍTKA*/
function contentObject(e, object){
if (e.which == 3 || e.button == 2){/*detekce pravého tlačítka pro IE a Firefox*/
topPos = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop)+e.clientY+2;/*pozice Y kurzoru v objektu*/
leftPos = (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft)+e.clientX+2;/*pozice X kurzoru v objektu*/
setupCloseObject(false);
if(typeof(openedMenu) == "object"){closeObject(openedMenu)};/*zavření předchozího kontextového menu*/
/*vytvoření kontextového menu a funkce pro zavření*/
openedMenu = document.createElement('div');
openedMenu.style.cssText = "top: "+topPos+"px; left: "+leftPos+"px; position: absolute;";
openedMenu.onmouseover = function(){setupCloseObject(false);};
openedMenu.onmouseout = function(){setupCloseObject(true);};
/*nastavení stínu kontextového menu*/
shadowMenu = document.createElement('div');
shadowMenu.className = "shadowmenu";
/*libovolné položky kontextového menu*/
textMenu = document.createElement('div');
textMenu.className = "textmenu";
textMenu.innerHTML='<p>Zpět</p><p>Vpřed</p><p>Obnovit</p><p>Zastavit<hr><p>Přidat stránku do záložek</p>';
/*vložení kontextového menu*/
object.appendChild(openedMenu);
openedMenu.appendChild(shadowMenu);
openedMenu.appendChild(textMenu);
setupCloseObject(true);}
else{return false;}}

/*ZAVŘENÍ KONTEXTOVÉHO MENU*/
function closeObject(id){
if(typeof(id)!="object"){id = document.getElementById(id);}
if(id != null && id.parentNode != null){id.parentNode.removeChild(id);}}

/*KONTROLA POZICE KURZORU V KONTEXTOVÉM MENU*/
function setupCloseObject(setup){
if(setup){document.onmousedown = function(){closeObject(openedMenu);};}
else{document.onmousedown = null;}}
</script>

style:
<style type="text/css">
.shadowmenu             {border: 1px #909090 solid; background-color: #FFFFFF; position: absolute; top: 0px; left: 0px;  width: 100%; height: 100%; box-shadow: 3px 3px 2px #909090; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#909090');}
.textmenu               {width: 200px; padding: 3px; position: relative; cursor: default;}
.textmenu p             {text-indent: 8%; font-family: arial; text-align: left; font-size: 13px; color: #000000; margin: 0px; padding: 0px;}
.textmenu p:hover       {color: #FFFFFF; background-color: #5E81BC;}
</style>

vložení elementu
<div onmouseover="contentMenu(this);" style="border: 1px red solid; width: 100px; height: 100px;">Right click</div>

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: