CSS Codes
CSS Layouts
Results 1 to 8 of 8

Thread: Image Trail Script and XHTML

  1. 05-31-2006, 05:20 AM #1
    lloyd_borrett
    lloyd_borrett is offline New Comer (less than 5 posts)
    Join Date
    May 2006
    Location
    Cranbourne North, Victoria, Australia
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Trail Script and XHTML

    G'day,

    I've been trying without success to get the Image Trail Script to work with IE6 and Firefox 1.5 in an XHTML document without success.

    My doctype statement is:
    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">
    The following code is what I've been trying:
    Code:
    /******************************************
* 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
******************************************/

A=document.getElementById
B=document.all;
C=document.layers;
T1=new Array("trail1.gif",19,19,"trail2.gif",17,18,"trail3.gif",9,9,"trail4.gif",19,19,"trail5.gif",17,18,"trail6.gif",9,9)

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

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

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 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+'" height="'+H+'"' : '<div id="'+N+'" style="position:absolute; left:'+Xp+'px; top:'+Yp+'px; width:'+W+'; height:'+H+'; ');
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){
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);
c.top=Math.min(bottomedge, DY+offsety);
}
function cycle(){
//if (IE5) 
if (document.all&&window.print){
ie5fix1=document.body.scrollLeft;
ie5fix2=document.body.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=document.body.clientWidth-T1[1]
bottomedge=document.body.scrollHeight-T1[2]
}

if (B){
window.onload=getedgesIE
window.onresize=getedgesIE
}

if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)
    This version of the script still works fine with no doctype or a HTML doctype. But not with a XHTML doctype.

    In Firefox I just get two static clumps of images. In IE6 I get images that trail back and forth in a fixed Y location on the screen.

    Is there any chance that someone has already solved this problem, or can help me to get a solution?

    Best Regards, Lloyd Borrett.
    Reply With Quote Reply With Quote
  2. 05-31-2006, 05:25 AM #2
    djr33's Avatar
    djr33
    djr33 is offline Global Moderator
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    I have no clue about a real solution, but remember that iframes are always an option....
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum
    Reply With Quote Reply With Quote
  3. 05-31-2006, 12:36 PM #3
    Twey's Avatar
    Twey
    Twey is offline Modtoreador
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    It's not a good idea to use XHTML for general purpose on the web. See "Sending XHTML as text/html Considered Harmful" by Ian Hickson.

    Also, using a Transitional DOCTYPE totally defeats the point of XHTML anyway A Transitional DOCTYPE is designed to be an interim measure while authors convert their HTML code to XHTML Strict. To design a site from scratch using XHTML Transitional is pointless; you'd be better off (far better off, actually) using HTML 4.01 Strict.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!
    Reply With Quote Reply With Quote
  4. 05-31-2006, 04:50 PM #4
    otaku
    otaku is offline Junior Coders
    Join Date
    Apr 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi lloyd_borrett,

    To solve your problem, replace the 2 following lines:

    c.left=Math.min(rightedge, DX+offsetx);
    c.top=Math.min(bottomedge, DY+offsety);

    By these ones:

    c.left=Math.min(rightedge, DX+offsetx) + "px";
    c.top=Math.min(bottomedge, DY+offsety) + "px";
    Reply With Quote Reply With Quote
  5. 05-31-2006, 09:57 PM #5
    lloyd_borrett
    lloyd_borrett is offline New Comer (less than 5 posts)
    Join Date
    May 2006
    Location
    Cranbourne North, Victoria, Australia
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks.

    This version works properly with Firefox 1.5.

    But still no Y axis movement in IE6.

    Code:
    /******************************************
* 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
******************************************/

A=document.getElementById
B=document.all;
C=document.layers;
T1=new Array("trail1.gif",19,19,"trail2.gif",17,18,"trail3.gif",9,9,"trail4.gif",19,19,"trail5.gif",17,18,"trail6.gif",9,9)

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

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

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 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){
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=document.body.scrollLeft;
ie5fix2=document.body.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=document.body.clientWidth-T1[1]
bottomedge=document.body.scrollHeight-T1[2]
}

if (B){
window.onload=getedgesIE
window.onresize=getedgesIE
}

if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)
    Best Regards, Lloyd Borrett.
    Last edited by lloyd_borrett; 05-31-2006 at 10:35 PM.
    Reply With Quote Reply With Quote
  6. 06-01-2006, 06:29 AM #6
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    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

    You need to change all instances of:

    document.body

    to:

    document.documentElement

    And you need to add some content to the page, the effect will only work over the body, if there is nothing on the page, the body is too short to allow for any real movement.

    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=iso-8859-1">

</head>
<body>
<script type="text/javascript">
/******************************************
* 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
******************************************/

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)

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

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

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 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){
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=document.documentElement.scrollLeft;
ie5fix2=document.documentElement.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=document.documentElement.clientWidth-T1[1]
bottomedge=document.documentElement.scrollHeight-T1[2]
}

if (B){
window.onload=getedgesIE
window.onresize=getedgesIE
}

if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  7. 06-01-2006, 09:56 AM #7
    lloyd_borrett
    lloyd_borrett is offline New Comer (less than 5 posts)
    Join Date
    May 2006
    Location
    Cranbourne North, Victoria, Australia
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Many thanks John.

    That works great.

    Best Regards, Lloyd Borrett.
    Reply With Quote Reply With Quote
  8. 06-01-2006, 07:07 PM #8
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    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

    An afterthought:

    Since you cannot always be certain that your document will be served and/or parsed as XHTML strict or even as HTML 4.01, a test to determine the capabilities/proclivities of the browser under the prevailing server circumstances should probably be used. Frequently something like this is employed:

    Code:
    function ietruebody(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
    Place that function ahead of the use of document.body and/or document.documentElement in your code. Then wherever one of those is used, replace it with:

    Code:
    ietruebody()
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules