General questions and topics about Xerte Toolkits that don’t fit anywhere else.

Javascript not working

ljm_01
Auteur du sujet
Hors Ligne
Nouveau membre

Plus d'informations

il y a 9 ans 2 mois #4508 par ljm_01

Javascript not working a été créé par ljm_01

Hi all,
I'm hoping to add some Javascript to a Plain Text page (hoping to achieve the function of the Bullets page, but with more control) so that text within div tags appear after 3, 6 and 9 seconds.

No, matter where I place the code (as HTML source on the page, or within the Script text box, or split the HTML and Script appropriately on the page) nothing seems to work. However when previewing this code in DreamWeaver it works OK.

Can someone help get this working for me please.

Here's my code...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testdoc</title>
<script>
function showText(id,delay){
var elem=document.getElementById(id);
setTimeout(function(){elem.style.visibility='visible';},delay*1000)
}
window.onload=function(){
showText('delayedText1',3);
showText('delayedText2',6);
showText('delayedText3',9);
}
</script>
</head>
<body>
<div id="delayedText1" style="visibility:hidden">this is 3 seconden</div>
<div id="delayedText2" style="visibility:hidden">this is 6 seconden</div>
<div id="delayedText3" style="visibility:hidden">this is 9 seconden</div>
</body>
</html>

Thanks
Lewis

Connexion ou Créer un compte pour participer à la conversation.

Fay
Hors Ligne
Membre elite

Plus d'informations

il y a 9 ans 2 mois #4509 par Fay

Réponse de Fay sur le sujet Javascript not working

Hi Lewis

I think the problem is probably that you are using the window.onload function to start triggering the appearance of the divs. Because of the way a Xerte project is set up, when the window onload function is triggered the page content doesn't yet exist.

Try this instead...

Code in the page's 'Script' optional property:

Code:

$("#delayedText1, #delayedText2, #delayedText3").hide();

function showText(id,delay){
 var elem=$("#" + id);
 setTimeout(function(){elem.show()},delay*1000)
}

showText('delayedText1',3);
showText('delayedText2',6);
showText('delayedText3',9);

The html:

Code:

<div id="delayedText1">Section 1</div>
<div id="delayedText2">Section 2</div>
<div id="delayedText3">Section 3</div>

Les utilisateur(s) suivant ont remercié: ljm_01, janmeeuw

Connexion ou Créer un compte pour participer à la conversation.

ljm_01
Auteur du sujet
Hors Ligne
Nouveau membre

Plus d'informations

il y a 9 ans 2 mois #4510 par ljm_01

Réponse de ljm_01 sur le sujet Javascript not working

Amazing! Thank you Fay. This works perfectly

Connexion ou Créer un compte pour participer à la conversation.

Modérateurs: ingdon

Temps de génération de la page : 0.121 secondes

Propulsé par Kunena

Javascript not working

Main Pages

Quick Links

Support

External resources