Changing Splash Screen Text Positioning

**Doc** · 09-04-2005, 12:38 AM

I have added a picture to the splash screen that stays onscreeen while the text scrolls. However, I need to be able to move the text lower on the screen so that it isn't across the image. How can I do that?

Thanks
Doc

**jscheuer1** · 09-04-2005, 02:24 AM

Without seeing your code or, preferably a demo, it's hard to be precise. If your text is absolutely or relatively positioned, increase its top value, making sure to include units. If it is just in the flow of the document, add blank lines before it:

HTML Code:

<br>&nbsp;<br>

There could always be circumstances I cannot foresee in a case like this, so:

PLEASE: Include the URL to your problematic webpage that you want help with.

**Doc** · 09-04-2005, 10:40 PM

Originally Posted by jscheuer1

Without seeing your code or, preferably a demo, it's hard to be precise. If your text is absolutely or relatively positioned, increase its top value, making sure to include units. If it is just in the flow of the document, add blank lines before it:

HTML Code:

<br>&nbsp;<br>

There could always be circumstances I cannot foresee in a case like this, so:

PLEASE: Include the URL to your problematic webpage that you want help with.

Okay, Here it is:

What I want to do is to have the title (US Service Corps) above the image, and below the image the scrolling text.

<html>

<head>
<title>Intro Screen...</title>
</head>

<body bgcolor="#3300cc" text="#ffff00">

<center>
<h1>U.S. SERVICE CORPS</h1>
<br><br>
<img src="eaglesplash.jpg" width="432" height="299" alt="" border="0">
</center>

<div id="splashcontainer" style="position:absolute;width:350px;"></div>

<layer id="splashcontainerns" width=450></layer>

<script>

/*
Dynamic Splash Screen effect- © Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
Visit http://dynamicdrive.com
*/

//Specify the paths of the images to be used in the splash screen, if any.
//If none, empty out array (ie: preloadimages=new Array())
var preloadimages=new Array()
//configure delay in miliseconds between each message (default: 2 seconds)
var intervals=2000
//configure destination URL
var targetdestination="http://www.ussc.us"

//configure messages to be displayed
//If message contains apostrophe('), backslash them (ie: "I\'m fine")

var splashmessage=new Array()
var openingtags='<font face="Arial" size="6">'
splashmessage[0]='Welcome to U.S. Service Corps'
splashmessage[1]='P.R.I.D.E.'
splashmessage[2]='Prepared'
splashmessage[3]='Response'
splashmessage[4]='in <br>Disasters'
splashmessage[5]='and <br>Emergencies'
splashmessage[6]='Please stand by...'
var closingtags='</font>'

//Do not edit below this line (besides HTML code at the very bottom)

var i=0

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
var theimages=new Array()

//preload images
if (document.images){
for (p=0;p<preloadimages.length;p++){
theimages[p]=new Image()
theimages[p].src=preloadimages[p]
}
}

function displaysplash(){
if (i<splashmessage.length){
sc_cross.style.visibility="hidden"
sc_cross.innerHTML='<b><center>'+openingtags+splashmessage[i]+closingtags+'</center></b>'
sc_cross.style.left=ns6?parseInt(window.pageXOffset)+parseInt(window.innerWidth)/2-parseInt(sc_cross.style.width)/2 : document.body.scrollLeft+document.body.clientWidth/2-parseInt(sc_cross.style.width)/2
sc_cross.style.top=ns6?parseInt(window.pageYOffset)+parseInt(window.innerHeight)/2-sc_cross.offsetHeight/2 : document.body.scrollTop+document.body.clientHeight/2-sc_cross.offsetHeight/2
sc_cross.style.visibility="visible"
i++
}
else{
window.location=targetdestination
return
}
setTimeout("displaysplash()",intervals)
}

function displaysplash_ns(){
if (i<splashmessage.length){
sc_ns.visibility="hide"
sc_ns.document.write('<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++
}
else{
window.location=targetdestination
return
}
setTimeout("displaysplash_ns()",intervals)
}

function positionsplashcontainer(){
if (ie4||ns6){
sc_cross=ns6?document.getElementById("splashcontainer"):document.all.splashcontainer
displaysplash()
}
else if (ns4){
sc_ns=document.splashcontainerns
sc_ns.visibility="show"
displaysplash_ns()
}
else
window.location=targetdestination
}
window.onload=positionsplashcontainer

</script>



<div align="right">
<table border="0" width="200" height="100%" cellspacing="0" cellpadding="0">
<td width="100%" valign="bottom" align="right">
[ <a href="http://www.ussc.us"><font color="#FFFFFF">Skip Intro</font></a> ]
</td>
</table>
</div>

</body>
</html>

**jscheuer1** · 09-05-2005, 04:14 AM

This was a little tricky because the script's html/style layout is not designed to be on the same page with much other content. I was happy with changing this:

Code:

<body bgcolor="#3300cc" text="#ffff00">

<center>
<h1>U.S. SERVICE CORPS</h1>
<br><br>
<img src="eaglesplash.jpg" width="432" height="299" alt="" border="0">
</center>

<div id="splashcontainer" style="position:absolute;width:350px;"></div>

<layer id="splashcontainerns" width=450></layer>


<script>

to this:

Code:

<body bgcolor="#3300cc" text="#ffff00">

<center>
<h1>U.S. SERVICE CORPS</h1>
<br><br>
<img src="eaglesplash.jpg" width="432" height="299" alt="" border="0">br>&nbsp;<br>

<div id="splashcontainer" style="width:350px;"></div>
</center>

<layer id="splashcontainerns" width=450></layer>


<script>

Then at the bottom changing this:

Code:

<div align="right">
<table border="0" width="200" height="100%" cellspacing="0" cellpadding="0">
<td width="100%" valign="bottom" align="right">
[ <a href="http://www.ussc.us"><font color="#FFFFFF">Skip Intro</font></a> ]
</td>
</table>
</div>

to this:

Code:

<div style="position:absolute;bottom:20px;right:20px;">
<table border="0" width="200" cellspacing="0" cellpadding="0">
<td width="100%" valign="bottom" align="right">
[ <a href="http://www.ussc.us"><font color="#FFFFFF">Skip Intro</font></a> ]
</td>
</table>
</div>

**Doc** · 09-06-2005, 02:05 AM

It works well at http://www.ussc.us

Thanks!
Doc

Thread: Changing Splash Screen Text Positioning

Thread Tools

Search Thread

Changing Splash Screen Text Positioning

Bookmarks

Bookmarks

Posting Permissions