HOME       >>       Programming

Browser Compatibility Problem With Firefox - Javascript + Css Having trouble making a script work right - any suggestions?


minimcmonkey

Hi,Im working on a website, and im trying to make a right-click menu, which opens on right click, wherever the cursor is, and closes on mouse out.I wrote the code below, and when i ran it in IE it ran fine, just how i wanted it to work.However in firefox, the menu just opened in the top left. im presuming this is because it doesnt like my style changing in the javascript.Any ideas, and suggestions?If i cant make this work, i will just make it so it works slightly differently when viewev in firefox so that it can just open in one place.All ideas appreciated.

<script type="text/javascript">function coordinates(event){if (event.button==2) { var x=event.x-6;var y=event.y-6;document.getElementById("element").style.left=x;document.getElementById("element").style.top=y;document.getElementById("element").style.visibility="visible";}}</script><script type="text/javascript">function hideme(){document.getElementById("element").style.visibility="hidden";}</script><style type="text/CSS">#element { position: absolute; top: 0px; left: 0px; background-color: 568934; border: 3px dashed; visibility: hidden; z-index: 1;}</style></head><body bgcolor="112233" onmousedown="coordinates(event)" oncontextmenu="return false;"><div id="element" onmouseout="hideme()">hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br></div> </body></html>


shadowx

Im not much of an expert with JS and these sorts of things, i prefer the back end of websites as it were but i have a few ideas. Firstly make it visible in the CSS and view it in FF, does it appear in the right place? If not then you know you have a problem with the CSS and the JS has nothing to do with it, if its in the right place when visible but wrong when the JS gets involved then its the JS.It could be due to the way FF and IE parse the HTML, as far as i know IE loads the page as one "element" and FF does it line by line, dsiplaying wht it reads as it goes along, so it could be due to that. But as i said, first thing to try is to see where it is when its visible and work from there.


jlhaslip

I know very little javascript, so I can't help you with that, but it appears that FF is placing the div exactly where it is told to by the use of position: absolute.Check the Dom Console using Firebug extension to confirm that. FF might use something other than style.left and style.top to position the on-click event co-ordinates, too.If so, you will need to program a conditional if code sequence to check whether FF or IE is being used and then apply the correct coding.


Saint_Michael

Thats what I concluded as well haslip, but I have feeling though that it is the javascript itself so I did a little searching and found this script that does what you need and it includes CSS as well. I also included the code down below for quicker retrieval.

 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://forums.xisto.com/no_longer_exists/; <html xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en"> <head> <title>My project</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" href="webtoolkit.contextmenu.css" /> <script type="text/javascript" src="webtoolkit.contextmenu.js"></script> <script type="text/javascript"> SimpleContextMenu.setup({'preventDefault':true, 'preventForms':false}); SimpleContextMenu.attach('container', 'CM1'); </script> </head> <body> <ul id="CM1" > <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> <input type="text" name="field" value="" /> <div >Cointainer1</div> <div >Cointainer2</div> <div >Cointainer3</div> </body> </html>

 

CSS

ul.SimpleContextMenu { display: none; position: absolute; margin: 0px; padding: 0px; font-family: verdana; font-size: 12px; list-style-type: none; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;} ul.SimpleContextMenu li { border-bottom: 1px solid #000000; } ul.SimpleContextMenu li a { display: block; width: 100px; padding: 2px 10px 3px 10px; text-decoration: none; color: #ff0000; background: #eeeeee; } ul.SimpleContextMenu li a:hover { text-decoration: none; color: #ffffff; background: #ff0000; }

JAVASCRIPT

 

/**** Simple Context Menu* [url="http://forums.xisto.com/no_longer_exists/ SimpleContextMenu = { // private attributes _menus : new Array, _attachedElement : null, _menuElement : null, _preventDefault : true, _preventForms : true, // public method. Sets up whole context menu stuff.. setup : function (conf) { if ( document.all && document.getElementById && !window.opera ) { SimpleContextMenu.IE = true; } if ( !document.all && document.getElementById && !window.opera ) { SimpleContextMenu.FF = true; } if ( document.all && document.getElementById && window.opera ) { SimpleContextMenu.OP = true; } if ( SimpleContextMenu.IE || SimpleContextMenu.FF ) { document.oncontextmenu = SimpleContextMenu._show; document.onclick = SimpleContextMenu._hide; if (conf && typeof(conf.preventDefault) != "undefined") { SimpleContextMenu._preventDefault = conf.preventDefault; } if (conf && typeof(conf.preventForms) != "undefined") { SimpleContextMenu._preventForms = conf.preventForms; } } }, // public method. Attaches context menus to specific class names attach : function (classNames, menuId) { if (typeof(classNames) == "string") { SimpleContextMenu._menus[classNames] = menuId; } if (typeof(classNames) == "object") { for (x = 0; x < classNames.length; x++) { SimpleContextMenu._menus[classNames[x]] = menuId; } } }, // private method. Get which context menu to show _getMenuElementId : function (e) { if (SimpleContextMenu.IE) { SimpleContextMenu._attachedElement = event.srcElement; } else { SimpleContextMenu._attachedElement = e.target; } while(SimpleContextMenu._attachedElement != null) { var className = SimpleContextMenu._attachedElement.className; if (typeof(className) != "undefined") { className = className.replace(/^\s+/g, "").replace(/\s+$/g, "") var classArray = className.split(/[ ]+/g); for (i = 0; i < classArray.length; i++) { if (SimpleContextMenu._menus[classArray[i]]) { return SimpleContextMenu._menus[classArray[i]]; } } } if (SimpleContextMenu.IE) { SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentElement; } else { SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentNode; } } return null; }, // private method. Shows context menu _getReturnValue : function (e) { var returnValue = true; var evt = SimpleContextMenu.IE ? window.Event : e; if (evt.button != 1) { if (evt.target) { var el = evt.target; } else if (evt.srcElement) { var el = evt.srcElement; } var tname = el.tagName.toLowerCase(); if ((tname == "input" || tname == "textarea")) { if (!SimpleContextMenu._preventForms) { returnValue = true; } else { returnValue = false; } } else { if (!SimpleContextMenu._preventDefault) { returnValue = true; } else { returnValue = false; } } } return returnValue; }, // private method. shows context menu _show : function (e) { SimpleContextMenu._hide(); var menuElementId = SimpleContextMenu._getMenuElementId(e); if (menuElementId) { var m = SimpleContextMenu._getMousePosition(e); var s = SimpleContextMenu._getScrollPosition(e); SimpleContextMenu._menuElement = document.getElementById(menuElementId); SimpleContextMenu._menuElement.style.left = m.x + s.x + 'px'; SimpleContextMenu._menuElement.style.top = m.y + s.y + 'px'; SimpleContextMenu._menuElement.style.display = 'block'; return false; } return SimpleContextMenu._getReturnValue(e); }, // private method. Hides context menu _hide : function () { if (SimpleContextMenu._menuElement) { SimpleContextMenu._menuElement.style.display = 'none'; } }, // private method. Returns mouse position _getMousePosition : function (e) { e = e ? e : window.Event; var position = { 'x' : e.clientX, 'y' : e.clientY } return position; }, // private method. Get document scroll position _getScrollPosition : function () { var x = 0; var y = 0; if( typeof( window.pageYOffset ) == 'number' ) { x = window.pageXOffset; y = window.pageYOffset; } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { x = document.documentElement.scrollLeft; y = document.documentElement.scrollTop; } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { x = document.body.scrollLeft; y = document.body.scrollTop; } var position = { 'x' : x, 'y' : y } return position; }}


VIEW DESKTOP VERSION REGISTERGET FREE HOSTING

Xisto.com offers Free Web Hosting to its Members for their participation in this Community. We moderate all content posted here but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2001-2019 by Xisto Corporation. All Rights Reserved.