Have you ever seen a webpage or website with an entry page? This means that when you arrive at a certain domain, there might be some texts or graphics centered in the browser and a link which says "Click here to enter our website" or "Enter". How about when you click on a link on a webpage, a full-page texts and graphics appears as though as you have gone onto a new webpage. Here I would be teaching you how to create your own javascript splash page which degrades nicely if your visitors turn javascript off. You can even switch between "pages" and it is fully customizable. Click here to see a preview of the splash page.
B. The Idea
Well, you can choose to have the splash automatically once your visitors arrives at your page of have it when they click on a button or link. When the splash function is triggered, it will either toggle on or off splash. If splash does not exist, it will toggle it on. This means that it will show the splash div and hide the splashwrapper. I will further on explain it in detail.
C. Holders
Well, mainly, your web page is going to have 2 main holders or wrappers, some would call it. One of the wrappers would wrap around your whole webpage content while the other one is left blank. Your splash page would be outside of these holders. We shall start off by going in between the <body></body> and placing these two holders. This shall be your splash holder
D. Splash Divs
<div id="splashholder"></div>While this is your content wrapper
<div id="splashwrapper">Type your WHOLE PAGE of contents here!</div>
Now, we are going to add divs which hold the contents of a splash page. You may add as many divs as you want, obviously more if you are going to have more than one splash pages. You can have any id name and do not need to follow in order of 1, 2, 3, etc...
E. CSS
<div id="splash">Welcome to Sleuthz.com.<br />Click here to proceed!</div> <div id="splash2">Thanks for dropping by! You may want to check out some of the categories that I have on my websites. HTML or Javascript!</div>
Head over in between <head></head> and start a style tag to input your CSS.
F. Javascript
<style type="text/css">
body { margin: 0; padding: 0; height: 100%; }
#splashholder, #splash, #splash2 { display: none; height: 100%; width: 100%; position: absolute; overflow: auto; }
.splash { background: #00FF00; color: #006633; font-size: 14pt; }
.splash2 { background: #FF0000; color: #FFFFFF; font-size: 10pt; }
</style>
The properties and their values that you see in the body is very important because it contributes to allowing the divs to get a full-page size. #splash and #splash2 are content holders and you do not want them to be displayed on your webpage, along with your #splashholder. I have also added two classes, .splash and .splash2. These class names should correspond with your div ids because it is going to be working with the javascript. The reason why I hide #splashholder instead of #splashwrapper is because if your visitor's browser has javascript turned off, he or she will be able to gain access to your content without javascript.
You can start a new .js file or just place the script into the head of your document. Firstly, we want to create the splash function which would toggle the display of our #splashholder and its contents. The (div) parameter is the div id, where our splash source is from. For example, I want to splash content from a div with an id - splashing, I would excute the javascript function as - splash('splashing');
G. Triggering
function splash(div){
}Secondly, create two variables in the function, which points to both of these divs that we will be using quite often in the javascript. var splash = document.getElementById('splashholder');
var wrapper = document.getElementById('splashwrapper');
Here comes the toggling part. If #splashholder has no display value or the display value is none... if(splash.style.display == '' || splash.style.display == 'none'){
we want to show #splashholder and hide #splashwrapper.splash.style.display = 'block'; wrapper.style.display = 'none';A quick refreshment, #splashholder is the empty div that will contain the splash contents. #splashwrapper is the page content wrapper. Now we want to add the else if function to do the opposite. We are doing so because the parameter specified null instructs #splashholder to be closed, if not, it will switch over to another content from another div.
}else if(div == null){
splash.style.display = 'none';
wrapper.style.display = 'block';
I also want to stop the function from executing any further to prevent any errors by adding return.return; }Next, we want to style up our #splashholder. Earlier on, I told you to have your class names correspond to your div ids is because of the following.
splash.className = div;The above assigns the style - class name which is the same as the div id to #splashholder. I have discovered some compatibility issues with older versions of IE over CSS so adding the following line causes the div to appear the way it should appear. This helps to extend the height of #splashholder to fit the page height if the content height is lesser than the page height.
splash.style.height = document.documentElement.clientHeight + 'px';Finally, we put in content and wrap up the function.
splash.innerHTML = document.getElementById(div).innerHTML; }After this, we want to add a onresize function to resize #splashholder if your visitors happen to resize their browsers.
window.onresize = function(){
document.getElementById('splashholder').style.height = document.documentElement.clientHeight + 'px';
}
Your whole javascript should exactly like this. Well of course, you are free to make amendments.
<script language="javascript" type="text/javascript">
function splash(div){
var splash = document.getElementById('splashholder');
var wrapper = document.getElementById('splashwrapper');
if(splash.style.display == '' || splash.style.display == 'none'){
splash.style.display = 'block';
wrapper.style.display = 'none';
}else if(div == null){
splash.style.display = 'none';
wrapper.style.display = 'block';
return;
}
splash.className = div;
splash.style.height = document.documentElement.clientHeight + 'px';
splash.innerHTML = document.getElementById(div).innerHTML;
}
window.onresize = function(){
document.getElementById('splashholder').style.height = document.documentElement.clientHeight + 'px';
}
</script>
To trigger the splash(); function, you will need to insert a parameter and this parameter is the ID name of the div that holds your splash content. If you want to trigger splash(); immeadiately when your visitor steps into your webpage, go right down to where </body> is and insert a line such as this.
H. Conclusion
<script language="javascript" type="text/javascript">splash('splash');</script> I would not recommend the window.onload method because it waits for the whole document to be loaded completely before the content is hidden and splash is displayed. Correct me if I am wrong. You can also trigger the splash(); function in #splashholder.
Now that you have learnt how to make splash pages, you can use this method for pop ups and many more!
Click here to proceed!
Click here to go to the second splash.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis lectus. Pellentesque tristique, velit vitae luctus faucibus, tortor libero dapibus turpis, ut aliquet odio tortor nec turpis. Quisque arcu. Aenean nec diam et sapien consequat ultrices. Quisque scelerisque nisi eget velit faucibus pellentesque. Curabitur lectus mauris, sodales eget, sollicitudin eu, porta sit amet, purus. Mauris purus lectus, fringilla at, tempus suscipit, congue dapibus, erat. Donec quam sem, imperdiet a, rhoncus at, interdum vel, leo. Duis quis purus. Nullam lacinia. Fusce eget velit. Nunc a odio adipiscing arcu adipiscing tempor. Pellentesque eget leo non est interdum tincidunt. Morbi placerat est vulputate neque. Nam iaculis, elit in blandit fermentum, arcu massa consequat tellus, quis malesuada nibh lectus eget lectus. Duis est lorem, commodo eu, cursus vel, viverra sed, urna. Nunc orci. Nam tempus eros id ante.
Donec vel eros quis eros consectetuer ultrices. Morbi nisl sem, ultrices vel, euismod nec, rutrum quis, ligula. Maecenas condimentum ultrices velit. Praesent ligula. In et magna vel metus dapibus mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eleifend lorem et elit. Sed blandit arcu non orci. Curabitur egestas. Fusce at turpis eget nisl vestibulum pretium. Cras nec orci a purus fringilla tristique.
Donec sed lacus vel dolor posuere dignissim. Pellentesque tristique sagittis lorem. Praesent orci leo, eleifend ut, dignissim non, mollis nec, turpis. Quisque tempus. Curabitur elementum consequat est. In egestas. Duis est. Phasellus suscipit lorem ac lectus. Nullam auctor tortor congue erat viverra iaculis. Curabitur sem velit, tristique at, consequat at, dictum vehicula, justo. Quisque pretium nisl. Curabitur vel ante. Quisque pharetra dictum dui. Nullam nec odio. Donec odio eros, faucibus auctor, facilisis iaculis, lacinia a, leo.
Integer id neque. Vivamus id odio. Duis aliquet porttitor arcu. Integer adipiscing elit vitae purus. Maecenas placerat dui id ligula ullamcorper suscipit. Pellentesque risus. Donec dapibus. Curabitur vel nisl mattis dolor malesuada varius. Nulla ac eros sit amet metus volutpat ullamcorper. Aenean faucibus odio sed augue. Vestibulum volutpat urna at sapien. Mauris vulputate tincidunt augue. Proin sit amet elit a sapien facilisis interdum. Quisque elementum molestie mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus turpis. Sed tincidunt turpis a odio.
Welcome to Sleuthz.com.
Click here to proceed!
Click here to go to the second splash.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis lectus. Pellentesque tristique, velit vitae luctus faucibus, tortor libero dapibus turpis, ut aliquet odio tortor nec turpis. Quisque arcu. Aenean nec diam et sapien consequat ultrices. Quisque scelerisque nisi eget velit faucibus pellentesque. Curabitur lectus mauris, sodales eget, sollicitudin eu, porta sit amet, purus. Mauris purus lectus, fringilla at, tempus suscipit, congue dapibus, erat. Donec quam sem, imperdiet a, rhoncus at, interdum vel, leo. Duis quis purus. Nullam lacinia. Fusce eget velit. Nunc a odio adipiscing arcu adipiscing tempor. Pellentesque eget leo non est interdum tincidunt. Morbi placerat est vulputate neque. Nam iaculis, elit in blandit fermentum, arcu massa consequat tellus, quis malesuada nibh lectus eget lectus. Duis est lorem, commodo eu, cursus vel, viverra sed, urna. Nunc orci. Nam tempus eros id ante.
Donec vel eros quis eros consectetuer ultrices. Morbi nisl sem, ultrices vel, euismod nec, rutrum quis, ligula. Maecenas condimentum ultrices velit. Praesent ligula. In et magna vel metus dapibus mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eleifend lorem et elit. Sed blandit arcu non orci. Curabitur egestas. Fusce at turpis eget nisl vestibulum pretium. Cras nec orci a purus fringilla tristique.
Donec sed lacus vel dolor posuere dignissim. Pellentesque tristique sagittis lorem. Praesent orci leo, eleifend ut, dignissim non, mollis nec, turpis. Quisque tempus. Curabitur elementum consequat est. In egestas. Duis est. Phasellus suscipit lorem ac lectus. Nullam auctor tortor congue erat viverra iaculis. Curabitur sem velit, tristique at, consequat at, dictum vehicula, justo. Quisque pretium nisl. Curabitur vel ante. Quisque pharetra dictum dui. Nullam nec odio. Donec odio eros, faucibus auctor, facilisis iaculis, lacinia a, leo.
Integer id neque. Vivamus id odio. Duis aliquet porttitor arcu. Integer adipiscing elit vitae purus. Maecenas placerat dui id ligula ullamcorper suscipit. Pellentesque risus. Donec dapibus. Curabitur vel nisl mattis dolor malesuada varius. Nulla ac eros sit amet metus volutpat ullamcorper. Aenean faucibus odio sed augue. Vestibulum volutpat urna at sapien. Mauris vulputate tincidunt augue. Proin sit amet elit a sapien facilisis interdum. Quisque elementum molestie mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus turpis. Sed tincidunt turpis a odio.
Oldest to Newest
Comments
Name: Email: Website: Comment: By submitting your comments, you agree to the terms and conditions.