PDA

Click to See Complete Forum and Search --> : Help With Splash Screen

webGirl20032003
02-10-2003, 11:17 AM
I'm trying to get this intro splash screen to make the images centered in the screen. I've tried changing some values, adding a table, etc. with no luck. If you have any ideas, that would be great.

Thanks!!!


<html>
<head>
<title>Introduction</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<div id="splashcontainer" style="position:top;width:350px;"></div>
<layer id="splashcontainerns" width=450></layer>
<script>
//Specify the paths of the images to be used in the splash screen, if any.
var preloadimages=new Array("tourPic1.jpg","tourPic2.jpg", "tourPic3.jpg", "tourPic4.jpg", "tourPic5.jpg")
var intervals = 4000
var targetdestination="http://www.dynamicdrive.com"

var splashmessage=new Array()
var openingtags='<font face="BankGothic Md BT" size="5">'
splashmessage[0]='<img src="tourPic1.jpg">'
splashmessage[1]='Some Text Here<img src="tourPic2.jpg">'
splashmessage[2]='Some Text Here<img src="tourPic3.jpg">'
splashmessage[3]='Some Text Here<img src="tourPic4.jpg">'
splashmessage[4]='Some Text Here<img src="tourPic5.jpg">'
splashmessage[5]='One moment please...'
var closingtags='</font>'

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.center=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.center=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="top" align="right">
<a href="http://www.dynamicdrive.com"><font color="#FFFFFF" size="1">Skip Intro</font></a>
</td>
</table>
</div>
/*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*/
</body>
</html>
khaki
02-10-2003, 11:36 AM
Ok webGirl, let's see...

Couple of things. First of all, the table doesn't have a row tag, so you should add it.

You could also add another row above that one and place your:

<div id="splashcontainer" style="position:top;width:350px;"></div>
<layer id="splashcontainerns" width=450></layer>

tags in a centered column for that row.

Then you could make the width of your table 100% and that should get it all centered.


That's the quick and dirty way (I didn't test it, but it should worK).

Try that and see if it helps.
k
AH.C
02-10-2003, 12:20 PM
WebGirl...
When trobleshooting, I always find it helpful to turn the borders on so I can see what's happening. Unless there is an explicit reason for formatting purposes, I also use % for widths, rather than absolute values.

If someone is using a 19" montor at 1280, the last thing they want to see is a page with the content set at 400px width, this only wastes screen realestate and I may have to scroll, when I could possible take in all of the page at once. Again, this is only a rule of thumb and is subject to what you as the designer wants the user to experience, but I digress.

I found some of your code to be out of sequence and what not. The only thing I couldn't deal with is Netscape, so I coded that on the fly and hope it works.

What should happen is that your splach is centered horizontally & vertically with some space left at the bottom for the "skip Intro" The bit about Dynamic drive is generally contained within the <script>, but if you want it displayed, go ahead and move it back down and adjust your table & row heights accordingly.

I'm only pasting in my corrections in sections as follows;
......
first line unaltered
MY CODING
last line unaltered...
......
Repeat

So here goes;

.......
<body bgcolor="#000000" text="#FFFFFF">
<table border="1" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr><td align=center valign=center id="splashcontainer" style="width:100%;height:90%;">
<center>
<layer id="splashcontainerns" width=450 height=90% align=center></layer>
<script language="javascript" type="text/javascript">
//Specify the paths of the images to be used in the splash screen, if any.
........
window.onload=positionsplashcontainer
/*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*/
</script>
</center></td></tr>
<tr><!--Set href in below link to the URL of the target destination-->
<td valign="top" align="right" height="10%">
<a href="http://www.dynamicdrive.com"><font color="#FFFFFF" size="1">Skip Intro</font></a>
</td></tr></table>
</body>

HTH
khaki
02-10-2003, 01:36 PM
... or .... someone can just whip it up and do it for you (lol)!

Hopefully you understood it (and didn't just copy and past what AH.C typed-up for you without giving it a look).

I don't think that there is anything wrong with using pre-fab scripts, but you should try to understand them as much as possible if you are going to put them into your own pages - especially since there was a very basic table element missing from the script that you posted.

You could have gotten this to work just by following what I suggested (without AH.C doing it for you - although I hope you realize that you need to include the entire contents of the script from AH.C's example).

Doing as much of it yourself is the best way to learn, and this was one of the more simpler ones, so I really really do hope you understand why it works.

And just so you know, it does work in Netscape7 as well (we'll still have to wait and see if it passes the "accessibility" scrutiny that occurs in this forum however - which is what I come here to try to learn).

Glad you posted. We need more web-girls in here and you are named perfectly! (wink)
k
AH.C
02-10-2003, 03:58 PM
My intent was not to just whip it up and do it for anyone. At the time I was responding to the original post, Khaki had not yet posted her response. I figured it would be best to alter as little as possible, yet lay it out so that anyone could analyze the corrections for themselves. I also threw in a few thots to keep in mind when coding, to better cope with whatever resolution a visitor might be using.

I'd suggest that both suggestions be tested separately and go with the one that works best--or a blend thereof. :p

Speaking of learning hoow code works, Webgirl didn't mention what program she uses to code her HTML
--hopefully not Frontpage :eek:!!!

Check out http://www.code-builders.com and download their free HTML program (also handles JS, Java, Perl etc). I just downloaded it recently and like its functionality and layout.

For the past 3 years I have always used 1stPage2000 and there is an interesting story behind the history of these two programs. But for all practical purposes, one might consider the codebuilders to be new and improved for Y2K3.

HTH
khaki
02-10-2003, 04:19 PM
AH.C wrote:
My intent was not to just whip it up and do it for anyone. At the time I was responding to the original post, Khaki had not yet posted her response.
Hey, I wasn't trying to make you take offense. I was just mentioning it becuase I had not yet heard from webGirl if she tried what I had suggested (and then I saw that you had worked up her code for her, and I figured she wouldn't bother to try it on her own).

I wouldn't ever try to make anybody feel that they have done anything wrong when they are trying to help others. I'm sorry that you misunderstood me (or that I wasn't too clear). I DID drop in the lol though, so I thought that I was ... well never mind.
(I'm afraid that I'm not having a very good day today).

Anyway, we both gave her the same suggestion, so she is probably Ok at this point (or I'm sure we would have heard something by now). That's all that matters.

Don't take offense. None was intended.
Bye
k
AH.C
02-10-2003, 04:37 PM
None taken.

It's Monday, hopefully your week will only get better.

Take care...