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

Javascript not working

  • ljm_01
  • Topic Author
  • Offline
  • New Member
  • New Member
More
9 years 3 months ago #4508 by ljm_01
Javascript not working was created by 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

Please Log in or Create an account to join the conversation.

More
9 years 3 months ago #4509 by Fay
Replied by Fay on topic 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>
The following user(s) said Thank You: ljm_01, janmeeuw

Please Log in or Create an account to join the conversation.

  • ljm_01
  • Topic Author
  • Offline
  • New Member
  • New Member
More
9 years 3 months ago #4510 by ljm_01
Replied by ljm_01 on topic Javascript not working
Amazing! Thank you Fay. This works perfectly

Please Log in or Create an account to join the conversation.

Moderators: ingdon
Time to create page: 0.123 seconds
Copyright © 2026 The Xerte Project.
Xerte logo Apereo logo OSI Logo