PDA

View Full Version : Doc type and mouse cursor trailer problems



tmkf_patryk
11-12-2011, 06:24 AM
1) Script Title: Cross browser cursor trailer script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex13/trailer.htm

3) Describe problem:

So the script all works when I don't set a doctype, but I have issues with the css when I do not use a strict/standard doctype.

Essentially my site all works with a non-quirks mode declared Doc type

(I currently use DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN")

I would prefer to be using a doctype just getting something around the code or finding another similar code where I can have an elastic type of bounce (I plan on having some beer bottles following on one special page).

Thanks in advance!
Patrick

jscheuer1
11-12-2011, 10:06 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
/* <![CDATA[ */

// ******************************************
// Cross browser cursor trailer script- By Brian Caputo (bcaputo@icdc.com)
// Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
// Modified Dec 31st, 02' by DD. This notice must stay intact for use
// Updated Nov 12th, '11 by jscheuer1 for standards compliance and practices
// ******************************************

(function(){
var A=document.getElementById,
B=document.all,
C=document.layers,
T1=new Array("trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10),

offsetx=0, //x offset of trail from mouse pointer
offsety=0, //y offset of trail from mouse pointer

nos=parseInt(T1.length/3),
rate=50,
ie5fix1=0,
ie5fix2=0,
rightedge=B? ietruebody().clientWidth-T1[1] : window.innerWidth-T1[1]-20,
bottomedge=B? ietruebody().scrollTop+ietruebody().clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2],

addEvent = (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, f);
}:function(){return;};
})(), i;

for (i=0;i<nos;i++){
createContainer("cur"+i,i*10,i*10,i*3+1,i*3+2,"",'<img src="'+T1[i*3]+'" width="'+T1[(i*3+1)]+'" height="'+T1[(i*3+2)]+'" border="0" />')
}

function ietruebody(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}

function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!A && !B) ? '<layer id="'+N+'" left="'+Xp+'px" top="'+Yp+'px" width="'+W+'px" height="'+H+'px"' : '<div id="'+N+'" style="position:absolute; left:'+Xp+'px; top:'+Yp+'px; width:'+W+'px; height:'+H+'px; ');
if(St){
if (C)
write(' style="');
write(St+';" ')
}
else write((A || B)?'"':"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}

function closeContainer(){
document.write((A || B)?"</div>":"</layer>")
}

function getXpos(N){
if (A)
return parseInt(document.getElementById(N).style.left)
else if (B)
return parseInt(B[N].style.left)
else
return C[N].left
}

function getYpos(N){
if (A)
return parseInt(document.getElementById(N).style.top)
else if (B)
return parseInt(B[N].style.top)
else
return C[N].top
}

function moveContainer(N,DX,DY){
var c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : "";
if (!B){
rightedge=window.innerWidth-T1[1]-20
bottomedge=window.pageYOffset+window.innerHeight-T1[2]
}
c.left=Math.min(rightedge, DX+offsetx)+"px";
c.top=Math.min(bottomedge, DY+offsety)+"px";
}
function cycle(){
//if (IE5)
if (document.all&&window.print){
ie5fix1=ietruebody().scrollLeft;
ie5fix2=ietruebody().scrollTop;
}
for (i=0;i<(nos-1);i++){
moveContainer("cur"+i,getXpos("cur"+(i+1)),getYpos("cur"+(i+1)))
}
}

function newPos(e){
moveContainer("cur"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2)
}

function getedgesIE(){
rightedge=ietruebody().clientWidth-T1[1]
bottomedge=ietruebody().scrollHeight-T1[2]
}

if (B){
addEvent(window, 'load', getedgesIE);
addEvent(window, 'resize', getedgesIE);
}

if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
else
addEvent(document, 'mousemove', newPos);
setInterval(cycle, rate);

})();
/* ]]> */
</script>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

tmkf_patryk
11-17-2011, 04:07 AM
sorry for the late reply, I just have no time lately. Thank you so much! it works great!

Cheers!