cre8ive
Dec 14th 2007, 8:16 am
I'm taking two JavaScript / DHTML scripts and trying to integrate two into one (this (http://www.dhteumeuleu.com/dhtml/panels-III.html) and this (http://www.dhteumeuleu.com/dhtml/nav-3D.html)). More specially, I'm trying to display the former inside the latter one. It kind of works (http://www.cre8iveonline.com/tmzgroup2/). 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();
}
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);
}
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.
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();
}
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);
}
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.