Javascript not running?

I have a page at http://www.ratbum.com/test/cv/ which has a kind of tool tray in the bottom right.

I would like, when the white arrow is clicked, for the tray to move off the screen so that just the arrow is visible and then to return to its original position if the arrow is clicked again.

I got code for moving a div from http://www.vicsjavascripts.org.uk/Mo...oveElement.htm and I cannot figure out how mine's different and therefore wrong.

Additionally, I'd like the arrow to change direction when according to which way the div will slide.

I have attempted to use Safari's javascript debugging tools to no avail. Needless to say, I have searched the internet including this forum.

I have tried the following code:

Code:

---

function moveTray(){
        if(trayOpen){
                zxcReturn('styleswitcher');
                document.elementById("mvbutton").style.backgroundImage = "style/images/<.png";
        } else {
                zxcSlide('styleswitcher', 'H', -250, 1, 100);
                document.elementById("mvbutton").style.backgroundImage = "style/images/>.png";
        }
}

---

The code references the following:

Code:

---

//---------Code from http://www.vicsjavascripts.org.uk/MoveElement/MoveElement.htm
function zxcSlide(zxcid, zxchv, zxcpos, zxcinc, zxcspd) {
    zxc = document.getElementById(zxcid);
    if (!zxc) {
        return;
    }
    if (!zxc.obj && zxchv) {
        zxc.obj = new zxcAddFunctions(zxc);
        if (zxchv == 'H') {
            zxchv = 'HH';
        }
        if (zxchv == 'V') {
            zxchv = 'VV';
        }
    }
    if (zxc.obj && (zxchv == 'HH' || zxchv == 'VV')) {
        if (!zxcpos) {
            zxcpos = zxc.offsetWidth;
        }
        if (zxcpos > 0) {
            if (zxchv == 'HH') {
                zxc.obj.close = parseInt(zxc.style.left);
            }
            else {
                zxc.obj.close = parseInt(zxc.style.top);
            }
            zxc.obj.base = false;
            zxc.obj.down = false;
            zxc.obj.open = zxc.obj.close + zxcpos;
            zxc.obj.pos = zxc.obj.close;
        }
        else {
            if (zxchv == 'HH') {
                zxc.obj.open = parseInt(zxc.style.left);
            }
            if (zxchv == 'VV') {
                zxc.obj.open = parseInt(zxc.style.top);
            }
            zxc.obj.base = true;
            zxc.obj.down = true;
            zxc.obj.close = zxc.obj.open + zxcpos;
            zxc.obj.pos = zxc.obj.open;
        }
        zxc.obj.hv = zxchv;
        zxc.obj.z = zxc.obj.mobj.zIndex;
        if (!zxcinc) {
            zxcinc = 1;
        }
        if (zxcinc < 1) {
            zxcinc = 1;
        }
        if (!zxcspd) {
            zxcspd = 5;
        }
        if (zxcinc < 5) {
            zxcspd = 5;
        }
        zxc.obj.spd = zxcspd;
        zxc.obj.inc = zxcinc;
    }
    if (!zxc.obj) {
        return
    }
    clearTimeout(zxc.obj.to);
    if (zxc.obj.down) {
        zxc.obj.down = false;
        zxc.obj.mobj.zIndex = zxc.obj.z;
    }
    else {
        zxc.obj.down = true;
        zxc.obj.mobj.zIndex = zxc.obj.z + 1;
    }
    zxc.obj.auto();
}

function zxcAddFunctions(zxc) {
    this.mobj = zxc.style;
    this.ref = zxc.id;
    window[this.ref] = this;
    this.to = null;
    this.auto = zxcAuto;
    this.setto = zxcTimeOut;
}

function zxcAuto() {
    if (this.close < this.open && this.down) {
        this.pos += this.inc;
        if (this.pos > this.open) {
            this.pos = this.open;
        }
        if (this.hv.match('H')) {
            this.mobj.left = (this.pos) + 'px';
        }
        else {
            this.mobj.top = (this.pos) + 'px';
        }
    }
    if (this.pos > this.close && !this.down) {
        this.pos -= this.inc;
        if (this.pos < this.close) {
            this.pos = this.close;
        }
        if (this.hv.match('H')) {
            this.mobj.left = (this.pos) + 'px';
        }
        else {
            this.mobj.top = (this.pos) + 'px';
        }
    }
    this.setto('auto();', this.spd);
}

function zxcTimeOut(zxcf, zxcd) {
    this.to = setTimeout('window.' + this.ref + '.' + zxcf, zxcd);
}

function zxcReturn() {
    zxcargs = zxcReturn.arguments;
    for (zxc0 = 0; zxc0 < zxcargs.length; zxc0++) {
        zxcr = document.getElementById(zxcargs[zxc0]);
        if (zxcr.obj) {
            clearTimeout(zxcr.obj.to);
            zxcr.obj.down = zxcr.obj.base;
            zxcr.obj.auto();
        }
    }
}

---

Thanks in advance for all help.

I won't say its the only thing wrong with your code, but in your function moveTray() you use document.elementById... when it should be "document.getElementById..." I doubt you will make much progress until that is changed.

And what is with this "style/images/>.png" ? I don't think that '>.png' is a valid name, although it might be in some OS's. I think it needs to be the name of the actual image, as in "myPict.png" You can of course have the path prepended to it, but you should have the file name of the image at the very end.