JavaScript / DHTML mouse events conflict (?) in IE(6)

Discussion in 'JavaScript' started by cre8ive, Dec 14, 2007.

  1. #1
    I'm taking two JavaScript / DHTML scripts and trying to integrate two into one (this and this). More specially, I'm trying to display the former inside the latter one. It kind of works. I say kind of because, when the cursor goes out of an object created using the former script, IE(6) kind of shakes(?) the entire screen (inside the browser) a little bit; this doesn't happen in Firefox. I'm guessing that there is a JavaScript / DHTML mouse events conflict (?) in IE(6), but I don't know exactly what.

    The former (DOM Panels III) uses the following script:

    /* ======================================================================================
                                  ===== DOM Panels III =====
            script by Gerard Ferrandez - ge1doot - April 22, 2007
            Evolved from Phil Richard's Panels II: http://www.mgifos.demon.co.uk/panels2.htm
            http://www.dhteumeuleu.com
       ====================================================================================== */
    
    var xm = 0;
    var ym = 0;
    
    document.onmousemove = function(e){
    	if (window.event) e=window.event;
    	xm = e.clientX;
    	ym = e.clientY;
    }
    
    var panel = {
    	speed : .006,
    	t : 0,
    	O : [],
    	over : false,
    	
    	run : function() {
    		panel.t += panel.speed;
    		for (var i = 0, o; o = panel.O[i]; i++)
    			o.anim(i + panel.t);
    	},
    	
    	init : function(){
    		for (var i = 0, o; o = document.images[i]; i++){
    			if (o.className.indexOf('panel') >= 0) {
    				if(o.parentNode.href != undefined) {
    					var div = document.createElement("a");
    					div.href = o.parentNode.href;
    				} else {
    					var div = document.createElement("div");
    				}
    				div.className = 'panel';
    				var img = document.createElement("img");
    				img.src = o.src;
    				img.className = 'imgPanel';
    				o.parentNode.replaceChild(div,o);
    				div.appendChild(img);
    				div.ims = img.style;
    				div.iw = img.width;
    				div.ih = img.height;
    				div.cx = -div.iw / 2;
    				div.cy = -div.ih / 2;
    				div.anim = function(t) {
    					nw = this.offsetWidth;
    					nh = this.offsetHeight;
    					if (panel.over == this){
    						for (var nx = 0, ny = 0, o = this; o != null; o = o.offsetParent) nx += o.offsetLeft, ny += o.offsetTop;
    						var x = Math.max(-this.iw + nw, Math.min(0, (-(xm - nx) * (this.iw - nw)) / nw));
    						var y = Math.max(-this.ih + nh, Math.min(0, (-(ym - ny) * (this.ih - nh)) / nh));
    						if (Math.abs(xm-nx-nw * .5) > nw || Math.abs(ym-ny-nh * .5) > nw ) panel.over = false;
    					} else {
    						var mx = (this.iw - nw) * .5;
    						var my = (this.ih - nh) * .5;
    						var x = -mx * (1 + Math.cos(t * 1.2));
    						var y = -my * (1 + Math.sin(t));
    					}
    					this.cx += (x - this.cx) * .1;
    					this.cy += (y - this.cy) * .1;
    					this.ims.left = Math.round(this.cx) + 'px';
    					this.ims.top  = Math.round(this.cy) + 'px';
    				}
    				
    				div.onmouseover = function()
    				{
    					panel.over = this;
    				}
    				this.O.push(div);
    			}
    		}
    		setInterval(panel.run, 32);
    	}
    }
    
       
    function startIt() {
    	panel.init();
    }
    Code (markup):
    And the latter (3D parallax navigator) uses the following script:

    // ==================================================
    //        ===== 3D parallax navigator ====
    // script written by Gerard Ferrandez - January 2007
    // http://www.dhteumeuleu.com
    // ==================================================
    
    var prx = {
    	cx  : 0,
    	cy  : 0,
    	X   : 0,
    	Y   : 0,
    	CX  : 0,
    	CY  : 0,
    	FO  : 6, // focal
    	RS  : .05, // speed
    	RC  : 1,
    	/* ==== mouse move event ==== */
    	mousemove : function (e) {
    		if (window.event) e = window.event;
    		prx.xm = (e.x || e.clientX) - prx.nx + (prx.nw * .5);
    		prx.ym = (e.y || e.clientY) - prx.ny + (prx.nh * .5);
    	},
    	/* ==== window resize event ==== */
    	resize : function () {
    		prx.nx = pxLeft(prx.scr);
    		prx.ny = pxTop(prx.scr);
    		prx.nw = prx.scr.offsetWidth;
    		prx.nh = prx.scr.offsetHeight;
    	},
    	/* ==== main loop ==== */
    	run : function () {
    		/* ==== mouse soften ==== */
    		prx.cx += (prx.xm - prx.cx) * (prx.RS * 2 * prx.RC);
    		prx.cy += (prx.ym - prx.cy) * (prx.RS * 2 * prx.RC);
    		/* ==== goto soften ==== */
    		prx.CX += (prx.X - prx.CX) * (prx.RS * prx.RC);
    		prx.CY += (prx.Y - prx.CY) * (prx.RS * prx.RC);
    		/* ==== prx move ==== */
    		for (var i = 0; i < prx.N; i++) {
    			var o = prx.spa[i];
    			o.style.left = px(o.m + prx.nw * .5 + (o.X - prx.cx * .5 - prx.CX) * o.d);
    			o.style.top  = px(o.m + prx.nh * .5 + (o.Y - prx.cy * .5 - prx.CY) * o.d);
    		}
    		setTimeout(prx.run, 16);
    	},
    	/* ==== init script ==== */
    	init : function (container) {
    		this.scr = id(container);
    		this.ref = {};
    		this.spa = [];
    		var k = 0;
    		var r = this.scr.childNodes;
    		for (var i = 0, n = r.length; i < n; i++) {
    			/* ==== for each group ==== */
    			var o = r[i];
    			if (o.id) {
    				/* ==== save coordinates ==== */
    				var X = o.offsetLeft;
    				var Y = o.offsetTop;
    				this.ref[o.id] = {};
    				this.ref[o.id].X = X;
    				this.ref[o.id].Y = Y;
    				this.ref[o.id].W = o.offsetWidth;
    				this.ref[o.id].H = o.offsetHeight;
    				o.style.position = 'static';
    				var c = o.getElementsByTagName('*');
    				for (var j = 0, m = c.length; j < m; j++) {
    					/* ==== for each parallax object [class="prx"] ==== */
    					if (c[j].className.indexOf('prx') >= 0) {
    						var s = this.spa[k] = c[j];
    						/* ==== zIndex = parallax level ==== */
    						s.Z = s.style.zIndex;
    						s.d = Math.min(prx.FO, prx.FO / (prx.FO + 1 - s.Z));
    						/* ==== x,y coordinates - group + local ==== */
    						s.X = X + s.offsetLeft;
    						s.Y = Y + s.offsetTop;
    						/* ==== zoom factor (% sizes only) ==== */
    						s.W = s.offsetWidth * ((!s.style.width || s.style.width.indexOf('px') > 0) ? 1 : s.d);
    						s.H = s.offsetHeight * ((!s.style.height || s.style.width.indexOf('px') > 0) ? 1 : s.d);
    						s.style.width  = px(s.W);
    						s.style.height = px(s.H);
    						/* ==== buttons/links ==== */
    						if(s.onclick) {
    							s.style.cursor = 'pointer';
    							s.style.zIndex = 100;
    							s.onmouseover  = function() {
    								this.m = 2;
    								prx.RC = .5;
    							}
    							s.onmouseout   = function() {
    								this.m = 0;
    								prx.RC = 1;
    							}
    						}
    						/* ==== navigation functions ==== */
    						s.goto = function (o, ret) {
    							prx.RC = 1;
    							if (!ret) id(o).O = this.oid;
    							id(o).style.visibility = 'visible';
    							prx.X = prx.ref[o].X - .5 * (prx.nw - prx.ref[o].W);
    							prx.Y = prx.ref[o].Y - .5 * (prx.nh - prx.ref[o].H);
    						}
    						s.ret = function () {
    							this.goto(this.p.O, true);
    						}
    						s.hide = function () {
    							setTimeout('id("' + this.oid + '").style.visibility = "hidden";', 500);
    						}
    						s.oid = o.id;
    						s.p = o;
    						s.m = 0;
    						k++;
    					}
    				}			
    			}
    		}
    		this.N = this.spa.length;
    		/* ==== resize & mouse events ==== */
    		addEvent(window, 'resize', this.resize);
    		addEvent(window.document, 'mousemove', this.mousemove);
    		/* ==== start ==== */
    		this.resize();
    		this.xm = this.nw;
    		this.ym = this.nh;
    		this.scr.style.visibility = 'visible';
    		this.run();
    	}
    }
    
    function startPage() {
    	/* ==== init ==== */
    	setTimeout("prx.init('screen')", 500);
    } 
    Code (markup):
    What could be causing this problem ...??? Also how can I solve this problem? I'd like to solve this problem itself ideally, but applying a workaround is ok, too, for the time being.

    I'd greatly appreciate any help ...

    Thanks in advance.
     
    cre8ive, Dec 14, 2007 IP