PDA

View Full Version : Newbie: call script w/out mouseclick

Magoo
12-26-2003, 02:19 PM
Hi,
Below is some html which fades in/out text when buttons are clicked. What I wish to do is fade-in different text strings at different intervals without clicking buttons(i.e one after the other) but haven't a clue how to call the FadeIn/FadeOut functions for specific text strings or to implement delays. I know it's gotta be something simple but I can only get the function to run via an Event Handler.
The main code is from MSDN but their literature is for atomic physicists and not rocket scientists like me, anyone help??

<HTML>
<HEAD>
<TITLE>Jim's Place</TITLE>
<SCRIPT>
<!--
function fadeOut(obj) {
obj.style.filter="blendTrans(duration=1)";
// Make sure filter is not playing.
if ((obj.visibility != "hidden") && (obj.filters.blendTrans.status != 2)) {
obj.filters.blendTrans.Apply();
obj.style.visibility="hidden";
obj.filters.blendTrans.Play();
}
}
function fadeIn(obj) {
obj.style.filter="blendTrans(duration=1)";
// Make sure filter is not playing.
if ((obj.visibility != "visible") && (obj.filters.blendTrans.status != 2)) {
obj.filters.blendTrans.Apply();
obj.style.visibility="visible";
obj.filters.blendTrans.Play();
}
}
-->
</SCRIPT>

</HEAD>
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ff00ff', startColorstr='#800000', gradientType='0');">

<div ID="oDiv" STYLE="visibility:hidden;width:1024; color:#FFFF00; font-family:Lucida handwriting;font-size:xx-large;text-align:center;">M A C ' S &nbsp;&nbsp; P L A C E !</div>
<BUTTON onclick="fadeOut(oDiv)" STYLE="background-color: blue; color: white">Fade Text Out</BUTTON>&nbsp;
<BUTTON onclick="fadeIn(oDiv)" STYLE="background-color: blue; color: white">Fade Text In</BUTTON>
</BODY>
</HTML>
ucm
12-27-2003, 02:50 AM
Welcome to the forums! :)

to run a function, just call it's name either from inside an event like the <body tag's onload="" event or by calling the script from within <script and </script tags...

please note that the object ( oDiv ) in this case as well as the functions to fade it Must be loaded before you start trying to call those functions or else you'll get an error...

i recommend to create a custom function and call that function in the <body's onload event... this function could start the fadein and out process for you AND it won't run untill the entire page is loaded first:

first, a little note about your oDiv's styles; they could be used as a class in your head tag:

<head>
...
...
<style type="text/css">
.cusDiv { display:inline; visibility:hidden; width:1024; color:#FFFF00;
font-family:Lucida handwriting; font-size:xx-large; text-align:center; }
</style>
...
...
</head>


if you want to change one letter at a time, change your doDiv code along the lines of:

<div ID="oDiv1" class="cusDiv">M<div>&nbsp;&nbsp;
<div ID="oDiv2" class="cusDiv">A<div>&nbsp;&nbsp;
<div ID="oDiv3" class="cusDiv">C<div>&nbsp;&nbsp;
<div ID="oDiv4" class="cusDiv">'<div>&nbsp;&nbsp;
<div ID="oDiv5" class="cusDiv">S<div>&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<div ID="oDiv6" class="cusDiv">P<div>&nbsp;&nbsp;
<div ID="oDiv7" class="cusDiv">L<div>&nbsp;&nbsp;
<div ID="oDiv8" class="cusDiv">A<div>&nbsp;&nbsp;
<div ID="oDiv9" class="cusDiv">C<div>&nbsp;&nbsp;
<div ID="oDiv10" class="cusDiv">E<div>&nbsp;&nbsp;
<div ID="oDiv11" class="cusDiv">!<div>&nbsp;&nbsp;


and then for the custom function i mentioned... to set up a timer, you could use the window.setTimeout() function which will run code in the quotation marks after waiting the specified number of milliseconds ( 1000 milliseconds= 1 second ):

under the </style> in your head section, put:


<script>
function doFadeIn(){
window.setTimeout("fadeIn(oDiv1)", 500);
window.setTimeout("fadeIn(oDiv2)", 1500);
window.setTimeout("fadeIn(oDiv3)", 2500);
window.setTimeout("fadeIn(oDiv4)", 3500);
window.setTimeout("fadeIn(oDiv5)", 4500);
window.setTimeout("fadeIn(oDiv6)", 5500);
window.setTimeout("fadeIn(oDiv7)", 6500);
window.setTimeout("fadeIn(oDiv8)", 7500);
window.setTimeout("fadeIn(oDiv9)", 8500);
window.setTimeout("fadeIn(oDiv10)", 9500);
window.setTimeout("fadeIn(oDiv11)", 10500);
}
function doFadeOut(){
window.setTimeout("fadeOut(oDiv1)", 1000);
window.setTimeout("fadeOut(oDiv2)", 2000);
window.setTimeout("fadeOut(oDiv3)", 3000);
window.setTimeout("fadeOut(oDiv4)", 4000);
window.setTimeout("fadeOut(oDiv5)", 5000);
window.setTimeout("fadeOut(oDiv6)", 6000);
window.setTimeout("fadeOut(oDiv7)", 7000);
window.setTimeout("fadeOut(oDiv8)", 8000);
window.setTimeout("fadeOut(oDiv9)", 9000);
window.setTimeout("fadeOut(oDiv10)", 10000);
window.setTimeout("fadeOut(oDiv11)", 11000);
}
</script>


and finally, put in the <body tag's onload event:

<body onload="doFadeIn();" .......



have fun! ;)
Magoo
12-28-2003, 05:53 PM
Thanks UCM,
I never thought of doing one letter at a time, that's pretty cool! I'll try it out.

Once again, thankyou.
ucm
12-28-2003, 06:22 PM
n/p come back any time :)