www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript not running?

Hybrid View

  1. #1
    Join Date
    Nov 2010
    Location
    England
    Posts
    4

    Unhappy 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.

  2. #2
    Join Date
    Mar 2009
    Posts
    501
    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.
    Last edited by Tcobb; 12-09-2010 at 04:45 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles