Hi,

I’m new to DOM Scripting and I’ve got a cross browser problem.

Here’s the link:

http://www.homeofmuppets.com/muppets/v4_moblog_index.php

There’s a button on the left called Advanced Options. It expands if you click it. Works perfectly in FF but not in IE7 or IE6. Trouble is I don’t even get an error message. It just doesn’t work. Here’s the code for the functions:

This creates the button:

function advPrep(){
if(!document.getElementById) return false;
var advExpEle = document.createElement("div");
advExpEle.setAttribute("id","advButton");
advExpEle.setAttribute("onclick","advExpand(10)");
var options_advanced = document.getElementById("options_advanced");
insertAfter(advExpEle,options_advanced);
}

And these are the onclick functions:

function advExpand(interval){
if (!document.getElementById) return false;
if (!document.getElementById("options_advanced")) return false;
var advBox = document.getElementById("options_advanced");
if (advBox.movement) {
clearTimeout(advBox.movement);
}
if(!advBox.style.height){
advBox.style.height="0px";
}
var xpos = parseInt(advBox.style.height);
var final_x = "250";
if (xpos == final_x){
var advExpEle = document.getElementById("advButton");
advExpEle.style.backgroundImage = "url(http://www.homeofmuppets.com/muppets/images/moblog_box_footsort.jpg)";
advExpEle.setAttribute("onclick","advContract(10); return false;");
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/5);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/5);
xpos = xpos - dist;
}
advBox.style.height = xpos + "px";
var repeat = "advExpand("+interval+")";
advBox.movement = setTimeout(repeat,interval);
}

function advContract(interval){
if (!document.getElementById) return false;
if (!document.getElementById("options_advanced")) return false;
var advBox = document.getElementById("options_advanced");
if (advBox.movement) {
clearTimeout(advBox.movement);
}
if(!advBox.style.height){
advBox.style.height="0px";
return true;
}
var xpos = parseInt(advBox.style.height);
var final_x = "0";
if (xpos == final_x){
var advExpEle = document.getElementById("advButton");
advExpEle.style.backgroundImage = "url(http://www.homeofmuppets.com/muppets/images/moblog_box_footadv.jpg)";
advExpEle.setAttribute("onclick","advExpand(10); return false;");
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/5);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/5);
xpos = xpos - dist;
}
advBox.style.height = xpos + "px";
var repeat = "advContract("+interval+")";
advBox.movement = setTimeout(repeat,interval);
}

As I say. It works for FF. Has anyone got any ideas for IE7?

Cheers