Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    215
    Thanks
    52
    Thanked 1 Time in 1 Post

    Scoping problems between FF and Saf/Chrm

    It is one thing after another.
    I am testing an app in Firefox, Safari and Chrome.
    There are image rollovers that work in Firefox and not in Safari nor Chrome.
    I have run into this in the past.
    Code:
    // this code is in a separate sourced js file
    // this refers to object constructor function
         this.preLoad = function(a, b)
                             {
                              if(a.images)  //creates image object array for preload.
                                {
                                 var buttons = new Array(a.length); // actually a.length should be b.length but it works
                                 for(var i = 0; i < b.length; i++)
                                    {
                                     buttons[i] = new Image();
                                     buttons[i].src = 'SC_buttons/'+b[i];
                                    };
                                 return buttons;
                                }
                             }
    // and this is in the page itself
    var buttons = new Array();
        buttons = CALC_GLBS.preLoad(document, list);
    What has happened in the past was to move the preload code into the
    page itself to get it to work in Safari (before Chrome existed)
    Is there anyone who can give me some indication why and possibly how
    to get it to work as written in Safari and Chrome:

    The code that causes the error is (after the images are supposed to be
    preloaded)
    Code:
    // example from the list of buttons that rollover events are applied to
        elementEvents.allImgButtonROE[1] = new Object();
        elementEvents.allImgButtonROE[1].tag = 'a8';
        elementEvents.allImgButtonROE[1].img = 'img2';
        elementEvents.allImgButtonROE[1].over = function() { document.img2.src = buttons[9].src; };  //// <<  src is 'undefined'
        elementEvents.allImgButtonROE[1].out = function() { document.img2.src = buttons[8].src; }; //// <<  src is 'undefined'
        elementEvents.allImgButtonROE[1].click = function() { CALC_PROC.enterChar('8', pref, SELECT_ELEM, CALC_GLBS); };
    I have been trying to keep code out of the page itself as much as possible
    Last edited by anotherJEK; 10-11-2012 at 04:08 AM. Reason: on review

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    215
    Thanks
    52
    Thanked 1 Time in 1 Post
    Code:
    // using absolute addressing for image files
     this.imgPath = 'http://localhost/SC_branch_3/SC_buttons/';
    
    this.preLoad = function(b)
                             {
                              if(document.images)  //creates image object array for preload.
                                {
                                 var img = new Array(b.length);
                                 for(var i = 0; i < b.length; i++)
                                    {
                                     img[i] = new Image();
                                     img[i].src = this.imgPath+b[i];
                                     
                                    };
                                //// alert(img[1].src) << checks out
                                 return img;
                                }
                             }
    // event registration code
    elementEvents.buildAllImgButtons = function()
                                           {
                                            with(elementEvents)
                                                {
                                                 var NN = false;
                                                 for(var i = 0; i < allImgButtonROE.length; i++ )
                                                    {
                                                     switch(this.clientType)
                                                       {
                                                        case 'DOM':
                                                        allImgButtonROElst[i] = document.getElementById(allImgButtonROE[i].tag);
                                                        allImgButtonROElst[i].addEventListener('mouseover', function(e) { findAllImgButtons(e) }, false);
                                                        allImgButtonROElst[i].addEventListener('mouseout', function(e) { findAllImgButtons(e) }, false);
                                                        allImgButtonROElst[i].addEventListener('click', function(e) { findAllImgButtons(e) }, false);
                                                        break;
                                                        case 'IE':
                                                        allImgButtonROElst[i] = getElementById(allImgButtonROE[i].tag);
                                                        allImgButtonROElst[i].attachEvent('onmouseover', function() { findAllImgButtons(window.event) } );
                                                        allImgButtonROElst[i].attachEvent('onmouseout', function() { findAllImgButtons(window.event) } );
                                                        allImgButtonROElst[i].attachEvent('onclick', function() { findAllImgButtons(window.event) } );
                                                        break;
                                                        case 'old Netscape':
                                                        NN = true;
                                                        break;
                                                        default:
                                                        break;
                                                       }
                                                    }
                                                  if(NN == true) { alert('Please update your browser'); }
                                                }
                                           }
    
    // findAllImgButtons() code:
    elementEvents.findAllImgButtons = function(e)
                                          {
                                           var target = e.target.id || window.event.srcElement.id;
                                           var type = e.type || window.event.type;
                                           for(var i = 0; i < this.allImgButtonROE.length; i++)
                                              {
                                               if(this.allImgButtonROE[i].img == target)
                                                 {
                                                  switch(type)
                                                    {
                                                     case 'mouseover':
                                                     this.allImgButtonROE[i].over(buttons);
                                                     break;
                                                     case 'mouseout':
                                                     this.allImgButtonROE[i].out(buttons);
                                                     break;
                                                     case 'click':
                                                     this.allImgButtonROE[i].click();
                                                     break;
                                                    }
                                                 }
                                              }
                                          }
    So, nothing has been working in Safari, nor Chrome, not even the
    methods I thought was successful in Safari.
    error text in Safari:
    TypeError: 'undefined' is not an object (evaluating 'document.img1.src = buttons[27].src')
    similar in Chrome

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Makes no sense.

    You call the function thus:
    buttons = CALC_GLBS.preLoad(document, list);

    and then in the preLoad function you use a.length which of course means you are then using document.length

    So far as I know, document.length is meaningless in any browser.

    The real reason it works is because you are using unneeded code.

    Just doing
    Code:
         var img = [ ];
    would be sufficient.

    Not to ask a silly question, but WHY are you doing if ( document.images )??? There are no modern browsers that don't support images. That makes less sense than people who do if ( document.getElementById )

    Anyway, the thing you haven't shown us in either post is where in the heck you are getting the list or array that you pass to argument b in the preLoad function.

    And, finally, I don't understand why you want to invoke the over function on EVERY image button just because ONE of them was rolled over. Is there really a purpose in this?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    215
    Thanks
    52
    Thanked 1 Time in 1 Post

    Solved the problem

    1: every image has a rollover. That is why the event is assigned to every image
    There are 20 of them.
    2:document.images was originally inspired by the idea that the user might have image display turned off. But your right, it is probably not necessary.

    But I found the problem. It was pretty simple an stupid.
    I converted the main page to DOCTYPE xhtml strict. That dissallows name
    attribute in image and form tags. So I removed the name attributes. That
    is why it didn't work. I converted back to xhtml transitional and add the
    name attributes. That fixed it.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    LOL! WOW! Talk about the left hand whacking the right one! Nice find.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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