Simple Javascript that works in Firefox, not in IE.

div.onmouseover = function () {alert('hey');};

Page 1 of 1

13 Replies - 1656 Views - Last Post: 20 May 2009 - 03:24 AM

#1 young.steveo  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 37
  • Joined: 14-May 09

Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 09:35 AM

div.onmouseover = function () {alert('hey');};

Very simple, yet I get no alert in IE 8.
Is This A Good Question/Topic? 0
  • +

Replies To: Simple Javascript that works in Firefox, not in IE.

#2 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 09:39 AM

It works fine in my version of IE8 (Windows Vista). Are you sure the "div"-variable is properly set?

View Postyoung.steveo, on 19 May, 2009 - 06:35 PM, said:

div.onmouseover = function () {alert('hey');};

Very simple, yet I get no alert in IE 8.

Was This Post Helpful? 0
  • +
  • -

#3 young.steveo  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 37
  • Joined: 14-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 09:57 AM

Here is the whole code:
var innerDiv = document.getElementById("innerDiv");
var children = document.getElementById("star_tracker_form").childNodes;
for (i = 0; i < children.length; i++) {
	var coordinates = children[i].value;
	var ster = "star_" + coordinates;
	var star_check = $(ster);
	if (!star_check) {
		star_track_holder[i] = ster;
		var str = coordinates.split(/,/g);
		var div = document.createElement("div");
		div.style.position = "absolute";
		div.style.width = "5px";
		div.style.height = "5px";
		div.style.top = str[1] + "px";
		div.style.left = str[0] + "px";
		div.style.cursor = "pointer";
		div.style.zIndex = 2;
		div.setAttribute("id", "star_" + coordinates);
		div.setAttribute("name", "star_" + coordinates);
		innerDiv.appendChild(div);
		div.onmouseover = function () {star_name_pop(this);};
		div.onmouseout = function() {
		}
	}
}

As you see, I'm creating the div variable as a new element, appending the new div to the innerDiv element, and setting it's onmouseover attributes.

I know that the getElementById("star_tracker_form").childNodes; is working, because if I put an alert() in the loop right after the ".appendChild(div);" and before the "div.onmouseover" I get one alert for each child node.

I know that innerDiv exists because it is used in other parts of the code in exactly the same manner. innerDiv is not created at runtime, it is a div in the HTML document.

However, once I put the alert in the onmouseover, nothing happens. Even if I replace the "star_name_pop(this);" with a simple alert(), like in my first example, I get nothing.

I'm stumped!
Was This Post Helpful? 0
  • +
  • -

#4 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 10:06 AM

Well, me too. It works on my computer somehow, I tried with this simple code:
<html>
	<head>
		<title>test</title>
		<script type="text/javascript">
			window.onload = function()
			{
				var div = document.createElement("div");
				div.style.position = "absolute";
				div.style.width = "5px";
				div.style.height = "5px";
				div.style.cursor = "pointer";
				
				// Makes it able to see the new div
				div.style.border = "1px solid #000";
				
				document.getElementById('div').appendChild(div);
				div.onmouseover = function () {alert("hey");};
				div.onmouseout = function() {
				}
			}
		</script>
	</head>
	<body>
		<div id="div" style="width: 50px; height: 50; border: 1px solid #000"></div>
	</body>
</html>


View Postyoung.steveo, on 19 May, 2009 - 06:57 PM, said:

...

I'm stumped!

Was This Post Helpful? 0
  • +
  • -

#5 young.steveo  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 37
  • Joined: 14-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 10:06 AM

I just noticed that the "div.style.cursor = 'pointer';" isn't working either, so maybe the div's aren't being created? I wonder why.
Was This Post Helpful? 0
  • +
  • -

#6 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 10:11 AM

Test it in Firefox and check the Error Console afterwards, then you should be able to see any javascript errors and where they occurred!

View Postyoung.steveo, on 19 May, 2009 - 07:06 PM, said:

I just noticed that the "div.style.cursor = 'pointer';" isn't working either, so maybe the div's aren't being created? I wonder why.

Was This Post Helpful? 0
  • +
  • -

#7 young.steveo  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 37
  • Joined: 14-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 10:24 AM

