...

View Full Version : Why won't my JS work in IE?



sh33n
06-06-2006, 03:22 PM
Basically I've coded a site that works perfectly in FireFox, but it doesn't work at all in IE!!

Is there anyway I can get this sorted without have to resort to recoding the whole site?

When you move your mouse over the blue boxes the image should change and the box highlight, but under IE is a comptely static page!

http://www.sh33n.com/bluewindow/format.htm

Any help would be great!

Thanks,
Sean.

Kor
06-06-2006, 03:29 PM
you have speratated wrong the functions in handler

onmouseover="changeImage(1),changeRoll(1)"
replace commas with semicolons
onmouseover="changeImage(1);changeRoll(1)"

and so on all over the page.

sh33n
06-06-2006, 03:53 PM
I gave that a bash, but no joy unfortunately.

Any other ideas?

Cheers,
Sean.

Kor
06-06-2006, 04:03 PM
use getElementById all over as long as you have id's. Some places you have repetead the same if() conditions...

sh33n
06-07-2006, 01:39 PM
I've tried doing that but it doesn't work.

Strangely if I add the following div tags into the table before I define rows it works.

<div id="dynloadarea2" style="width:0px;height:0px"></div>
<div id="dynloadarea1" style="width:0px;height:500px"></div>

Problem is that this pushes my row of boxes below the images which I don't want. If I change the second div to height 0px then it's in the right place (almost) but then the JS doesn't work.

Seems very odd, I must have missed something :(

HouseElf
06-09-2006, 09:19 PM
Basically I've coded a site that works perfectly in FireFox, but it doesn't work at all in IE!!

Is there anyway I can get this sorted without have to resort to recoding the whole site?

When you move your mouse over the blue boxes the image should change and the box highlight, but under IE is a comptely static page!

http://www.sh33n.com/bluewindow/format.htm

Any help would be great!

Thanks,
Sean.

Hello sh33n,

I had the solution, the same day, but couldn't get registered. I noticed the botch that is now up in place of the original. Shame. The solution is quite straight-forward, yet, not so easy to spot. If you set the border of the offending table, you will see that it overlaps the pics that are serving the mouse events.

Have a look at this:

<SCRIPT type="text/javascript">
<!--

function changeOut()
{
var dir = "http://www.sh33n.com/bluewindow/img/"
this.src = dir + "off.gif"
}

function changeOver()
{
var dir = "http://www.sh33n.com/bluewindow/img/"
var arch = 'http://www.sh33n.com/bluewindow/img/architecture/'

this.src = dir + "on.gif"
document.getElementById('image01').src = arch + this.pic + ".jpg"
}

function initialise()
{
var tr = document.getElementById("boxes").getElementsByTagName("TR")[1]
var dir = "http://www.sh33n.com/bluewindow/img/"

for( var i = 1 ; i < 19 ; i++ )
{
var td = document.createElement("TD")
var img = document.createElement("IMG")
img.pic = i
img.onmouseover = changeOver
img.onmouseout = changeOut
img.src = dir + "off.gif"
td.appendChild(img)
tr.appendChild(td)
}
}

onload = initialise

</SCRIPT>

</HEAD>

<BODY style="margin:0; overflow:auto">

<TABLE width="80%" bgcolor="#000000">
<TD>
<TABLE border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="http://www.sh33n.com/bluewindow/pngs/title.gif" width="29" height="430"></td>
<td><img src="http://www.sh33n.com/bluewindow/pngs/black.gif" width="185" height="357"><br>
<img src="http://www.sh33n.com/bluewindow/pngs/name.gif" width="185" height="73"></td>
<td>
<img src="http://www.sh33n.com/bluewindow/pngs/black2.gif" width="135" height="67"><br>
<img src="http://www.sh33n.com/bluewindow/pngs/arch.gif" width="135" height="19"><br>
<img src="http://www.sh33n.com/bluewindow/pngs/mini.gif" width="135" height="26"><br>
<img src="http://www.sh33n.com/bluewindow/pngs/nature.gif" width="135" height="25"><br>
<img src="http://www.sh33n.com/bluewindow/pngs/port.gif" width="135" height="25"><br>
<img src="http://www.sh33n.com/bluewindow/pngs/black3.gif" width="135" height="195"><br>
<img src="http://www.sh33n.com/bluewindow/pngs/pub.gif" width="135" height="73"></td>
</tr>
</TABLE>
</TD>
<TD>
<TABLE id="boxes" align="right" vspace="0">
<TR height="10"></tr>
<TR valign="top"></TR>
<TR height="10"></TR>
<TR valign="top" align="left"><TD colspan="20" width="475" align="left"><img src="http://www.sh33n.com/bluewindow/img/architecture/1.jpg" id="image01" align="left"></TD></TR>
</TABLE>
</TABLE>

I also replaced the javascript with something slightly more elegant, because the original one hurt my eyes. But it works, as you have it, as long as you fix the table issue. The javascript I wrote generates the mouseover pics, instead of typing out the HTML.

The original site looks very pretty.

Have fun.

sh33n
06-10-2006, 09:32 AM
Fantastic, I'll give that a go and see how it works out.

Thanks a lot for the help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum