1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:25 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Can anyone help with setting time for Intro Page

intro page

         

donnwar

12:42 pm on Dec 11, 2003 (gmt 0)

10+ Year Member



I have this nice page that I created for our Casual Basketball Club. I actually want to use it as an intro page that redirects to the main page immediately after excuting the last text animation with just about 3 seconds in between. The code has JS and Html( I dont know I can attach it)

Please see the page here <sorry, no URLs or site reviews>

I appreciate any advice, thanks!

[edited by: tedster at 1:15 pm (utc) on Dec. 11, 2003]

BlobFisk

3:23 pm on Dec 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Is the text animation in an animated gif or in a Flash movie?

If it's in a flash movie, redirect from the movie iteself.

If it's an animated gif, things get more difficult... you can try a setTimout to delay the execution of a redirect script - but then you are not factoring in whether the gif has been downloaded and fully run etc. etc.

In the case of an animated gif, why not just create a skip intro link and make the image clickable, with both targets being the home page. You could make the last frame of the image a "click here to enter the site" frame.

Aside: Introductory animations are thankfully going out of fashion, as they just delay the user from getting to the content of your site... If you are going to use one, you should have a skip intro link on the page

HTH

donnwar

10:07 pm on Dec 11, 2003 (gmt 0)

10+ Year Member



