Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 179
  • Last Modified:

5 sec display banner on all page

i have a regular html page...
i want that each user will enter this page he will see for the first 5 sec a white screen and
the logo.gif file on the middle center.
don't wonna use flash.

how can i do it with javascript in a way that google wont punish me?
0
Sasha-N
Asked:
Sasha-N
  • 3
  • 2
1 Solution
 
hieloCommented:
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title> 
<style type="text/css">
/* depending on the size of your image, you will need to adjust the values for 
padding-top and padding-left until it is centered */
#banner{position:absolute;top:0px;left:0px;background-color:white;width:100%;height:100%;padding-top:19%;padding-left:35%;} 
body{background-color:black;height:100%;color:white;}
</style> 
<script type="text/javascript">
 window.onload=init;
function init(){
	setTimeout(function(){document.getElementById("banner").removeNode(true);}, 5000);
}
</script>
</head>
<body>
	<div id="banner">
		<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="">
	</div>
	<div>Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...</div>
</body>
</html>

Open in new window

0
 
Sasha-NAuthor Commented:
if it will work on mozila too that will be perfect:(
0
 
hieloCommented:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title> 
<style type="text/css">
/* depending on the size of your image, you will need to adjust the values for 
padding-top and padding-left until it is centered */
#banner{position:absolute;top:0px;left:0px;background-color:white;width:100%;height:100%;padding-top:19%;padding-left:35%;} 
body{background-color:black;height:100%;color:white;}
</style> 
<script type="text/javascript">
 window.onload=init;
function init(){
	setTimeout("trashIt()", 5000);
}
function trashIt(){
	var n =document.getElementById("banner");
	n.parentNode.removeChild(n);
}
</script>
</head>
<body>
	<div id="banner">
		<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="">
	</div>
	<div>Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...</div>
</body>
</html>

Open in new window

0
 
Sasha-NAuthor Commented:
great! but how i make the image be on the center middle...right now its outside the page on the right side
0
 
hieloCommented:
read the comment in the css portion of the example.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now