www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: Javascript not IE proove!!?

  1. #1
    Join Date
    Aug 2006
    Location
    Bamako, Mali
    Posts
    52

    Javascript not IE proove!!?

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

  2. #2
    Join Date
    Aug 2006
    Location
    England
    Posts
    665
    var as = document.getElementById('links').getElementsByTagName('a');
    change to: var as=document.links;
    Quote Originally Posted by B-Twien Bytes
    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.
    Scripterlative.com

    PM = 'PayPal Mode'

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    and a good habbit is to use local variables, not global,when it is not necessary.

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

  4. #4
    Join Date
    Aug 2006
    Location
    Bamako, Mali
    Posts
    52
    @ Arty, Kor

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

    Code:
    // 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!

  5. #5
    Join Date
    Aug 2006
    Location
    England
    Posts
    665
    Quote Originally Posted by B-Twien Bytes
    @ Arty, Kor

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

    Code:
    // 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.

    Code:
    // 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";
    }
    Scripterlative.com

    PM = 'PayPal Mode'

  6. #6
    Join Date
    Jun 2006
    Location
    Wisconsin
    Posts
    58
    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:
    Code:
    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
    Last edited by KTspeed; 08-29-2006 at 11:51 AM.

  7. #7
    Join Date
    Jun 2006
    Location
    Wisconsin
    Posts
    58
    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.

    Code:
    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;
                 }
           }
       }
    }

  8. #8
    Join Date
    Aug 2006
    Location
    Bamako, Mali
    Posts
    52
    @ 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 ;-(

  9. #9
    Join Date
    Jun 2006
    Location
    Wisconsin
    Posts
    58
    I tried both with IE6, is this what you used?

  10. #10
    Join Date
    Aug 2006
    Location
    England
    Posts
    665
    Quote Originally Posted by KTspeed
    Code:
    if(as[i].href.split('#')[0]==self.location)
    That test does not identify the image links.
    Scripterlative.com

    PM = 'PayPal Mode'

  11. #11
    Join Date
    Aug 2006
    Location
    England
    Posts
    665
    Quote Originally Posted by 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 ;-(
    Try This. I set it simply to act on alternate links. Please don't tell me it doesn't work.
    Scripterlative.com

    PM = 'PayPal Mode'

  12. #12
    Join Date
    Aug 2006
    Location
    Bamako, Mali
    Posts
    52
    @ Arty

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

    Will come back to you, thanks!

  13. #13
    Join Date
    Aug 2006
    Location
    Bamako, Mali
    Posts
    52
    @ 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)

  14. #14
    Join Date
    Aug 2006
    Location
    Bamako, Mali
    Posts
    52
    @ 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....

  15. #15
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles