Javascript not IE proove!!?

This site is best viewed in a modern browser with JavaScript enabled.

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="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;
}

Arty_Effem

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

change to: var as=document.links;

B-Twien Bytes wrote:
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

B-Twien Bytes wrote:
@ 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".

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

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

That test does not identify the image links.

Arty_Effem

B-Twien Bytes wrote:
@ 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...

B-Twien_Bytes

@ bathurst_guy...

Nice advice, but the JS-script is included...That is the information I need ;-)

B-Twien_Bytes

@ Arty Effem...

Tried to send you an e-mail, but the menu said you do not wish to receive 'private e-mails'...;-)

That is too bad, because I do not know why you are not responding anymore about the "good code/response" you have given...

If you do not wish to post it on this forum, send me an e-mail. Please?!
Thanks a lot, because I DO really want to use the code...

Otherwise, just tell me to not bother you anymore...

B-Twien_Bytes

It is almost a month ago that I started this subject and I am still looking...

Bathurst_guy or others: any good advice on how to 'get to the right code'??
Would be very happy to move on after this subject ;-)

B-Twien_Bytes

@Arty and others...

I thought I finished this code, but after upgrading my firefox to 2.0 the javascript I used with your help is not working anymore....In IE either, I just tried it...

This is the page on the web:

http://www.avonturiers.nl/index.php?image_keuze=links

This is my html-code:

<script type="text/javascript" src="scripts.js"></script> 
</head>

<body>
<div id="middle">

<h1><a name="links">Links om te onthouden</a></h1>

<p>
	<b>Zit Anco niet op internet, dan is het Ewien wel. 'Want op internet kun je alles vinden', aldus Anco. 
	Een pagina <i>Links om te onthouden</i> kan dan ook niet ontbreken op onze persoonlijke website.</b><br>
	<br>
	Ga met je muis over het 'plaatje naar keuze' en dan verschijnt eronder enige informatie over en de link naar de betreffende website.<br>
	&nbsp;<br>
</p>

<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>De digitale nieuwsbrief voor iedereen die iets met Afrika heeft!<br>&nbsp;</li>
 </ul>

This is the JS:

// 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++)
   {
    if(!(i&1))
     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";
}

What went wrong? Is it the upgrade that made it not work anymore?
Any help / advice on this matter is more than welcome!!

Kor

What works wrong?