teken voor teken onderstrepen.

Status
Niet open voor verdere reacties.
E

erpee

Gebruiker
Lid geworden
21 jan 2009
Berichten
118
Even een case

Ik wil graag het volgende. Ik heb een standaardtekst. Deze wil ik door mijn dochtertje voor laten lezen. Om haar het leestempo aan te gegeven moet de tekst in een bepaald tempo (dus letter voor letter) onderstreept worden.

Bijv

het paard loopt in de wei
het paard loopt in de wei (na bv 10 seconden)

Hoe krijg ik dit voor elkaar?
(Ik heb heel veel hulp nodig, ben niet een al te goede coder ...:o)
 
Zet in de body twee spans:
HTML: 
<span id="onderstreept"></span><span id="gewoon"></span>
Zet in je CSS-bestand de volgende definities:
Code: 
#onderstreept {text-decoration: underline}
#gewoon {text-decoration: none}
Mocht je geen CSS-bestand gebruiken kan je het natuurlijk ook in de head zetten:
HTML: 
<style type="text/css">
#onderstreept {text-decoration: underline}
#gewoon {text-decoration: none}
</style>

Hierdoor heb je twee spans gekregen. Eentje waarin de tekst onderstreept wordt en eentje waarin de tekst gewoon verschijnt. Met Javascript kan je de letters verplaatsen van de "gewone" span naar de "onderstreepte" span.
Zet de volgende Javascript-code in de body onder de spans:
HTML: 
<script type="text/javascript">
<!--
var interval = 2;
var tekst = "Het paard loopt in de wei";

var index = 0;
document.getElementById('gewoon').innerHTML = tekst;

var int = window.setInterval("verplaatsLetter()", interval * 1000);

function verplaatsLetter()
{
        index++;
        if (index >= tekst.length)
        {
                window.clearInterval(int);
                return;
        }
        document.getElementById('onderstreept').innerHTML = tekst.substr(0, index);
        document.getElementById('gewoon').innerHTML = tekst.substr(index, tekst.length-index);
}
//-->
</script>
 
Dank je hier ben ik een heeeeeel stuk mee geholpen. Geweldig zeg!
 
Toch nog weer even geopend.

In Firefox werkt deze code geweldig. In Internet Explorer werkt 'ie minder goed.

Ik heb het script iets veranderd, ipv onderstrepen, verandert nu de kleur ...

Code: 
#onderstreept {
	font-family: "Comic Sans MS";
	font-size: 18px;
	color: black;
}
#gewoon {
	font-family: "Comic Sans MS";
	font-size: 18px;
	color: white;
}

De kleur verandert, zoals het hoort maar spaties tussen woorden haalt 'ie, op het moment dat de spatie van kleur moet veranderen, even weg. Daarna staat de spatie er weer ...

Dat geeft een heel onrustig beeld.

Kan ik dit oplossen?
 
Laatst bewerkt:
Ik ben er inmiddels achter dat IE een probleem heeft met de substring (substr) en dit hoogstwaarschijnlijk de bron van het probleem is ...

Ik heb al wat geprobeerd en vond een volgende "patch"

Code: 
The javascript substr() function works differently in IE and Firefox.

[I]var myString = "hello world";
myString.substr(-3);[/I]

In Firefox this returns “rld”, but throws an error in IE. To do the same thing in both IE and Firefox:

[I]var myString = "hello world";
myString.substring(myString.length(-3), myString.length);[/I]

Maar ik krijg de code niet goed draaiend voor IE én FF
 
Laatst bewerkt:
Ik denk niet dat dat het probleem is. Voor zover ik kan vinden heeft IE alleen een probleem met substr als je gebruikt maakt van een negatieve index als begin en dat is hier niet het geval. Je zou kunnen proberen om i.p.v. "color: black" en "color: white" de tekst te tonen/verbergen met "visibility: visible" en "visibility: hidden". Ik heb geen IE, dus ik kan het niet testen.
 
Supersnail zei:
Je zou kunnen proberen om i.p.v. "color: black" en "color: white" de tekst te tonen/verbergen met "visibility: visible" en "visibility: hidden".
Klik om te vergroten...

Geprobeerd ... werkt niet ... jammer.

Kan het zijn dat het script op één of andere manier een spatie niet als teken ziet en dat het probleem daar van komt?
 
Ik heb het eergisteren al geprobeert. Er schijnt een bug (/feature) in IE te zitten welke problemen heeft met als eerste spaties in een element, dus dit:

HTML: 
<span>   eerst spaties</span>

Ik heb eventjes lopen klooien met CSS (word-wrap etcetera), daarna met Javascript (&nbsp; replacen etc). maar het was niet gelukt. Ik denk dat een oplossing hiervoor maken erg moeilijk is (helemaal omdat je het gewoon in een willekeurige andere browser dan IE kan openen...)
 
Laatst bewerkt:
Probeer het dan eens met dit als body:
HTML: 
<span id="tekst"></span>
<script type="text/javascript">
<!--
var interval = 2;
var tekst = "Het paard loopt in de wei";
var tekst_array = string_to_array(tekst);

var index = 0;

var int = window.setInterval("verplaatsLetter()", interval * 1000);

function verplaatsLetter()
{
        if (index >= tekst_array.length)
        {
                window.clearInterval(int);
                return;
        }
        document.getElementById('tekst').innerHTML += tekst_array[index];
        index++;
}

function string_to_array(tekst)
{
        var arr = new Array();
        for(var i=0;i<tekst.length;i++)
        {
                arr[i] = tekst[i];
        }
        return arr;
}
//-->
</script>
De tekst wordt nu omgezet in een array met op elke positie een teken. Deze tekens worden dan een voor een in de span gezet.
 
Ik krijg 'm als volgt niet aan het werk ... doe ik iets verkeerd? (ws. wel ... :o)

Code: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nieuwe pagina 1</title>

<style type="text/css">
#onderstreept {text-decoration: underline}
#tekst {text-decoration: none}
</style>

</head>

<body>

<span id="tekst"></span>
<script type="text/javascript">
<!--
var interval = 2;
var tekst = "Het paard loopt in de wei";
var tekst_array = string_to_array(tekst);
 
var index = 0;
 
var int = window.setInterval("verplaatsLetter()", interval * 1000);
 
function verplaatsLetter()
{
        if (index >= tekst_array.length)
        {
                window.clearInterval(int);
                return;
        }
        document.getElementById('tekst').innerHTML += tekst_array[index];
        index++;

}
 
function string_to_array(tekst)
{
        var arr = new Array();
        for(var i=0;i<tekst.length;i++)
        {
                arr[i] = tekst[i];
        }
        return arr;
}
//-->
</script>

</body>

</html>
 
@Supersnail: in de string_to_array functie ging je er van uit dat de string al een array IS. Dat werkt niet (anders had je het niet hoeven om te zetten ;)).



Probeer deze eens; werkt in IE. Even de code wat aangepast, maar alle credits gaan naar Supersnail.


HTML: 
<!doctype html>

<html lang='en'>

   <head>

      <meta charset='utf-8' />

      <title>Stapsgewijs lezen</title>

   </head>

   <body>



      <span id="tekst"></span>



      <script>
         // deze kan je aanpassen:
         var interval = 1;   // in secondes de tijd tussen elke letter
         var tekst = "Het paard loopt in de wei";   // de tekst om te laten zien




         // hier van afblijven:
         var tekst_array = string2array(tekst);
         var index = 0;
         var int = window.setInterval(verplaatsLetter, interval * 1000);
 
         function verplaatsLetter()
         {
            if (index >= tekst_array.length)
            {
               window.clearInterval(int);
               return;
            }

            document.getElementById('tekst').innerHTML += tekst_array[index++];
         }
 

         function string2array(text)
         {
            var i, arr = [], len = text.length;

            for(i=0; i<len; i++)
            {
               arr[i] = text.substr(i, 1);
            }

            return arr;
         }



      </script>

   </body>

</html>
 
Laatst bewerkt:
Allereerst ... Hartelijk dank voor jullie reacties ...

Maar ... hij werkt wel maar nu doet 'ie niet meer wat 'ie hoort te doen:

1) de tekst staat er vanaf het begin,
2) daarna verandert 'ie, letter voor letter van kleur.

Hoe krijg ik dat nou voor elkaar?
 
Dat is raar; als ik de code hier uitvoer werkt het prima in IE en FF... Zie bijlage. Heb je de exacte code overgenomen? De code die bij mij werkt is de 2e bijlage (wel moet je eventjes het '.txt' gedeelte achteraan weghalen; kon het anders niet uploaden).
 

Bijlagen

Laatst bewerkt:
That Guy zei:
@Supersnail: in de string_to_array functie ging je er van uit dat de string al een array IS. Dat werkt niet (anders had je het niet hoeven om te zetten ;)).
Klik om te vergroten...

Je bedoelt deze regel?
[js]arr = tekst;[/js]

Had ik dan toch charAt of substr moeten gebruiken (waarschijnlijk was ik in de war met C++, daar werkt het wel zo (overigens werkte mijn code in Firefox))?
 
@ ThatGuy > het werkt ook wel maar niet zoals de bedoeling

eebf9ad3fe034c3388395a1.png


De tekst staat er dus eerst in het zwart, daarna verandert de tekst in een andere, moeilijk leesbare kleur, zo moet de lezer dus een bepaald tempo aanhouden ..

Zie het originele bestand als bijlage ..

Bekijk bijlage origineel01.html.txt
 
Laatst bewerkt:
Heb je het ook geprobeerd met de nieuwe code (zie de bijlage van That Guy)? De code in jouw bijlage is nog de oude code (met wat aanpassingen qua tekstkleur).
 
Supersnail zei:
Heb je het ook geprobeerd met de nieuwe code (zie de bijlage van That Guy)? De code in jouw bijlage is nog de oude code (met wat aanpassingen qua tekstkleur).
Klik om te vergroten...

Klopt, heb ik er alleen bijgedaan om te laten zien hoe het er eigenlijk uit moet zien. In de code van ThatGuy weet ik niet waar ik de 2 kleuren terug moet laten komen, 1 lukt me nog ...
 
In de nieuwe code is het ook niet mogelijk om 2 kleuren te laten terugkomen. Als je dit wilt kan je de oorspronkelijke code (post van 11 maart) weer gebruiken, maar dan moet je de CSS aanpassen. Alleen heb je dan weer een probleem in IE.
 
Supersnail zei:
In de nieuwe code is het ook niet mogelijk om 2 kleuren te laten terugkomen. Als je dit wilt kan je de oorspronkelijke code (post van 11 maart) weer gebruiken, maar dan moet je de CSS aanpassen. Alleen heb je dan weer een probleem in IE.
Klik om te vergroten...

Dat meen je niet ... :( Da's wel erg jammer
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan