Link to home
Start Free TrialLog in
Avatar of Lady_M
Lady_MFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Functions stopped working in IE6

Hi

Rather urgent problem, so hope you can help.

I have the following 3 functions (the first two are in an external js file, the 3rd is in the page header.  
They all work fine in Firefox, but refuse to do a thing in IE6.  I have tried uploading them to a server and they still don't work.
1) Can you see the problem?

Two further issues:
2) I can't seem to put function 3 into a global.js file, it stops working when I do.
And
3) I get the following error in the populateBox function:  "The requested method POST is not allowed for the URL /info.html".

Thank you

//1.  Rollover Menu:  Show list on hover.
rolloverButtons = function() {    
      var sfEls = document.getElementById('navbuttons').getElementsByTagName('LI');    
      for (var i=0; i<sfEls.length; i++) {        
            sfEls[i].onmouseover=function() {            
            this.className+=" sfhover";        
            }        
            sfEls[i].onmouseout=function() {            
                  this.className=this.className.replace(new RegExp(" sfhover\\b"), "");        
            }    
      }
}
window.onload = function(){rolloverButtons ();};



//2. Suckerfish Rollover Top Nav Menu:  Show second level of drop-down menu to IE by assigning class to #header #banner ul#navL2 li
rolloverMenuL2 = function() {  
      var sfEls = document.getElementById('navL2').getElementsByTagName('LI');
      for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                  this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                  this.className=this.className.replace(new RegExp(" over\\b"), "");
            }    
      }
}

window.onload = function(){rolloverMenuL2 ();};


//3 Post info into a tabbed box
function populateIBox (serverPage, obj){      
//Populate textbox with prototype.js
   var objID = "infoboxtext";  
   new Ajax.Updater(objID, serverPage);

//change tab color
  if(obj != null)
  {
   var links = document.getElementById('infobox').getElementsByTagName('A');
    for (var i=0; i<links.length; i++) {
      if (links[i].className=='highlighted' && links[i] != obj)  
           links[i].className='plain';  
    }
    obj.className='highlighted';
  }
}
window.onload = function(){populateBox ('info.html', null);};
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

If these scripts are in the same page, you need to remove all

window.onload = function(){rolloverButtons ();};

window.onload = function(){populateBox ('info.html', null);};

window.onload = function(){rolloverMenuL2 ();};

and replace with

window.onload = function(){
  rolloverButtons ();
  populateBox ('info.html', null);
  rolloverMenuL2 ();
};

You can only have ONE onLoad unless you use attachEvent
Do you intend to chain 3 window.onload handlers? This will not work in IE. You can use the attachEvent method, or simply call the 3 handler functions:

window.onload = function() { rolloverButtons(); rolloverMenuL2 (); populateBox ('info.html', null); };

For Ajacs.Updater, you probably want to set the option {method: 'get'}
@Alex: what is the difference between your post and mine apart from the order and the ajax comment?
Avatar of Lady_M

ASKER

Hi
I tried chaining them and it didn't work.  The functions just aren't starting up as I have an alert in there which isn't responding.
<script>
window.onload = function() { rolloverButtons(); rolloverMenuL2 (); populate ('info.html', null); };
</script>

Functions 1 & 2 do work in firefox.  But function 3 works in neither (it works in firefox if i put it in the head rather than in the global.js file).
Avatar of Lady_M

ASKER

mplungjan: "Looks a LOT like this"
Yes, but also looks a LOT like it doesn't work.
Avatar of Lady_M

ASKER

Is it something to do with defer and init();

Functions 2 and 3 work if I put them in the head of the html.  Function 1 still won't though.

Thanks
Avatar of Lady_M

ASKER

alexcohn:  "For Ajacs.Updater, you probably want to set the option {method: 'get'}"

I'm not sure how to do that.  Can you explain please?  Thanks
I think it is time to see a page in a browser
Avatar of Lady_M

ASKER

Hi
Here's a simplified version of the page thanks:
http://www.webtasticdesigns.co.uk/index_test.html

The three functions should:
1) create drop-downs when you roll over the square empty boxes at the top
2) create drop-downs when you roll over the tabs at the top
3) load content into the tabbed box in the right hand column.

You'll see them all working in firefox.  Nothing in IE6.
I see one problem in FF too

