Results 1 to 3 of 3

Thread: Doc type and mouse cursor trailer problems

  1. #1
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Doc type and mouse cursor trailer problems

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!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>
    Last edited by jscheuer1; 11-12-2011 at 03:28 PM. Reason: switch to code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    tmkf_patryk (11-17-2011)

  4. #3
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    sorry for the late reply, I just have no time lately. Thank you so much! it works great!

    Cheers!

Bookmarks

Posting Permissions

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