teken voor teken onderstrepen.

Status
Niet open voor verdere reacties.
Ik bedenk me nu dat ik dat inderdaad niet meen. In FF werkt dit, in IE zou dit ook moeten werken:
HTML: 
<html>
<head>                                                                                                                                                                                          
<title>Teken voor teken test</title>                                                                                                                                                            
</head>
<body>                                                                                                                                                                                          
<span id="tekst"></span>
<script type="text/javascript">                                                                                                                                                                 
<!--                                                                                                                                                                                            
var interval = 2;                                                                                                                                                                              
var tekst = "Het paard loopt in de wei ";                                                                                                                                                       
                                                                                                                                                                                                
var index = 0;                                                                                                                                                                                  
document.getElementById('tekst').innerHTML = tekst;                                                                                                                                            
                                                                                                                                                                                                
var int = window.setInterval("verplaatsLetter()", interval * 1000);                                                                                                                             
                                                                                                                                                                                                
function verplaatsLetter()                                                                                                                                                                      
{                                                                                                                                                                                               
        index++;                                                                                                                                                                                
        if (index >= tekst.length)                                                                                                                                                              
        {                                                                                                                                                                                       
                window.clearInterval(int);                                                                                                                                                      
                return;                                                                                                                                                                         
        }                                                                                                                                                                                       
        document.getElementById('tekst').innerHTML = '<font color="yellow">' + tekst.substr(0, index) + '</font>';
        document.getElementById('tekst').innerHTML += tekst.substr(index, tekst.length-index);
}                                                                                                                                                                                               
//-->                                                                                                                                                                                           
</script>                                                                                                                                                                                       
</body>                                                                                                                                                                                         
</html>

Hierbij wordt weliswaar gebruik gemaakt van deprecated HTML, maar tegen de tijd dat het niet meer ondersteund wordt door browsers kan je dochter al lezen :).
 
Laatst bewerkt:
Tja, nu is ie al opgelost ... :confused:
Ik was intussenerwijl ook aan het prutsen geslagen, en in plaats van het verhuizen van de tekst binnen de span het omgekeerde gedaan: het verhuizen van de span in de tekstregel.
Daarvoor de slice() functie genomen, waar IE wel mee overweg kan:
HTML: 
var part_1 = text.slice(0,i);           // partje tekst nemen tot letterteken i
var part_2 = text.slice(i,text.length); // partje tekst nemen vanaf letterteken i
Vervolgens steeds met innerHTML eerst een <span> plaatsen, dan partje 1, dan </span> en dan partje twee. In de tijd wandelt dan de eind-span steeds verder weg van het begin.
  • Ziehier: www.developerscorner.nl/csshunter/tests/stuk-voor-stuk.htm

  • Firefox, IE6, IE7, IE8, Chrome, Opera en Safari brengen het er goed van af.
  • Makkelijk uit te breiden met nieuwe regels.
  • De tekstregel(s) hoeft/hoeven niet in het script te komen, maar kunnen gewoon in de html gezet worden.
  • Herhaling is mogelijk.
  • En het is valid html, zodat je dochter over 20 jaar niet hoeft te mopperen als ze de code ziet. ;)
Met vriendelijke groet,
CSShunter
_____________
PS:
Het vasthouden van de tekstregels hoeft niet, als je voor de herhaling een replace('<span>','') en idem voor de eind-span invoegt. Dan worden de span's er na voltooiing weer af gekapt. Dat was m'n eerste versie (stuk-voor-stuk-beta.htm); korter script, maar daar blijken Internet Explorer en Opera niet mee uit de voeten te kunnen.
 
Laatst bewerkt:
csshunter, als ik op je link klik kom ik uit op een lege pagina.
 
@csshunter Geweldig, Ziet er goed uit!

Ben even met je code aan het werk geweest maar jij activeert het script met de pijl en de code:
Code: 
onclick="spellen(1); return false"

Ik wil 'm bij het laden van de pagina direct activeren. Je zou verwachten dat dat moet kunnen met:
Code: 
<body onload="spellen(1); return false">
maar dat doet íe niet ...
 
Zet de call naar spellen eens helemaal onderin de <code> sectie, zodat dus het laaste deel van de pagina dit wordt:

HTML: 
   spellen(1);

//]]>
</script>

</body>
</html>


:thumb:
 
Hoi erpee,
Je zou verwachten ... <body onload="spellen(1); return false"> ... maar dat doet ie niet ...
Klik om te vergroten...
Dat zou ik ook verwachten. Sterker nog, bij mij doet ie het gewoon wel:
stuk-voor-stuk-autostart-returnfalse.htm. (FF, IE7, IE8, Chrome, Opera, Safari)

En ook zonder de valse return, want die is hier nergens voor nodig:
stuk-voor-stuk-autostart.htm.

Was er soms per abuis een dubbele punt "return: false" tussen geslopen?
In elk geval: de oplossing van ThatGuy, het aanroepen van de functie aan het eind van het script, doet het ook prima.
:)

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan