Javascript not IE proove!!?

[B-Twien Bytes]

Hello to you all,

This is my first message on the Webdeveloper.com, great website as I have seen so far...

This is my problem. I got a javascript that seems to work fine in FF 1.5.0.6, but not in IE (6)...Here is my description of my problem.

It might be a problem on "windows.onload" in combination of IE, but I do not know enough of Javascript, to be honest Any help is welcome, thanks in advance...

Below is the code of a html-page and a JS-code, which I want to use so information of a website shows up, as soon as you scroll over a certain thumbnail...Example (in FF) that works on: http://www.avonturiers.nl/links_new.html

========================== html page =======================

<div id="show"></div>

<div id="links">
<a href="#afrikanieuws"><img src="images/links/tn_afrikanieuws.jpg" alt="Afrikanieuws"></a>
<ul id="afrikanieuws" style="display:none">
<li><b>Afrikanieuws</b></li>
<li><a href="http://www.afrikanieuws.nl" target="_blank">http://www.afrikanieuws.nl</a></li>
<li>Description on Afrikanieuws</li>
</ul>

<a href="#cama"><img src="images/links/tn_camanl.jpg" alt="CAMA Zending Nederland"></a>
<ul id="cama" style="display:none">
<li><b>CAMA</b></li>
<li><a href="http://www.cama.nl" target="_blank">http://www.cama.nl</a></li>
<li>Description on CAMA</li>
</ul>
</div>

</div>

========================JS script ===========================

// Will DOM JavaScript be supported?
if(document.getElementById && document.createTextNode)
{
// add onload attribuut
window.onload = setUp;
}

function setUp()
{
var as = document.getElementById('links').getElementsByTagName('a');
// add a onclick-functie to every link
for(i = 0; i < as.length; i++)
{
as[i].onmouseover = function(){
show(this);
return false;
}
}
}

function show(s)
{
var id = s.href.match(/#(\w.+)/)[1];
var uls = document.getElementById('links').getElementsByTagName('div');
for(i = 0; i < uls.length; i++)
{
uls[i].style.display = "none";
}
// Give the <ul>'s a display=block to let the text come up
document.getElementById(id).style.display = "block";
}

[Arty Effem]

var as = document.getElementById('links').getElementsByTagName('a');

change to: var as=document.links;

var id = s.href.match(/#(\w.+)/)[1];

Remove the '.' then it will work with I.E. & Opera

You still have the problem that the text links fail the regex match, and will cause an error when hovered.

[Kor]

and a good habbit is to use local variables, not global,when it is not necessary.

for(var i=0;i<as.length;i++)

[B-Twien Bytes]

@ Arty, Kor

Thanks for your responses...I have changed the code into:

// Eerst kijken we of DOM JavaScript wel ondersteund is
if(document.getElementById && document.createTextNode)
{
   // Dan voegen we een onload attribuut toe
   window.onload = setUp;
}

function setUp()
{
   // Eerst pakken we alle links (<a>) die zich binnen het element
        // met het ID 'links' bevinden. (Dit element wordt straks een <ul>)
   var as = document.links;
        // Dan voegen we aan iedere link een onclick-functie toe
    for(var i = 0; i < as.length; i++)
   {
       as[i].onmouseover = function(){
             show(this);
             return false;
             }
   }
} 

function show(s)
{
   // We halen weer de waarde van het
        // href attribuut op. Die verwijst
        // immers naar de tekst die we
        // willen zien.
   var id = s.href.match(/#(\w+)/)[1];
        // Dan pakken we alle <ul> tags binnen
        // het element met ID 'links',
        // en zorgen ervoor dat ze allemaal
        // display='none' krijgen.
        // Hiermee zorg je ervoor dat je nooit
        // 2 teksten tegelijk open kunt hebben
   var uls = document.getElementById('links').getElementsByTagName('div');
   for(var i = 0; i < uls.length; i++)
   {
      uls[i].style.display = "none";
   }
   // Dan geven we het <ul> dat we bedoelen
        // display='block' zodat onze tekst verschijnt
   document.getElementById(id).style.display = "block";
}

Is that what you meant by your suggestions?

In FF it still works...In IE, the script reacts the same. It shows the alt-text and that is it...

Do you know of a better script that has the same effect?
If yes, I would be glad to know where to find it....

Thanks again!

[Arty Effem]

@ Arty, Kor

Thanks for your responses...I have changed the code into:

// Eerst kijken we of DOM JavaScript wel ondersteund is
if(document.getElementById && document.createTextNode)
{
   // Dan voegen we een onload attribuut toe
   window.onload = setUp;
}

function setUp()
{
   // Eerst pakken we alle links (<a>) die zich binnen het element
        // met het ID 'links' bevinden. (Dit element wordt straks een <ul>)
   var as = document.links;
        // Dan voegen we aan iedere link een onclick-functie toe
    for(var i = 0; i < as.length; i++)
   {
       as[i].onmouseover = function(){
             show(this);
             return false;
             }
   }
} 

function show(s)
{
   // We halen weer de waarde van het
        // href attribuut op. Die verwijst
        // immers naar de tekst die we
        // willen zien.
   var id = s.href.match(/#(\w+)/)[1];
        // Dan pakken we alle <ul> tags binnen
        // het element met ID 'links',
        // en zorgen ervoor dat ze allemaal
        // display='none' krijgen.
        // Hiermee zorg je ervoor dat je nooit
        // 2 teksten tegelijk open kunt hebben
   var uls = document.getElementById('links').getElementsByTagName('div');
   for(var i = 0; i < uls.length; i++)
   {
      uls[i].style.display = "none";
   }
   // Dan geven we het <ul> dat we bedoelen
        // display='block' zodat onze tekst verschijnt
   document.getElementById(id).style.display = "block";
}

Is that what you meant by your suggestions?

In FF it still works...In IE, the script reacts the same. It shows the alt-text and that is it...

Do you know of a better script that has the same effect?
If yes, I would be glad to know where to find it....

Thanks again!

When I made the changes that I described, it worked in FF, I.E, and Opera, in that the image links gradually assemble themselves into a vertical column as they are all hovered. I will include the working script that I have, in case there are any differences.
However, you need to modify the script to ignore the text links, otherwise they still generate errors when hovered.

// Eerst kijken we of DOM JavaScript wel ondersteund is
if(document.getElementById && document.createTextNode)
{
   // Dan voegen we een onload attribuut toe
   window.onload = setUp;
}

function setUp()
{
   // Eerst pakken we alle links (<a>) die zich binnen het element
        // met het ID 'links' bevinden. (Dit element wordt straks een <ul>)
   //var as = document.getElementById('links').getElementsByTagName('a');
   
   var as=document.links;
      
        // Dan voegen we aan iedere link een onclick-functie toe
    for(i = 0; i < as.length; i++)
   {
       as[i].onmouseover = function(){
             show(this);
             return false;
             }
   }
} 


function show(s)
{
   // We halen weer de waarde van het
        // href attribuut op. Die verwijst
        // immers naar de tekst die we
        // willen zien.
   //alert(s)
   var id = s.href.match(/#(\w+)/)[1];
        // Dan pakken we alle <ul> tags binnen
        // het element met ID 'links',
        // en zorgen ervoor dat ze allemaal
        // display='none' krijgen.
        // Hiermee zorg je ervoor dat je nooit
        // 2 teksten tegelijk open kunt hebben
   var uls = document.getElementById('links').getElementsByTagName('div');
   for(i = 0; i < uls.length; i++)
   {
      uls[i].style.display = "none";
   }
   // Dan geven we het <ul> dat we bedoelen
        // display='block' zodat onze tekst verschijnt
   document.getElementById(id).style.display = "block";
}

[KTspeed]

I am confused about what is suppose to happen. When you put your mouse over a thumnail is it suppose to show the detail of the page right below it. Is anything ever suppose to disapear?

This line I am most confused by:

var uls = document.getElementById('links').getElementsByTagName('div');

What are you trying to put into that variable? The div tags that are in the element with an id of "links"? If so, you shouldnt be getting anything becasue there are no div tags inside of the element with an id of "links".

<div id="links"> ... no divs ... </div>

correct me if i'm wrong. It's confusing me.

Edit: nevermind, looks like arty got it while i was typing

[KTspeed]

If you take arty's code and then just replace the setUp() function with this one, it will prevent those errors when you put your mouse over the text links.

function setUp()
{
   // Eerst pakken we alle links (<a>) die zich binnen het element
        // met het ID 'links' bevinden. (Dit element wordt straks een <ul>)
   //var as = document.getElementById('links').getElementsByTagName('a');
   
   var as=document.links;
      
        // Dan voegen we aan iedere link een onclick-functie toe
    for(i = 0; i < as.length; i++)
   {
       if(as[i].href.split('#')[0]==self.location){
             as[i].onmouseover = function(){
                   show(this);
                   return false;
             }
       }
   }
}

[B-Twien Bytes]

@ KTspeed, @ Arty

Tried both suggestions you made, but FF still works great, IE not at all. It doesn't give any errors, but no action takes place either...

?? Sorry ;-(

[KTspeed]

I tried both with IE6, is this what you used?

[Arty Effem]

if(as[i].href.split('#')[0]==self.location)

That test does not identify the image links.

[Arty Effem]

@ KTspeed, @ Arty

Tried both suggestions you made, but FF still works great, IE not at all. It doesn't give any errors, but no action takes place either...

?? Sorry ;-(

Try This. I set it simply to act on alternate links. Please don't tell me it doesn't work.

[B-Twien Bytes]

@ Arty

Thanks for all your work...I am at work right now, but will try it tonight.

Will come back to you, thanks!

[B-Twien Bytes]

@ Arty

Cool, I tried it and both FF and IE work!!! How did you do that? What is the final JS-code...?

I wanted to have it first as on the website http://www.hallmark.nl/ecards (you choose a topic, you scroll and you see an image that fits with the topic), but this is really good too...

p.s. I found out that viewing the website in FF / IE tab doesn't give the same results as viewing it directly in IE (sign)

[B-Twien Bytes]

@ Arty

Can you please post the last JS-script that worked for this matter? I want to be sure I use the right script this time ;-)

Thanks a lot....

[bathurst_guy]

Just view the source of that page...