JavaScript IE Compatibility Issue

Discussion in 'Javascript' started by mr.mattyg@gmail.com, Mar 31, 2007.

  1. Guest

    I might as well start off like everyone else who posts problems they
    are having....So I'm new to JavaScript.....

    Anywho, I have a page that lists 15 or so thumbnails and then one big
    image of one of those thumbnails. I wrote some javascript code that
    when you click on the thumbnail the real picture of that thumbnail
    loads in the big image on the page. So essentially I wrote some very
    simple code that replaces the "src" of an image tag on an onClick
    event. I also replace some text within some elements that are tagged
    with an ID. Everything works great in all browsers except in internet
    explorer 6.0 (and possibly other versions of IE, just 6.0 is all I'm
    using). If anyone has run into this problem before, or notices
    something wrong with the code, any insight would be GREAT. Thanks
    All,


    /*******************JAVA SCRIPT FUNCTION***********************/

    <script type="text/javascript">
    function click(name, title, susser, photographer, location)
    {
    fool = "http://www.gnarwire.com/photos/guest/" + name;
    document.photo.src = fool;
    document.getElementById('picTitle').innerHTML= title + " in " +
    location;
    document.getElementById('picSusser').innerHTML= susser;
    document.getElementById('picPhotographer').innerHTML= photographer;

    }
    </script>

    /****************THUMBNAIL SECTION*********************/

    <a class="thumbnail">
    <img src="photos/guest/th256347_2Aguille du Midi 034.jpg"
    onclick="click('256347_2Aguille du Midi 034.jpg', 'Crevasse Rescue
    Training', 'Topher Plimpton', 'Mike Schirf', 'Mer de Glace');"
    border="0" width="70px" height="70px">
    </a>
    <a class="thumbnail">
    <img src="photos/guest/th256346_poubell 003.jpg"
    onclick="click('256346_poubell 003.jpg', 'Harny Suss\'n Le Poubelle',
    'Johannes Schmid', 'Mike Schirf', 'Chamonix');" border="0"
    width="70px" height="70px">
    </a>
    <a class="thumbnail">
    <img src="photos/guest/th256345_MattToph.jpg"
    onclick="click('256345_MattToph.jpg', 'Mt. Blanc', 'Topher and Matt',
    'Mike Schirf', 'Mt. Buet -- Chamonix');" border="0" width="70px"
    height="70px">
    </a>

    /*********************BIG IMAGE SECTION********************/
    <div class="post" id="post-1">
    <H2 id="picTitle">
    Crevasse Rescue Training in Mer de Glace
    </H2>
    <div class="entry">
    <img src="photos/guest/256347_2Aguille du Midi 034.jpg" name="photo">
    </div>
    <div class="postmetadata">
    <h3 align="center">
    <span> Susser: </span>
    <span id="picSusser">Topher Plimpton</span>
    &nbsp &nbsp
    <span> Photographer:<span>
    <span id="picPhotographer">Mike Schirf</span> </h3>
    </div>
    </div>
    , Mar 31, 2007
    #1
    1. Advertising

  2. Lee Guest

    said:
    >
    >Everything works great in all browsers except in internet
    >explorer 6.0 (and possibly other versions of IE, just 6.0 is all I'm
    >using).
    >/*******************JAVA SCRIPT FUNCTION***********************/
    >
    ><script type="text/javascript">
    >function click(name, title, susser, photographer, location)


    Change the name of your function. IE assigns a method named
    "click" and silently ignores the one you create. You'll find
    that some people think IE is lousy software.


    --
    Lee, Apr 1, 2007
    #2
    1. Advertising

  3. <> wrote:
    <snip>
    > ... . Everything works great in all browsers except in internet
    > explorer 6.0 ...

    <snip>
    > <script type="text/javascript">
    > function click(name, title, susser, photographer, location)

    <snip>
    > <img src="photos/guest/th256347_2Aguille du Midi 034.jpg"
    > onclick="click('256347_2Aguille du Midi 034.jpg', 'Crevasse Rescue

    <snip>

    You are suffering from a feature of web browsers that varies
    considerably coinciding with a second variable feature and provoked by
    your employing simplistic function names.

    When a browser uses the text of an intrinsic event attribute (such as
    onclick) in the HTML to create an event handling function it may or may
    not create that function with an augmented scope chain, and browsers
    that do this differ in the scope chains they create for such functions.
    Internet Explorer does create its event handling functions with
    augmented scope chains, and it puts the element that had the attribute
    in its HTML at the top of that scope chain.

    The second variable feature is that IE (and some, but not that many,
    other browsers) implements a - click - method on its IMG elements.

    When the event handling function created from your - onclick - attribute
    is executed it executes - click( ... ); - and to do that it must resolve
    the Identifier - click - against the scope chain. The Identifier will
    resolve as a Reference to the value of the 'click' property of the first
    object on the scope chain that has such a property. Without any scope
    chain augmentation the Identifier resolution process would work down the
    scope chain until it found the global object at the end of the chain.
    Your globally defined - click - function is a property of the global
    object named 'click' and so the Identifier would normally resolve as a
    reference to that function.

    However, with the augmentation, and with the IMG element now at the top
    of the scope chain, when - click - is resolved the first object found on
    the scope chain that has a 'click' property is the IMG element. The -
    click - Identifier then resolves as a reference to the - click - method
    of the IMG element and it is that method that is called. No error will
    follow as you have just clicked the IMG element to trigger the event so
    the effect of firing the IMG element's - click - method is unnoticeable.

    There are lots of ways to deal with this issue, but I tend to think that
    functions should be given names that state what they do. Now if your
    function had a name that stated what it did that name would not be
    'click'' and would be unlikely to coincide with any method on the any
    object on any augmented scope chain (and if its name did correspond then
    that would suggest that you already have a method that will do what your
    function is attempting. That is, a function name like
    'setImgFromThumbnail', while maybe a little cumbersome, is very unlikely
    to clash with anything else.

    Richard.
    Richard Cornford, Apr 1, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bob
    Replies:
    2
    Views:
    567
  2. gtp1013
    Replies:
    3
    Views:
    566
    dorayme
    Apr 12, 2006
  3. Prashant

    C and C++ compatibility issue

    Prashant, Jul 20, 2004, in forum: C++
    Replies:
    7
    Views:
    559
    Prashant
    Jul 26, 2004
  4. Adi
    Replies:
    2
    Views:
    266
  5. dwair
    Replies:
    2
    Views:
    211
Loading...

Share This Page