Error: syntax error
Source File: http://www.webtasticdesigns.co.uk/sitewide_files/global/scripts/global_test.js
Line: 9, Column: 1
Source Code:
      var sfEls = document.getElementById('navbuttons').getElementsByTagName('LI');    

and IE7 gives a shout too at rolloverbuttons()

try adding DEFER to the global_test.js tag



Avatar of Lady_M

ASKER

hi

like this?
<script language="JavaScript" defer="defer" src="sitewide_files/global/scripts/global_test.js"></script>
or like this?
<script language="JavaScript" defer src="sitewide_files/global/scripts/global_test.js"></script>


Neither work anyway, and I get an "object expected" error for this line:

<script>
window.onload = function() { rolloverButtons(); rolloverMenuL2 (); populateBox (1.html', null); };
</script>
Do this



//1.  Rollover Menu:  Show list on hover.
function rolloverButtons() {    
      var sfEls = document.getElementById('navbuttons').getElementsByTagName('LI');    
      for (var i=0; i<sfEls.length; i++) {        
            sfEls[i].onmouseover=function() {            
            this.className+=" sfhover";        
            }        
            sfEls[i].onmouseout=function() {            
                  this.className=this.className.replace(new RegExp(" sfhover\\b"), "");        
            }    
      }
}

//2. Suckerfish Rollover Top Nav Menu:  Show second level of drop-down menu to IE by assigning class to #header #banner ul#navL2 li
function rolloverMenuL2 () {  
      var sfEls = document.getElementById('navL2').getElementsByTagName('LI');
      for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                  this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                  this.className=this.className.replace(new RegExp(" over\\b"), "");
            }    
      }
}


//3 Post info into a tabbed box
function populateIBox (serverPage, obj){      
//Populate textbox with prototype.js
   var objID = "infoboxtext";  
   new Ajax.Updater(objID, serverPage);

//change tab color
  if(obj != null)
  {
   var links = document.getElementById('infobox').getElementsByTagName('A');
    for (var i=0; i<links.length; i++) {
      if (links[i].className=='highlighted' && links[i] != obj)  
           links[i].className='plain';  
    }
    obj.className='highlighted';
  }
}

window.onload = function() {
rolloverButtons();
rolloverMenuL2 ();
populateBox (1.html', null);
};

That should be a lot more logical
Avatar of Lady_M

ASKER

Hi
Did you change the functions of just the call?

I have put all three functions into the external javascript file and put the window.onload as you have it there, but nothing is happening in IE6.

In Firefox it's weird because the drop-downs are working but the alerts that I've put into each function aren't being called so I'm not sure why that is.
I assume you are using "the Prototype" {http://wiki.script.aculo.us/scriptaculous/show/Ajax.Updater} Examples are available at the site.

@mplungian {http://#19990977): you are right, I should have refreshed my browser window before posting my comment (that's what happens when a human being imagines he can multitask).
Avatar of Lady_M

ASKER

yep that's what I'm using.  

But the issue really appears to be a window.onload with external js file problem.  Because none of my 3 function calls are working (and the other two have nothing to do with prototype)  
unless the functions are put into the head of the doc and the window.onload is changed to body onload.Neither of which I want to do.

Even then, one of the functions is playing up in IE, but that's another story.

Surely this can't be so complilcated?  I just want to initiate the 3 functions in an external js file in all browsers.
BTW, all is fine now in IE at http://www.webtasticdesigns.co.uk/index_test.html except the first call to populatebox() which needs parameters. Have you noticed that the drop-down for menu tabs do not disappear in FireFox when the mouse is moved away?
Avatar of Lady_M

ASKER

Yes.  Numerous problems.

Well it's working because I moved all the functions into the <head> and changed the window.onload to window.attachevent.  Although my attachevent syntax is completely wrong and it's only calling one of the functions.

The thing is that I don't want my functions in the head at all, I want them in an external file and I want to know the compliant way to initiate them without using the body tag if poss.

Thanks

Avatar of Lady_M

ASKER

Okay please ignore the above.  I'm going to stop using this file to test on because I'm just going to confuse matters.
This is the situation now:
I have moved the 3 functions into the global_test.js file and I have added a window.attachevent to the head which points at only one of them.  And it's not working of course.

So basically I just need the right, cross browser syntax to initiate all 3 external functions please if you can.

Thanks

If I can just get that working then I can start looking at the actual errors in the functions themselves.
consider the following minimal page:

============= cut here ============
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Scripts</title>
<script type="text/javascript" defer="defer" language="javascript" src="a.js"></script>
</head>
<body><div id="a">abc</div></body>
</html>
============= cut here ============
and the js file:
============= cut here ============
function addLoadEvent(fun)
{
  if (window.attachEvent)
    window.attachEvent("onload", fun);
  else
    window.onload = fun();
}

function a1() { alert("a1"); } addLoadEvent(a1);

function a2() { alert("a2"); } addLoadEvent(a2);

function a3(obj) { alert('a3'); alert(obj.tagName); }
function a3_onload() { a3(document.getElementById('a')); };
addLoadEvent(a3_onload);
============= cut here ============

This trick works fine with FF and IE, but for me on FF the third function fails - the DIV object is not ready when the 3rd handler is called (btw, notice that the order in which the handlers are executed is reverse in FF and IE!!).

Therefore, the loader function was changed further:

============= cut here ============
function addLoadEvent(fun)
{
  if (window.attachEvent)
    window.attachEvent("onload", fun);
  else if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", fun, false);
  else
    window.onload = fun();
}
============= cut here ============

You will definitely enjoy reading http://dean.edwards.name/weblog/2005/09/busted/ as I did, even if only to find that Safari needs special treatment.
Avatar of Lady_M

ASKER

Okay thank you both for all of that.  I can see I'm going to have to take some time to go over it all, but I feel on the right track now at least.
Avatar of Lady_M

ASKER

Hi
Sorry for taking a while to get back to you, I was working on another project.  
I read the dean edwards link above and it says instead of using an external JS file, to do this:
//For Internet exploiter
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {    
      if (this.readyState == "complete") {        
      init(); // call the onload handler  
       }
};
/*@end @*/

//And for Safari
if (/WebKit/i.test(navigator.userAgent)) { // sniff    
      var _timer = setInterval(function() {        
            if (/loaded|complete/.test(document.readyState)) {            
            clearInterval(_timer);            
            init(); // call the onload handler        
            }    
      }, 10);
}


Two questions:
I am not sure what I put in the init() line as I obviously can't use window.onload.  
Secondly I'm not sure how this fits in with what you've written above Alex.  Is it a completely different approach?

So basically still not sure now to proceed.

Thanks
Avatar of Lady_M

ASKER

Sorry, correction to the above code:
function init() {
            // quit if this function has already been called
            if (arguments.callee.done) return;
            
            // flag this function so we don't do the same thing twice
            arguments.callee.done = true;
            
            // kill the timer
            if (_timer) {
                  clearInterval(_timer);
                  _timer = null;
            }
            
            // create the "page loaded" message
            var text = document.createTextNode("Page loaded!");
            var message = document.getElementById("message");
            message.appendChild(text);
      };
      
      /* for Mozilla */
      if (document.addEventListener) {
            document.addEventListener("DOMContentLoaded", init, false);
      }
      
      /* for Internet Explorer */
      /*@cc_on @*/
      /*@if (@_win32)
            document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
            var script = document.getElementById("__ie_onload");
            script.onreadystatechange = function() {
                  if (this.readyState == "complete") {
                        init(); // call the onload handler
                  }
            };
      /*@end @*/
      
      /* for Safari */
      if (/WebKit/i.test(navigator.userAgent)) { // sniff
            var _timer = setInterval(function() {
                  if (/loaded|complete/.test(document.readyState)) {
                        init(); // call the onload handler
                  }
            }, 10);
      }
      
      /* for other browsers */
      window.onload = init;


Still not sure what to put in the init(); line
ASKER CERTIFIED SOLUTION
Avatar of alexcohn
alexcohn
Flag of Israel image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Lady_M

ASKER

Thank you very much alex.  I will have to spend some time reading through all of that before I tell you how I get on, but this looks like it's going to answer my questions.
You're welcome; I believe that we have come up with a reasonable solution for your immediate problem; but to know how to deal gracefully with all possible and impossible peculiarities of different browsers, one must really read a lot. Feel free to ask more questions on EE, if you need help.