Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 10-11-2012, 04:02 AM   PM User | #1
anotherJEK
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: 152
Thanks: 41
Thanked 1 Time in 1 Post
anotherJEK is an unknown quantity at this point
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
anotherJEK is offline   Reply With Quote
Old 10-11-2012, 11:33 PM   PM User | #2
anotherJEK
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: 152
Thanks: 41
Thanked 1 Time in 1 Post
anotherJEK is an unknown quantity at this point
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
anotherJEK is offline   Reply With Quote
Old 10-12-2012, 12:38 AM   PM User | #3
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,244
Thanks: 59
Thanked 3,998 Times in 3,967 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
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.
Old Pedant is offline   Reply With Quote
Old 10-12-2012, 06:52 PM   PM User | #4
anotherJEK
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: 152
Thanks: 41
Thanked 1 Time in 1 Post
anotherJEK is an unknown quantity at this point
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.
anotherJEK is offline   Reply With Quote
Old 10-12-2012, 08:56 PM   PM User | #5
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,244
Thanks: 59
Thanked 3,998 Times in 3,967 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
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.
Old Pedant is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 09:27 PM.


Advertisement
Log in to turn off these ads.