[JS] Snake text following the cursor - Softwareontwikkeling

dinsdag 29 september 2009 16:40

Acties:

Topicstarter

Ik ben een website aan het maken waarbij er wat tekst met de cursor moet meelopen. Het probleem is dat het alleen werkt in Firefox 3.5. Nu heb ik ook een werkende Javascript voor Internet Explorer 7.0, maar die werkt juist weer niet in FF. Weet iemand hoe ik de volgende beide Javascripts kan combineren zodat die zowel in IE als FF werkt?

De Javascripts die ik gebruik:

IE:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tweakers</title>

<style>
.trailerstyle {
    position: absolute;
    visibility: visible;
    top: -50px;
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: bold;
    color: #d8a483;
}
</style>

<script>
<!--

var x,y
var step=15
var flag=1

var message=" Tweakers "
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
    xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
    ypos[i]=-50
}

function handlerMM(e){
    x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
    y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
    flag=1
}

function mousetrailer() {
    if (flag==1 && document.all) {
        for (i=message.length-1; i>=1; i--) {
            xpos[i]=xpos[i-1]+step
            ypos[i]=ypos[i-1]
        }
        xpos[0]=x+step
        ypos[0]=y
    
        for (i=0; i<message.length-1; i++) {
            var thisspan = eval("span"+(i)+".style")
            thisspan.posLeft=xpos[i]
            thisspan.posTop=ypos[i]
        }
    }
    
    else if (flag==1 && document.layers) {
        for (i=message.length-1; i>=1; i--) {
            xpos[i]=xpos[i-1]+step
            ypos[i]=ypos[i-1]
        }
        xpos[0]=x+step
        ypos[0]=y
    
        for (i=0; i<message.length-1; i++) {
            var thisspan = eval("document.span"+i)
            thisspan.left=xpos[i]
            thisspan.top=ypos[i]
        }
    }
        var timer=setTimeout("mousetrailer()",10)
}

//-->
</script>
</head>

<body onLoad="mousetrailer()" style="width:100%;overflow-x:hidden;overflow-y:scroll">

<script>
<!--

for (i=0;i<=message.length-1;i++) {
    document.write("<span id='span"+i+"' class='trailerstyle'>")
    document.write(message[i])
    document.write("</span>")
}

if (document.layers){
    document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

//-->
</script>
</body>
</html>

FF:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tweakers</title>

<style type="text/css"><!--

.spanstyle {
    position:absolute;
    visibility:visible;
    top:-50px;
    font-size:10pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    color: #d8a483;
}
BODY {
    width:100%;overflow-x:hidden;overflow-y:scroll;
}
-->
</style>
<script language="JavaScript1.2">
<!--
var x,y
var kern=15 
var flag=1
var message="Tweakers"
message=message.split("")
var xpos=new Array()
for (i=0;i<message.length;i++) {
    xpos[i]=-50
    }
var ypos=new Array()
for (i=0;i<message.length;i++) {
    ypos[i]=-50
    }
function handlerMM(e){
    x = (e) ? e.pageX : document.body.scrollLeft+event.clientX
    y = (e) ? e.pageY : document.body.scrollTop+event.clientY
    flag=1
    }
function makebanner() {
    if (flag==1) {
        for (i=message.length-1; i>=1; i--) {
            xpos[i]=xpos[i-1]+kern
            ypos[i]=ypos[i-1]
            }
        xpos[0]=x+kern
        ypos[0]=y
        for (i=0; i<message.length; i++) {
            if (document.getElementById) {
                var thisspan = document.getElementById("span"+i).style
                } else {
                var thisspan = 

eval((document.layers)?"document.span"+i:"span"+(i)+".style")
                }
            if (thisspan.posLeft) {
                thisspan.posLeft=xpos[i]
                thisspan.posTop=ypos[i]
                }
            if (!thisspan.posLeft) {
                thisspan.left=xpos[i]
                thisspan.top=ypos[i]
                }
            }
        }
        var timer=setTimeout("makebanner()",10)
    }
window.onload=makebanner;
//-->
</script>
</head>

<body>

<script language="JavaScript1.2">
<!--
for (i=0;i<message.length;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
//-->
</script>
</body>
</html>

π MW finishers

dinsdag 29 september 2009 16:43

Acties:

sopsop

[v] [;,,;] [v]

Je bovenste stuk code komt (letterlijk) van een site als: http://www.javascriptfreecode.com/22.htm

Wellicht kun je daar even vragen of ze een oplossing hebben. Nu doe je feitelijk gewoon een script request.

[ Voor 3% gewijzigd door sopsop op 29-09-2009 16:45 ]

dinsdag 29 september 2009 16:47

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

We doen hier niet aan support op code van derden; daarvoor mag je bij die derden aankloppen

Lees meteen ook even Waar hoort mijn topic? en onze Quickstart voordat je een nieuw topic opent

We zien hier namelijk graag wat je zélf al geprobeerd hebt etc. etc.

offtopic:
Ik hoop dat je een dondersgoeie reden hebt voor deze 'troep' op je site; waarom zou je in hemelsnaam zo'n 1992 muispestertje op je site zetten?

[ Voor 81% gewijzigd door RobIII op 29-09-2009 16:51 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij