CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   Scoping problems between FF and Saf/Chrm (http://www.codingforums.com/showthread.php?t=276090)

anotherJEK 10-11-2012 04:02 AM
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

anotherJEK 10-11-2012 11:33 PM
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

Old Pedant 10-12-2012 12:38 AM
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?

anotherJEK 10-12-2012 06:52 PM
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.

Old Pedant 10-12-2012 08:56 PM
LOL! WOW! Talk about the left hand whacking the right one! Nice find.


All times are GMT +1. The time now is 02:58 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.