[SOLVED] Javscript broken in IE 6 (but nothing else, it would seem)...

[jonnymorris]

So what's new, I hear you cry. In the interests of not looking like an incompetent buffoon in front of the surfers out there who don't know any better than to use IE, could someone please help me out with making my javascript code IE 6 - friendly?

Here is my site:
http://www.jonathanmortimer.co.uk/test2

Have a look around, you'll probably soon discover where the problems are (I cannot see them as I don't have IE, but I have been informed that they are mainly on the bottom row of icons).

This site works perfectly in Safari and Firefox, although it is not 100% complete yet.

Thanks for your help!

[MikeHopley]

Originally Posted by jonnymorris

(I cannot see them as I don't have IE...).

Then get it. Sadly, IE 6 & 7 are essential software for web designers.

Multiple IEs

[jonnymorris]

Originally Posted by MikeHopley

Then get it. Sadly, IE 6 & 7 are essential software for web designers.

Multiple IEs

Fortunately Microsoft no longer make IE for Mac OS X.

[Aso]

Yes, IE 6 is certainly struggling with this. You should really make the most of the DOM here.

Instead of using inline event handlers, use a for loop to cycle through your links and apply the onclick event when the DOM is ready.

And instead of innerHTML, use appendChild. IE6 has excellent DOM Level 1 support, and using this sort of practice should greatly increase the chances of compatibility.

[jonnymorris]

Originally Posted by aso186

Yes, IE 6 is certainly struggling with this. You should really make the most of the DOM here.

Instead of using inline event handlers, use a for loop to cycle through your links and apply the onclick event when the DOM is ready.

And instead of innerHTML, use appendChild. IE6 has excellent DOM Level 1 support, and using this sort of practice should greatly increase the chances of compatibility.

I'm not terribly good with javascript, it has to be said, and it's years since I did any C programming (which I wasn't very good at). Any help on the for loop, how to cycle through the links, and what DOM parts I should be looking at?
The code I have was written by someone else, I'm not even sure how that works.

[Aso]

I'll try and write up something later. For now I recommend reading up on W3Schools Javascript tutorials.

Even if you're still not sure how to write the script, you'll get to grips with the syntax and methods

[Aso]

OK Jonny, I've got something

I've used a script from Jeremy Keith in his book 'DOM Scripting' (which is a great read for learning Javascript) and modified very slightly (plus commented it too).

First, get rid of all the onclick handlers in your markup, and set the href of the link to your target image. Your #thumbs section should look like this;

HTML: Select all

<div id="thumbs">
    <a href="http://www.jonathanmortimer.co.uk/test2/images/graphic_main_neyedc.png" title="NEYEDC Logo">
    <img width="97" height="76" alt="Logo - NEYEDC" src="http://www.jonathanmortimer.co.uk/test2/images/graphic_neyedc.png"></a>

    <a href="http://www.jonathanmortimer.co.uk/test2/images/graphic_main_leaflet1.png" title="NEYEDC Leaflet">
    <img width="97" height="76" alt="Leaflet - NEYEDC" src="http://www.jonathanmortimer.co.uk/test2/images/graphic_leaflet.png"></a>

    <a href="http://www.jonathanmortimer.co.uk/test2/images/graphic_main_garage1.png" title="Garage Photomanipulation">
    <img width="97" height="76" alt="Photomanip - Garage" src="http://www.jonathanmortimer.co.uk/test2/images/graphic_garage.png"></a>
    
    <a href="http://www.jonathanmortimer.co.uk/test2/images/graphic_main_trees1.png" title="Trees">
    <img width="97" height="76" alt="Photomanip - Trees" src="http://www.jonathanmortimer.co.uk/test2/images/graphic_trees.png"></a>
                    
    <a href="http://www.jonathanmortimer.co.uk/test2/images/graphic_main_goodieshoes.png" title="Goodie New Shoes">
       <img width="97" height="76" alt="Goodie New Shoes" src="http://www.jonathanmortimer.co.uk/test2/images/graphic_goodieshoes.png"></a>
</div>

<p id="desc">NEYEDC Logo</p>

Important!: Change the name attribute of your main image to an id, and change your paragraph id description to desc, like so;

HTML: Select all

<img id="mainimage" src="http://www.jonathanmortimer.co.uk/test2/images/graphic_main_neyedc.png" alt="Main image"/>
...
<p id="desc">NEYEDC Logo</p>

Now link to the attached script in the <head> using;

HTML: Select all

<script type="text/javascript" src="path/to/script.js"></script>

Please do read through the script and try to understand what it's doing If you have any queries please ask.

NOTE: I don't usually do this sort of thing, but since I'm learning it myself it's useful for me to practice whenever possible!


Please rename file extension to .js (EDIT: modified 18:39 GMT 30/03/08)

[jonnymorris]

Thanks muchly! This does the trick for IE 6 at least, and still works for Firefox and Safari.

One thing though.. it does not change the link tag that surrounds the main image. Reading through the js code, presumably I could add this in by getting the link perhaps from an id contained in the <a> tag for each thumb and set that to be the main image link using the same method that was used to set the image?

I'm not sure what everything in the js code does or how it works, it would be a case of best guess, trial and error for me. Wish me luck!

[jonnymorris]

BY JOVE I'VE DONE IT!!! Hold on, let me check that I wasn't dreaming... *pinch* OW!

With the very much appreciated javascript functions provided by you, of course

It now allows a through-click on the main image (but only in the photo and web categories, I used your original js code for the graphics one as I don't want through-clicks there). I just need to create a couple more pages in my large image set and that part of it will be complete.. unless there's a way to detect when the name="" attribute is empty and not set the corresponding attribute, hmm...


I'm a bit of a slow learner when it comes to programming I'm afraid, though if I think about it long enough and come back to it later, it will sink in eventually.

[Aso]

Glad to hear it!

Keep up the learning