Good suggestion. I just did that and found no javascript errors in Firefox Error Console.


The div is definitely being created and positioned: I put these alerts in the code right after appending the div to innerDiv, and I get the expected values I'm requesting:
alert(div.id);alert(div.style.top);alert(div.style.left);


BTW, you can see the code fail at http://space.mygamehandle.com

This section of code creates non-visible divs over the stars once you have zoomed in close enough, and when you mouse over the div, you will see the pointer cursor and the name of the star will show up on the top left of the map window.

If you load the page in Firefox, you will see the proper behavior. IE 8, I get no pointer finger, and no star name (makes me think the div is not being created or is being positioned somewhere offscreen or not on the star, but this is not the case since I verified the positioning with some debugging alerts.)
Was This Post Helpful? 0
  • +
  • -

#8 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 10:32 AM

Hmm, very weird, I still get the "tile_names is undefined" error in IE8 though, (row 995, space.js).

Try setting a distinct background-color on the divs so that you actually can see them (if you didn't already try that), IE is pretty known for its CSS incompatibility issues and even though the coordinates are correct the divs might be placed elsewhere!
Was This Post Helpful? 0
  • +
  • -

#9 young.steveo  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 37
  • Joined: 14-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 10:48 AM

View PostWimpy, on 19 May, 2009 - 09:32 AM, said:

I still get the "tile_names is undefined" error in IE8


When do you get this error? I'm not getting it in the error console in FF, in the script debugger addon for FF, or in IE 8.
Was This Post Helpful? 0
  • +
  • -

#10 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 10:57 AM

I get it in IE8 right from the start while the page is loading, and in IETester running in IE7-mode at the same specific moment.

View Postyoung.steveo, on 19 May, 2009 - 07:48 PM, said:

View PostWimpy, on 19 May, 2009 - 09:32 AM, said:

I still get the "tile_names is undefined" error in IE8


When do you get this error? I'm not getting it in the error console in FF, in the script debugger addon for FF, or in IE 8.

Was This Post Helpful? 0
  • +
  • -

#11 young.steveo  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 37
  • Joined: 14-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 11:01 AM

Now here is the strangest!
Once I added div.style.backgroundColor = "red"; to the code, all of the divs appear!
They are red, and they have the proper onmouseover attributes. The name of the star shows up and the cursor changes to a pointer.
But not when I remove the background color attribute... :crazy: :v:
Was This Post Helpful? 0
  • +
  • -

#12 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 11:11 AM

Then try setting the background-color to transparent! :) If it works then it's awesome, if not, try something else! ^^ hehe

View Postyoung.steveo, on 19 May, 2009 - 08:01 PM, said:

Now here is the strangest!
Once I added div.style.backgroundColor = "red"; to the code, all of the divs appear!
They are red, and they have the proper onmouseover attributes. The name of the star shows up and the cursor changes to a pointer.
But not when I remove the background color attribute... :crazy: :v:

This post has been edited by Wimpy: 19 May 2009 - 11:12 AM

Was This Post Helpful? 0
  • +
  • -

#13 young.steveo  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 37
  • Joined: 14-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 19 May 2009 - 03:27 PM

Well, setting it to transparent doesn't work, it behaves the same as no background color.

Why in the world would having a background color matter? Shouldn't the div be there with or without it?

UPDATE

I seem to have fixed the problem by adding
div.innerHTML = "&nbsp;";
Still baffling as to why it's needed.
Was This Post Helpful? 0
  • +
  • -

#14 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Simple Javascript that works in Firefox, not in IE.

Posted 20 May 2009 - 03:24 AM

That's just how IE works. It was the same thing, now that you mentioned it, when I made a javascript yatzy some months ago, the score table looked ugly until I added "&nbsp;" to every cell in it. : /

View Postyoung.steveo, on 20 May, 2009 - 12:27 AM, said:

Well, setting it to transparent doesn't work, it behaves the same as no background color.

Why in the world would having a background color matter? Shouldn't the div be there with or without it?

UPDATE

I seem to have fixed the problem by adding
div.innerHTML = "&nbsp;";
Still baffling as to why it's needed.

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1