Supporting each other

Community forums

Welcome, Guest

Forum

Main Forum

General chat

Javascript not working

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

Page:
1

TOPIC:

Javascript not working 7 years 6 months ago #4508

ljm_01
Topic Author
Offline
New Member
Posts: 5
Thank you received: 0

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 Inloggen or Create an account to join the conversation.

Javascript not working 7 years 6 months ago #4509

Fay
Offline
Elite Member
Posts: 229
Thank you received: 92

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:

$("#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:

<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 Inloggen or Create an account to join the conversation.

Javascript not working 7 years 6 months ago #4510

ljm_01 Topic Author Offline New Member Posts: 5 Thank you received: 0	Amazing! Thank you Fay. This works perfectly
	Please Inloggen or Create an account to join the conversation.