Lady_M
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('n avbuttons' ).getEleme ntsByTagNa me('LI');
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct ion() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=functi on() {
this.className=this.classN ame.replac e(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('n avL2').get ElementsBy TagName('L I');
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct ion() {
this.className+=" over";
}
sfEls[i].onmouseout=functi on() {
this.className=this.classN ame.replac e(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('i nfobox').g etElements ByTagName( 'A');
for (var i=0; i<links.length; i++) {
if (links[i].className=='high lighted' && links[i] != obj)
links[i].className='plain' ;
}
obj.className='highlighted ';
}
}
window.onload = function(){populateBox ('info.html', null);};
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('n
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct
this.className+=" sfhover";
}
sfEls[i].onmouseout=functi
this.className=this.classN
}
}
}
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('n
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct
this.className+=" over";
}
sfEls[i].onmouseout=functi
this.className=this.classN
}
}
}
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('i
for (var i=0; i<links.length; i++) {
if (links[i].className=='high
links[i].className='plain'
}
obj.className='highlighted
}
}
window.onload = function(){populateBox ('info.html', null);};
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'}
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?
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).
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).
ASKER
mplungjan: "Looks a LOT like this"
Yes, but also looks a LOT like it doesn't work.
Yes, but also looks a LOT like it doesn't work.
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
Functions 2 and 3 work if I put them in the head of the html. Function 1 still won't though.
Thanks
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'm not sure how to do that. Can you explain please? Thanks
I think it is time to see a page in a browser
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.
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('n avbuttons' ).getEleme ntsByTagNa me('LI');
and IE7 gives a shout too at rolloverbuttons()
try adding DEFER to the global_test.js tag
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('n
and IE7 gives a shout too at rolloverbuttons()
try adding DEFER to the global_test.js tag
ASKER
hi
like this?
<script language="JavaScript" defer="defer" src="sitewide_files/global /scripts/g lobal_test .js"></scr ipt>
or like this?
<script language="JavaScript" defer src="sitewide_files/global /scripts/g lobal_test .js"></scr ipt>
Neither work anyway, and I get an "object expected" error for this line:
<script>
window.onload = function() { rolloverButtons(); rolloverMenuL2 (); populateBox (1.html', null); };
</script>
like this?
<script language="JavaScript" defer="defer" src="sitewide_files/global
or like this?
<script language="JavaScript" defer src="sitewide_files/global
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('n avbuttons' ).getEleme ntsByTagNa me('LI');
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct ion() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=functi on() {
this.className=this.classN ame.replac e(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('n avL2').get ElementsBy TagName('L I');
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct ion() {
this.className+=" over";
}
sfEls[i].onmouseout=functi on() {
this.className=this.classN ame.replac e(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('i nfobox').g etElements ByTagName( 'A');
for (var i=0; i<links.length; i++) {
if (links[i].className=='high lighted' && 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
//1. Rollover Menu: Show list on hover.
function rolloverButtons() {
var sfEls = document.getElementById('n
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct
this.className+=" sfhover";
}
sfEls[i].onmouseout=functi
this.className=this.classN
}
}
}
//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('n
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct
this.className+=" over";
}
sfEls[i].onmouseout=functi
this.className=this.classN
}
}
}
//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('i
for (var i=0; i<links.length; i++) {
if (links[i].className=='high
links[i].className='plain'
}
obj.className='highlighted
}
}
window.onload = function() {
rolloverButtons();
rolloverMenuL2 ();
populateBox (1.html', null);
};
That should be a lot more logical
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.
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).
@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).
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.
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?
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
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
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.
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( "DOMConten tLoaded", 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.
============= 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
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
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
else if (document.addEventListener
document.addEventListener(
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.
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.
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(do cument.rea dyState)) {
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
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)><\/
var script = document.getElementById("_
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/
//And for Safari
if (/WebKit/i.test(navigator.
var _timer = setInterval(function() {
if (/loaded|complete/.test(do
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
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("P age loaded!");
var message = document.getElementById("m essage");
message.appendChild(text);
};
/* for Mozilla */
if (document.addEventListener ) {
document.addEventListener( "DOMConten tLoaded", 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(do cument.rea dyState)) {
init(); // call the onload handler
}
}, 10);
}
/* for other browsers */
window.onload = init;
Still not sure what to put in the init(); line
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("P
var message = document.getElementById("m
message.appendChild(text);
};
/* for Mozilla */
if (document.addEventListener
document.addEventListener(
}
/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/
var script = document.getElementById("_
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/
/* for Safari */
if (/WebKit/i.test(navigator.
var _timer = setInterval(function() {
if (/loaded|complete/.test(do
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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