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 Quote 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. Quote 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. Quote 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 (edited) 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> Edited January 7, 2013 by npsari Quote 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. Quote 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)"> Quote 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)"> Quote 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 (edited) 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); Edited January 7, 2013 by Xaotique Quote 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
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.