Solved

5 sec display banner on all page

Posted on 2008-10-05
6
169 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
Comment Utility
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
Comment Utility
if it will work on mozila too that will be perfect:(
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
Comment Utility

<!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
Comment Utility
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
Comment Utility
read the comment in the css portion of the example.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

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…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now