Here is the code, please take a look, thank you your help

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Fans only bb club</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
v\:* { behavior: url(#default#VML); }
</style>
</head>

<body bgcolor="#003399" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<script type="text/javascript">

// Add as many messages as you like
var message=new Array("WELCOME", "The number one leisure Basketball club", "for friendly and outgoing folks", "We wish you a Merry Christmas", "and a prosperous New Year")

var outlinecolor=new Array("white", "yellow")

var fillcolor1=new Array("white", "white", "white", "white")

var fillcolor2=new Array("white", "white", "yellow", "white")

var circlemark=new Array("-")

// Set the width of the outline
var strkweight=2

// Set the waiting time between the messages (seconds)
var pause=2

// Set the strength of the opacity (transparency of letters)
var strengthopacity="60%"

// Set the size of the circle (values range from 0.1 to 1)
var circlesize=0.5

// Always keep messages in view even if page is scrolled? (DD added option)
var keepinview="yes"

// Do not edit below this line

mytruebody=(!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body //DD added object

var outerwidth=mytruebody.clientWidth
var outerheight=mytruebody.clientHeight

var innerwidth=Math.floor(circlesize*outerwidth)
var innerheight=Math.floor(circlesize*outerheight)

var posleft=(outerwidth-innerwidth)/2
var postop=(outerheight-innerheight)/2

var path=new Array()
var i_message=0
var i_outlinecolor=0
var i_fillcolor1=0
var i_fillcolor2=0
var i_messagelength=0
var longestmessage=0
pause*=1000

var ie=document.getElementById&&document.all?1:0

for (i=0;i<=message.length-1;i++) {
if (message[i].length>longestmessage) {
longestmessage=message[i].length
}
longestmessage+=4
}

for (i=0;i<=message.length-1;i++) {

var emptyspace=""
var i_emptyspace=(longestmessage-message[i].length)/2
for (ii=0;ii<=i_emptyspace;ii++) {
emptyspace+=circlemark
}
message[i]=emptyspace+" "+message[i]+" "+emptyspace
}

function changeform() {
if (keepinview=="yes") //DD added
document.getElementById("roofid").style.top=mytruebody.scrollTop //DD added
if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0}
if (i_fillcolor1 >= fillcolor1.length) {i_fillcolor1=0}
if (i_fillcolor2 >= fillcolor2.length) {i_fillcolor2=0}
document.getElementById('strokeid').color=outlinecolor[i_outlinecolor]
document.getElementById('fillid').color=fillcolor1[i_fillcolor1]
document.getElementById('fillid').color2=fillcolor2[i_fillcolor2]
if (i_message < message.length) {tick()}
else {document.getElementById('textpathid').string=""
document.getElementById("roofid").style.display="none" //DD added
}
}

function tick() {
if (i_messagelength <= message[i_message].length) {
var messagestringend=""
var messagestring=message[i_message].substring(0, i_messagelength)+messagestringend
document.getElementById('textpathid').string=messagestring
var timer=setTimeout("tick()",50)
i_messagelength++
}
else {
clearTimeout(timer)
i_messagelength=0
i_message++
i_outlinecolor++
i_fillcolor1++
i_fillcolor2++
var timer=setTimeout("changeform()",pause)
}

}

if (ie) {
document.write('<div id="roofid" style="position:absolute;left:0px;top:0px;width:'+outerwidth+'px;height:'+outerheight+'px;overflow:hidden;">')
document.write('<v:oval id="tc" style="position:absolute;top:'+postop+'px;left:'+posleft+'px;width:'+innerwidth+'px;height:'+innerheight+'px">')
document.write('<v:shadow on="t" opacity="'+strengthopacity+'"/>')
document.write('<v:stroke id="strokeid" weight="'+strkweight+'pt" color="blue"/>')
document.write('<v:fill id="fillid" on="True" color="'+fillcolor1[0]+'" color2="'+fillcolor2[0]+'" opacity="'+strengthopacity+'" opacity2="'+strengthopacity+'" type="gradient"/>')
document.write('<v:path textpathok="t"/>')
document.write('<v:textpath id="textpathid" on="t" id="mytp" style="font-family:\'Arial Black\'; " fitpath="t" string=""/>')
document.write('</v:oval></div>')
if (window.attachEvent) //DD added code
window.attachEvent("onload", changeform) //DD added code
else
window.onload=changeform
}
</script>

<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"align="center">
<tr>
<td valign="top"> <div align="center">
<h1><font size="+4" face="Monotype Corsiva"><strong>Fans Only Basketball
Club </strong></font></h1>
</div></td>
</tr>
<tr>
<td align="right" valign="bottom"><div align="center">[ <a href="index.htm">Skip
Intro</a> ]</div></td>
</tr>
</table>

</body>
</html>

dlab

2:00 am on Dec 17, 2003 (gmt 0)

10+ Year Member



Yeah, try this:
please notice lines 134-138
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Fans only bb club</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
v\:* { behavior: url(#default#VML); }
</style>
</head>

<body bgcolor="#003399" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<script type="text/javascript">

// Add as many messages as you like
var message=new Array("WELCOME", "The number one leisure Basketball club", "for friendly and outgoing folks", "We wish you a Merry Christmas", "and a prosperous New Year")

var outlinecolor=new Array("white", "yellow")

var fillcolor1=new Array("white", "white", "white", "white")

var fillcolor2=new Array("white", "white", "yellow", "white")

var circlemark=new Array("-")

// Set the width of the outline
var strkweight=2

// Set the waiting time between the messages (seconds)
var pause=2

// Set the strength of the opacity (transparency of letters)
var strengthopacity="60%"

// Set the size of the circle (values range from 0.1 to 1)
var circlesize=0.5

// Always keep messages in view even if page is scrolled? (DD added option)
var keepinview="yes"

// Do not edit below this line

mytruebody=(!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body //DD added object

var outerwidth=mytruebody.clientWidth
var outerheight=mytruebody.clientHeight

var innerwidth=Math.floor(circlesize*outerwidth)
var innerheight=Math.floor(circlesize*outerheight)

var posleft=(outerwidth-innerwidth)/2
var postop=(outerheight-innerheight)/2

var path=new Array()
var i_message=0
var i_outlinecolor=0
var i_fillcolor1=0
var i_fillcolor2=0
var i_messagelength=0
var longestmessage=0
pause*=1000

var ie=document.getElementById&&document.all?1:0

for (i=0;i<=message.length-1;i++) {
if (message[i].length>longestmessage) {
longestmessage=message[i].length
}
longestmessage+=4
}

for (i=0;i<=message.length-1;i++) {

var emptyspace=""
var i_emptyspace=(longestmessage-message[i].length)/2
for (ii=0;ii<=i_emptyspace;ii++) {
emptyspace+=circlemark
}
message[i]=emptyspace+" "+message[i]+" "+emptyspace
}

function changeform() {
if (keepinview=="yes") //DD added
document.getElementById("roofid").style.top=mytruebody.scrollTop //DD added
if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0}
if (i_fillcolor1 >= fillcolor1.length) {i_fillcolor1=0}
if (i_fillcolor2 >= fillcolor2.length) {i_fillcolor2=0}
document.getElementById('strokeid').color=outlinecolor[i_outlinecolor]
document.getElementById('fillid').color=fillcolor1[i_fillcolor1]
document.getElementById('fillid').color2=fillcolor2[i_fillcolor2]
if (i_message < message.length) {tick()}
else {
document.getElementById('textpathid').string=""
document.getElementById("roofid").style.display="none" //DD added
endIntro();
}
}

function tick() {
if (i_messagelength <= message[i_message].length) {
var messagestringend=""
var messagestring=message[i_message].substring(0, i_messagelength)+messagestringend
document.getElementById('textpathid').string=messagestring
var timer=setTimeout("tick()",50)
i_messagelength++
}
else {
clearTimeout(timer)
i_messagelength=0
i_message++
i_outlinecolor++
i_fillcolor1++
i_fillcolor2++
var timer=setTimeout("changeform()",pause)
}

}

if (ie) {
document.write('<div id="roofid" style="position:absolute;left:0px;top:0px;width:'+outerwidth+'px;height:'+outerheight+'px;overflow:hidden;">')
document.write('<v:oval id="tc" style="position:absolute;top:'+postop+'px;left:'+posleft+'px;width:'+innerwidth+'px;height:'+innerheight+'px">')
document.write('<v:shadow on="t" opacity="'+strengthopacity+'"/>')
document.write('<v:stroke id="strokeid" weight="'+strkweight+'pt" color="blue"/>')
document.write('<v:fill id="fillid" on="True" color="'+fillcolor1[0]+'" color2="'+fillcolor2[0]+'" opacity="'+strengthopacity+'" opacity2="'+strengthopacity+'" type="gradient"/>')
document.write('<v:path textpathok="t"/>')
document.write('<v:textpath id="textpathid" on="t" id="mytp" style="font-family:\'Arial Black\'; " fitpath="t" string=""/>')
document.write('</v:oval></div>')
if (window.attachEvent) //DD added code
window.attachEvent("onload", changeform) //DD added code
else
window.onload=changeform
}

function endIntro() {
alert("Stuff for the end of the intro would go here..");
//Just uncomment the following line and change "page2.html" to whatever you want
//window.location.href = "page2.html";
}
</script>

<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"align="center">
<tr>
<td valign="top"> <div align="center">
<h1><font size="+4" face="Monotype Corsiva"><strong>Fans Only Basketball
Club </strong></font></h1>
</div></td>
</tr>
<tr>
<td align="right" valign="bottom"><div align="center">[ <a href="index.htm">Skip
Intro</a> ]</div></td>
</tr>
</table>

</body>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:25 pm May 13, 2026