npsari Posted January 7, 2013 Share Posted January 7, 2013 Hello I have this code which shows an image for 5 seconds then it disapears However, instead of clicking a button, I want this to happen automatically 8 seconds after page load <input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br> <div id = "myDiv" style="display:none"><img id = "myImage" src = "/images/logo.png"></div><br> <script type = "text/javascript"> function show() { document.getElementById("myDiv").style.display="block"; setTimeout("hide()", 5000); // 5 seconds } function hide() { document.getElementById("myDiv").style.display="none"; } </script> If there are any experts out there, please provide code Link to comment https://forums.phpfreaks.com/topic/272806-display-an-image-8-seconds-after-page-load/ Share on other sites More sharing options...
Jessica Posted January 7, 2013 Share Posted January 7, 2013 In your javascript, call the function show() and remove the onclick stuff. Link to comment https://forums.phpfreaks.com/topic/272806-display-an-image-8-seconds-after-page-load/#findComment-1403991 Share on other sites More sharing options...
codefossa Posted January 7, 2013 Share Posted January 7, 2013 setTimeout(show, 8000); Of course, you need to check the page is loaded first if you want an accurate count. Link to comment https://forums.phpfreaks.com/topic/272806-display-an-image-8-seconds-after-page-load/#findComment-1404009 Share on other sites More sharing options...
npsari Posted January 7, 2013 Author Share Posted January 7, 2013 Thank you both I've done it like this, but it is not working: <script type="text/javascript"> <!-- function delayer(){ function show() { document.getElementById("myDiv").style.display="block"; setTimeout("hide()", 5000); // 5 seconds } function hide() { document.getElementById("myDiv").style.display="none"; } } <body onload="setTimeout('delayer()', 8000)"> //--> </script> Link to comment https://forums.phpfreaks.com/topic/272806-display-an-image-8-seconds-after-page-load/#findComment-1404010 Share on other sites More sharing options...
Jessica Posted January 7, 2013 Share Posted January 7, 2013 You've defined your functions within another function, instead of calling them / executing them from that function. Link to comment https://forums.phpfreaks.com/topic/272806-display-an-image-8-seconds-after-page-load/#findComment-1404011 Share on other sites More sharing options...
npsari Posted January 7, 2013 Author Share Posted January 7, 2013 okay, i've done the show but the hide i cant please help <script type="text/javascript"> <!-- function delayer(){ document.getElementById("myDiv").style.display="block"; } //--> </script> <div id = "myDiv" style="display:none"><img id = "myImage" src = "/images/logo.png"></div><br> <body onload="setTimeout('delayer()', 8000)"> Link to comment https://forums.phpfreaks.com/topic/272806-display-an-image-8-seconds-after-page-load/#findComment-1404022 Share on other sites More sharing options...
npsari Posted January 7, 2013 Author Share Posted January 7, 2013 Okay, I've done it Thank you much guys <script type="text/javascript"> <!-- function delayer(){ document.getElementById("myDiv").style.display="block"; setTimeout("hide()", 5000); // 5 seconds } function hide() { document.getElementById("myDiv").style.display="none"; } //--> </script> <div id = "myDiv" style="display:none"><img id = "myImage" src = "/images/logo.png"></div><br> <body onload="setTimeout('delayer()', 8000)"> Link to comment https://forums.phpfreaks.com/topic/272806-display-an-image-8-seconds-after-page-load/#findComment-1404025 Share on other sites More sharing options...
codefossa Posted January 7, 2013 Share Posted January 7, 2013 I wanted to let ya figure it out on your own first, but here. (: Demo: http://xaotique.no-ip.org/tmp/41/ // When page loads ... window.addEventListener("load", function() { // Run in 8 seconds setTimeout(function() { // Put div into variable and show it var div = window.document.querySelector("#myDiv"); div.style.display = "block"; // Run in 5 seconds setTimeout(function() { // Hide div div.style.display = "none"; }, 5000); }, 8000); }, false); Link to comment https://forums.phpfreaks.com/topic/272806-display-an-image-8-seconds-after-page-load/#findComment-1404050 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.