GeorgeFowler Posted October 9, 2014 Share Posted October 9, 2014 I would like to put an ad delay onto a webpage. No content shows up (complete white backgorund) until 30 seconds after viewing the ad. The ad would disappear and the content of the page would load up. Quote Link to comment https://forums.phpfreaks.com/topic/291535-need-help-with-javascript/ Share on other sites More sharing options...
Frank_b Posted October 9, 2014 Share Posted October 9, 2014 (edited) <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> #advert { display:none; border: solid 1px black; position: fixed; left: 50%; top: 50%; background-color: white; z-index: 100; height: 400px; margin-top: -200px; width: 600px; ; } </style> <script> window.onload = function() { var ad = document.getElementById('advert'); setTimeout(function() { ad.style.display = 'block'; }, 3000); document.getElementById('close').onclick = function() { ad.style.display = 'none'; return false; } } </script> </head> <body> <h3>Wait ...</h3> <div id="advert">Hello this is an Advert!<a id="close" href="#">Close</a></div> </body> </html> Edited October 9, 2014 by Frank_b Quote Link to comment https://forums.phpfreaks.com/topic/291535-need-help-with-javascript/#findComment-1493164 Share on other sites More sharing options...
GeorgeFowler Posted October 9, 2014 Author Share Posted October 9, 2014 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> #advert { display:none; border: solid 1px black; position: fixed; left: 50%; top: 50%; background-color: white; z-index: 100; height: 400px; margin-top: -200px; width: 600px; ; } </style> <script> window.onload = function() { var ad = document.getElementById('advert'); setTimeout(function() { ad.style.display = 'block'; }, 3000); document.getElementById('close').onclick = function() { ad.style.display = 'none'; return false; } } </script> </head> <body> <h3>Wait ...</h3> <div id="advert">Hello this is an Advert!<a id="close" href="#">Close</a></div> </body> </html> Kind of like that but the ad should show onto the page first befoe anything else for a number of seconds before it disappears and the content of the pageis seen. I'm a php coder and no nothing of javascript besides how to read it otherwise I would do it myself. I appreciate the script snip and would love it if you could fix it the way I want it to work. Quote Link to comment https://forums.phpfreaks.com/topic/291535-need-help-with-javascript/#findComment-1493167 Share on other sites More sharing options...
Frank_b Posted October 9, 2014 Share Posted October 9, 2014 Like this? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> #page { display:none; } #advert { border: solid 1px black; position: fixed; left: 50%; top: 50%; background-color: white; z-index: 100; height: 400px; margin-top: -200px; width: 600px; ; } </style> <script> window.onload = function() { setTimeout(function() { document.getElementById('advert').style.display = 'none'; document.getElementById('page').style.display = 'block'; }, 3000); } </script> </head> <body> <div id="page"> <h3>Hello</h3> <p>Welcome on my website</p> </div> <div id="advert">Hello this is an Advert!</div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/291535-need-help-with-javascript/#findComment-1493170 Share on other sites More sharing options...
GeorgeFowler Posted October 9, 2014 Author Share Posted October 9, 2014 Like this? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> #page { display:none; } #advert { border: solid 1px black; position: fixed; left: 50%; top: 50%; background-color: white; z-index: 100; height: 400px; margin-top: -200px; width: 600px; ; } </style> <script> window.onload = function() { setTimeout(function() { document.getElementById('advert').style.display = 'none'; document.getElementById('page').style.display = 'block'; }, 3000); } </script> </head> <body> <div id="page"> <h3>Hello</h3> <p>Welcome on my website</p> </div> <div id="advert">Hello this is an Advert!</div> </body> </html> Yeah I can work off from that. That works great! Thanks Quote Link to comment https://forums.phpfreaks.com/topic/291535-need-help-with-javascript/#findComment-1493171 Share on other sites More sharing options...
Frank_b Posted October 9, 2014 Share Posted October 9, 2014 Welcome :-) Quote Link to comment https://forums.phpfreaks.com/topic/291535-need-help-with-javascript/#findComment-1493183 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.