PDA

View Full Version : Splash page help


jasmine
12-04-2006, 04:12 PM
I found the following Java Script for a splash page. When I tested it in Dreamweaver, it worked fine. The only thing I can't seem to figure out how to change is the placement of the dynamic text and the placement of the "skip intro" link. I'd like them to be closer to eachother. I've fiddled around with is but can't seem to get anything to work...Can anyone help me?


<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("http://abstract.simplenet.com/point.gif","http://abstract.simplenet.com/point2.gif")
//configure delay in miliseconds between each message (default: 2 seconds)
var intervals=2000
//configure destination URL
var targetdestination="http://www.dynamicdrive.com/dynamicindex3/dynamicsplash.htm"

//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="4">'
splashmessage[0]='<img src="http://abstract.simplenet.com/point.gif"> Welcome to Dynamic Drive <img src="http://abstract.simplenet.com/point2.gif">'
splashmessage[1]='The premier place on the net for free DHTML scripts'
splashmessage[2]='All scripts on this site take advantage of the latest in JavaScript/ DHTML technology'
splashmessage[3]='With emphasis on practicality and backwards compatibility'
splashmessage[4]='To bring true power and interactivity to your site.'
splashmessage[5]='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.pageXOffse t)+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.dynamicdrive.com/dynamicindex3/dynamicsplash.htm"><font color="#FFFFFF">Skip Intro</font></a> ]
</td>
</table>
</div>

domedia
12-04-2006, 04:15 PM
The only thing I can't seem to figure out how to change is the placement of the dynamic text and the placement of the "skip intro" link. Placement of elements are all done in CSS, and you didn't show any of your CSS. Can you post the full page and CSS file (of you have it in a separate file)?

EDIT:
Actually nevermind. at closer examination I see it's all in there. Give me a few minutes :)

jasmine
12-04-2006, 04:29 PM
That is the full code (excluding the html and head tags). I found it on dynamicdrive.com and basically, you just go in and edit the changing text so that it says what you want it to say. I don't have any CSS established for it just yet.
There is one layer called splashcontainer, and a div tag called splashcontainer, but even when I move those around, it didn't change anything. I even put the whole code in a layer, and that did nothing...I'm not exactly sure what I should be CSS-ing to have the right placement.

domedia
12-04-2006, 04:30 PM
Actually, I don't see the problem.. all the positioning looks good. What did not work for you when you tried to change it?

The only thing I can think of is that the absolute positioning might confuse you. Make sure that the parent elemen of the div splashcontainer has relative positioning defined, if that is what you want.

If that dones't help you, come back with some more detailed information about the problem you're having and how you tried to solve it.

jasmine
12-04-2006, 04:40 PM
well, when I fist put the code in, all I did was change the dynamic text. When I previewed it, the text is all squished at the top (see screenshot.jpg). That's what I can't seem to move around to where I want it to be.

domedia
12-04-2006, 04:45 PM
It's there because of the absolute positioning. Remove it if you don't need it, or replace it with you own. You can't use design view for this. If you want to edit scripts you find online you have to manually write code :-(
The skip link is where it is because it's set to align right.

jasmine
12-04-2006, 04:51 PM
I don't mind editing in the code, that's pretty much what I was doing already. Like you said, the design view is no good for this...I thought it might be the positioning. I'll try that out and see what comes out of it. Thanks! :)

jasmine
12-04-2006, 05:53 PM
ok, so I have it positioned where I want it, by putting all the java in a layer. The only problem is that the dynamic text is squished against the top of my layer. Would it have anything to do with the "splashcontainer div" tag?

domedia
12-04-2006, 05:57 PM
Could have something to do with it. Did you insert a top margin to move it away from the top?

jasmine
12-04-2006, 06:40 PM
in my layer? no, i haven't done that...i will try it!

jasmine
12-04-2006, 09:11 PM
ok, I got it going! The padding thing worked great! :) Thanks alot!

domedia
12-04-2006, 09:17 PM
Excellent Jasmine :) Keep us updated!