Solved

5 sec display banner on all page

Posted on 2008-10-05
6
172 Views
Last Modified: 2012-05-05
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
Comment
Question by:Sasha-N
  • 3
  • 2
6 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 22645338
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
 

Author Comment

by:Sasha-N
ID: 22645368
if it will work on mozila too that will be perfect:(
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 22645405

<!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
 

Author Comment

by:Sasha-N
ID: 22645433
great! but how i make the image be on the center middle...right now its outside the page on the right side
0
 
LVL 82

Expert Comment

by:hielo
ID: 22645447
read the comment in the css portion of the example.
0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question