PDA

View Full Version : 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
:confused:

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:

<br>&nbsp;<br>There could always be circumstances I cannot foresee in a case like this, so:

.

Doc
09-04-2005, 10:40 PM
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:

<br>&nbsp;<br>There could always be circumstances I cannot foresee in a case like this, so:

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

<!--Set href in below link to the URL of the target destination-->

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

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

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

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

<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