|
Webmaster Tips, Tricks & Utilities
CONFIGURING A SPLASH PAGE:
|
| A Splash Page is a page that loads with a particular
message prior to launching a main site. Splash pages are
great tools to use if you need to track hits from other
sites, as well as providing interesting or updated information
to your visitors on entering your site or a page on your
site. For example, if you wanted to place a Hit Counter
on a splash page, you can see how many people come in to
that page before jumping to your main site. This can track
clicks from other sites if you use a separate splash URL
for each. In the code example below, you will see there
are two parts to this script. |
The first part is where you set the variables
for your splash page, while the second part executes those
variables in a working script. Also, be sure to use the
div and layer tags to correctly target the script. Be aware
that these messages are placed "absolutely" on a page so
other elements, if you use them, will wrap above or below.
You can play with the div positioning to see what's best.
In this example, we will display a series of messages before
jumping to another page. This message can be modified in
the time of display and the actual text to display. You
can add as many messages as you want but remember your visitor
will eventually tire of this so try to keep it brief.
|
<html>
<head>
<title>Cool JavaScript</title>
</head>
<body>
<div id="splashcontainer" style="position:absolute;width:350"></div>
<layer id="splashcontainerns" width=450></layer>
<script language="JavaScript">
var intervals=4000
var targetdestination="http://pattayacitythailand.com/"
var splashmessage=new Array()
var openingtags='<font face="Arial" size="4">'
splashmessage[0]="Welcome to the coolest site on
the 'Net ..."
splashmessage[1]="where you can add cool stuff to
your site ..."
splashmessage[2]="All you need to know is how to
copy and paste ..."
splashmessage[3]="Hang on while we take you to Pattayacitythailand.com!"
var closingtags='</font>'
var i=0
function displaysplash_ie(){
if (i<splashmessage.length){
sc_ie.style.visibility="hidden"
sc_ie.innerHT ML='<b><center>'+openingtags+splashmessage[i]+closingtags+'</center></b>'
sc_ie.style.top=document.body.scrollTop+docume nt.body.clientHeight/2-
sc_ie.o
ffsetHeight/2
sc_ie.style.visibility="visible"
i++
}
else{
window.location=targetdestination
return
}
se tTimeout("displaysplash_ie()",intervals)
}
function displaysplash_ns(){
if (i<splashmessage.length){
sc_ns.visibility="hide"
sc_ns.document.writ e('<b>'+openingtags+splashmessage[i]+closingtags+'</b>')
sc_ns. document.close()
sc_ns.left=pageXOffset+window.innerWidth/2- sc_ns.document.width/2
sc_ns.top=pageYOffset+window.innerHeight/2- sc_ns.document.height/2
sc_ns.visibility="show"
i++
}
els e{
window.location=targetdestination
return
}
setTimeout( "displaysplash_ns()",intervals)
}
function positionsplashcontainer(){
if (document.all){
sc_ie=document.all.splashcontainer
sc_ie.style.left=doc ument.body.scrollLeft+document.body.clientWidth/2-
sc_ie.
offsetWidth/2
sc_ie.style.top=document.body.scrollTop+docume nt.body.clientHeight/2-
sc_ie.o
ffsetHeight/2
displaysplash_ie()
}
else if (document.layers){
sc_ns=document.splashcontainerns
sc_ns.left=page XOffset+window.innerWidth/2- sc_ns.document.width/2
sc_ns.top=pageYOffset+window.innerHeight/2- sc_ns.document.height/2
sc_ns.visibility="show"
displaysplash_ns()
}
else
window.location=targetdestination
}
window.onlo ad=positionsplashcontainer
</script>
</body>
</html>
|
Try this script out
click here
Try creating a page using this code and see what happens.
You just have to change the variables in the top portion
of this script to suit your needs. The rest of the code
will perform based on the variables you edit. Have fun
and track your stats with Splash Pages!
|
Top
|
REMOTE SOURCING OF SCRIPTS
|
There's no question about it, JavaScript's add functionality
and fun to any Website. One drawback is they can clutter
up your code, and people can take your code right from your
page. To fix these issues, you can remotely source your
scripts from a directory on your server. This will shorten
your page code and your scripts will not be displayed. Of
course, in order for the script to work, the visitor will
have to download it so they can be found in a browser's
temp directory or cache.
|
Still, remote script sourcing is great
because the script resides in its own file and it's easy
to make site-wide changes. So, how do we do this? First
off, we need a script. Here's a handy date generator you
can use to display the current date on your site (remember,
though, the date will be the one that a user's own computer
is indicating).
Here's the script code.
|
<script language="JavaScript">
var monthNames = new Array(
"Jan.","Feb.","March","April","May","June","July","August","Sept.","Oct
.","N
ov.","Dec.");
var now = new Date();
document.write(monthNames[now.getMonth()] + " " + now.getDate()
+ ", " +
2000);
</script>
|
| We could place this on a page and it will
show the date where we place it. Or we can source this code
like this:
<script language="JavaScript" src='directory/script_name.js'>
|
All you need to do is paste your code into a text editor,
like NotePad, then save it with the JavaScript extension
of ".js" Now place .js file into the right directory on
your server and then place the source tag where you want
your date to display and presto! This works for single component
and multi-part scripts. For example if a two-part script
is needed with variables in the top and display in the bottom,
you can source the variable portion in one file, and the
display portion in another. |
top
|
DISPLAYING HTML CODE ON A PAGE
|
There are a couple of ways to show actual HTML code on a
page ... without it actually converting to what has been
coded. This is important to know if you want people to display
images, text, etc. from your site.
|
An example might be a remotely sourced image or logo
that you would like others to show on their sites. The best
way to display code in HTML format is to use a TEXT AREA
Tag. For example, to display HTML code for copying and pasting,
place the code inside your Text area Tag:
|
<!-- BEGIN CODE -->
<form method="post" action="NULL">
<textarea name="text" cols="50" rows="3" Wrap="Virtual">
<font face=arial size=2>This shows the font tag!</font>
</textarea>
</form>
<!--END CODE-->
Note the "wrap" attribute, this causes the text inside
the box to wrap and not flow in one straight line.
|
|