Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > PHP

Typ een zin met Javascript (Probleem)

stefan1987 - 27/07/2009 19:44

Nieuw lid

Hoi Allemaal,

Een tijdje terug had ik een script gemaakt in php om een tekst te laten typen.
Zie hier de Php Code:

php code - Bekijk de code zonder highlighting - Klap code in


function typ($zin)
{
// de zin typen
$tellen = "0";
$aantal_letters = strlen($zin);
echo str_pad('',4096);
while ($tellen < $aantal_letters) {
echo "$zin[$tellen]";
flush();
ob_flush();
usleep(50000);
$tellen = $tellen + "1";
}
// 1 seconde wachten
usleep(1000000);
}

typ ("Dit is een tekstregel 1");
typ ("Dit is een tekstregel 2");

function typ($zin)
{
// de zin typen
$tellen = "0";
$aantal_letters = strlen($zin);
echo str_pad('',4096);
while ($tellen < $aantal_letters) {
echo "$zin[$tellen]";
flush();
ob_flush();
usleep(50000);
$tellen = $tellen + "1";
}
// 1 seconde wachten
usleep(1000000);
}
 
typ ("Dit is een tekstregel 1");
typ ("Dit is een tekstregel 2");

Nu heb ik zelf geen problemen met dit script (Internet Explorer)
Maar omdat de Firefoxgebruikers problemen hadden met het script werd me aangeraden om het in javascript te maken.

Nu heb ik dit gedaan, en met een combinatie van Javascript en Php heb ik hetzelfde effect kunnen bereiken.
Zie hier de Javascript Code:

javascript code - Bekijk de code zonder highlighting - Klap code in

                <?

function typ_de_zin($zin)
{
//Variabelen maken
$nummer = "0";
$aantal_letters = strlen($zin); 

//Start van het script
echo "<script type='text/javascript'>";
echo "setTimeout('typen$nummer()', 10);";

//While loop tot einde van de zin
while ($nummer < $aantal_letters){
$letter = $zin[$nummer];
echo "function typen$nummer(){";
echo "document.getElementById('typen').innerHTML += '$letter';";
$nummer = $nummer + 1;
echo "setTimeout('typen$nummer()', 90);}";
}

//Einde van script
echo "function typen$nummer(){}";
echo "</script>";

}

?>

<div id='typen'></div>

<?
typ_de_zin ("Dit is een test");
?>

            
<?
 
function typ_de_zin($zin)
{
//Variabelen maken
$nummer = "0";
$aantal_letters = strlen($zin); 
 
//Start van het script
echo "<script type='text/javascript'>";
echo "setTimeout('typen$nummer()', 10);";
 
//While loop tot einde van de zin
while ($nummer < $aantal_letters){
$letter = $zin[$nummer];
echo "function typen$nummer(){";
echo "document.getElementById('typen').innerHTML += '$letter';";
$nummer = $nummer + 1;
echo "setTimeout('typen$nummer()', 90);}";
}
 
//Einde van script
echo "function typen$nummer(){}";
echo "</script>";
 
}
 
?>
 
<div id='typen'></div>
 
<?
typ_de_zin ("Dit is een test");
?>
 

Maar het probleem van dit script is dat het alleen maar werkt voor 1 regel..
Zodra ik nog een zin wil typen door de functie "typ_de_zin" te gebruiken, wordt alleen de laatste zin 2x getypt (elke letter 2x)

Zouden jullie me verder kunnen helpen?

Alvast bedankt

Groetjes Stefan

7 antwoorden

Gesponsorde links

Martijn - 27/07/2009 19:57

Crew PHP

Je kunt beter opnieuw je functie schijven en daar dit doen (ik weet even de split functie niet)

javascript code - Bekijk de code zonder highlighting - Klap code in

                function maakZin(string){
var letters = split(string); // dit dus vervangen door werkende functie
var aantalLetters = string.length;
var i =0;
while(i != aantalLetters){
document.GetElementById('waarJeZinMoet').innerHTML += letters[i];
}//einde while
}
            
function maakZin(string){
var letters = split(string); // dit dus vervangen door werkende functie
var aantalLetters = string.length;
var i =0;
while(i != aantalLetters){
document.GetElementById('waarJeZinMoet').innerHTML += letters[i];
}//einde while
}
 

Stijn - 27/07/2009 20:02

PHP expert

javascript code - Bekijk de code zonder highlighting - Klap code in

                function stringToChars(str)
{
    var chars = new Array();
    for( var i = 0 , i < str.length() , i++ )
        chars[i] = str.substring(i , i+1);
    return chars;
}
            
function stringToChars(str)
{
    var chars = new Array();
    for( var i = 0 , i < str.length() , i++ )
        chars[i] = str.substring(i , i+1);
    return chars;
}
 

Give it a shot

stefan1987 - 27/07/2009 20:08 (laatste wijziging 27/07/2009 20:08)
Nieuw lid		Dankjulliewel voor de supersnelle reactie, maar ik snap niet helemaal hoe ik jullie functie nu in mijn script moet krijgen.. Ik ben pas sinds vandaag een beetje met javascript bezig Kunnen jullie een voorbeeldje geven met mijn script?

Sepiroth - 28/07/2009 01:31

Nieuw lid

Je moet javascript scripts in je head zetten. Zo dus

javascript code - Bekijk de code zonder highlighting - Klap code in

                <script type="text/javascript">
      function stringToChars(str)
      {
         var chars = new Array();
         for( var i = 0 , i < str.length() , i++ )
              chars[i] = str.substring(i , i+1);
         return chars;
      }

      function maakZin(string){
      var letters = stringToChars(string);
      var aantalLetters = string.length;
      var i =0;
      while(i != aantalLetters){
      document.GetElementById('waarJeZinMoet').innerHTML += letters[i];
      }//einde while
      }
</script>

            
<script type="text/javascript">
      function stringToChars(str)
      {
         var chars = new Array();
         for( var i = 0 , i < str.length() , i++ )
              chars[i] = str.substring(i , i+1);
         return chars;
      }
 
      function maakZin(string){
      var letters = stringToChars(string);
      var aantalLetters = string.length;
      var i =0;
      while(i != aantalLetters){
      document.GetElementById('waarJeZinMoet').innerHTML += letters[i];
      }//einde while
      }
</script>
 

Daarna kan je die gewoon aanroepen met onLoad of onClick. Event handling , hier is uitleg over event handling. Javascript staat dus los van PHP. En kan javascript gewoon net zoals html gelijk typen zolang het tussen de script tags staat. Dus geen javascript echoën. Ik hoop dat je er wat aan hebt.

stefan1987 - 28/07/2009 17:41
Nieuw lid		Sorry, maar ik kom er niet aan uit. Ik snap wel dat je normaal javascript niet hoort te echoën met php. Maar juist omdat ik het wil laten "typen" (letter voor letter laten zien) heb ik hier wel voor gekozen. En de scripts die jullie geven doen dat niet meer toch? En het laatst geposte script geeft alleen een foutmelding. Help me

Martijn - 28/07/2009 19:01
Crew PHP		waarom zit je zo vast aan dat php? Wij hebben in geen 1 stukje php geplaatst, en vermeld waar je deze code wel moet plaatsen. <body onload="maakZin('dit is een zin')"> Al zie ik nu een fout de while zet gewoon in sneltreinvaart de letters neer zo snel dat je t niet gaat merken, daar moet nog even een intervalletje in, ik heb ff geen tijd

stefan1987 - 30/07/2009 21:18 (laatste wijziging 31/07/2009 13:30)

Nieuw lid

Hoi Allemaal,

Na een paar uurtjes proberen, typen, proberen typen

Is het me uiteindelijk gelukt om mijn "typ een tekst" script te maken in Javascript

Ik gebruik php enkel nog om de values aan te maken
(dit heb ik nodig in mijn script)
en verder is het nu puur javascript.

Ik ben benieuwd wat jullie er nu van vinden,
en of het in alle browsers werkt.

Hier is de code:

javascript code - Bekijk de code zonder highlighting - Klap code in

                <?
$zin = "Dit is een zin die letter voor letter getypt wordt";
$aantal_letters = strlen($zin) +1;
?>

<html>
<head>
<script language="JavaScript">
var tellen=0;
var aantal="<? echo $aantal_letters;?>";
var zin ="<? echo $zin;?>";

function StartMetTypen(){
window.setInterval("TypDeTekst()", 70);
}

function TypDeTekst(){
if(tellen < aantal){
var letter = zin.substring(0,tellen);
document.getElementById('typen').innerHTML = letter;
tellen = tellen+1;
}else{
clearInterval();
}
}

</script>
</head>
<body onload="StartMetTypen();">
<div id=typen></div>
</body>
</html>

            
<?
$zin = "Dit is een zin die letter voor letter getypt wordt";
$aantal_letters = strlen($zin) +1;
?>
 
<html>
<head>
<script language="JavaScript">
var tellen=0;
var aantal="<? echo $aantal_letters;?>";
var zin ="<? echo $zin;?>";
 
function StartMetTypen(){
window.setInterval("TypDeTekst()", 70);
}
 
function TypDeTekst(){
if(tellen < aantal){
var letter = zin.substring(0,tellen);
document.getElementById('typen').innerHTML = letter;
tellen = tellen+1;
}else{
clearInterval();
}
}
 
</script>
</head>
<body onload="StartMetTypen();">
<div id=typen></div>
</body>
</html>
 

Hier is een link om het script te proberen:
http://www.radiostereo.nl/test.php

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten