Jump to content
xisto Community
minimcmonkey

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

By minimcmonkey, in Programming

Recommended Posts

minimcmonkey    0

minimcmonkey
Posted

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>

Share this post

Link to post
Share on other sites

shadowx    0

shadowx
Posted

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.

Share this post

Link to post
Share on other sites

jlhaslip    4

jlhaslip
Posted

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.

Share this post

Link to post
Share on other sites

Saint_Michael    3

Saint_Michael
Posted

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" rel="stylesheet" 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" class="SimpleContextMenu">
		<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 class="container">Cointainer1</div>
	<div class="container">Cointainer2</div>
	<div class="container">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;	}}

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept