asked on

fade in and out every few seconds, please help, thanks

I have the following script that randomly picks a line from a file and prints it on screen when the browser is refreshed.

It works fine, but now the client wants something different, not knowing JavaScript can you help? He now wants the quotes to fade in and out every few seconds, instead of when the browser is refreshes which it does now.

Can anyone help, do you have a script like the one below which doe this every few seconds on screen?

This is what I have so far which just reads from my file and prints on screen randomly, I need the same but it happens every few seconds AND NOT when the browser refreshes.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="quotes.js"></SCRIPT>

<script>
function quotePrint()
{
var index = parseInt(Math.random()*Quotes.length)

return(Quotes[index])
}

</script>

<body>

<script>document.write(quotePrint())</script>

ragerino

you can load xmlDocument by Javascript and Parse them
you should do a backend-script which provides you the xml-data.

fading in and out is described on lots of other sites
try: hotscripts.com

let's start

the xml-file provided by the backend for this example should look something like this
-------------------------------------------------------------------------------
<?xml version="1.0" encoding="ISO-8859-1" ?>
<randomText>your random Text that should be changed on the website</randomText>
-------------------------------------------------------------------------------

Javascript Code:
-------------------------------------------------------------------------------
/** Helper-Function
*** works with IE and Mozilla
**/

//global Variable for chaching the xml-documents if needed
var xmldocs=new Array();

function getXmlDoc(url,forceReload){
      //forceReload is an optional Parameter
      //and is default false
      if(!forceReload)
            var forceReload=false;
      if(!xmldocs[url] || forceReload==true){
            if (document.implementation && document.implementation.createDocument) {
                  xmldocs[url]=document.implementation.createDocument('','',null);
            } else {
                  xmldocs[url]=new ActiveXObject("Microsoft.XMLDOM");
            }
            //set async false to continue when xmldoc has finished loading
            xmldocs[url].async=false;
            xmldocs[url].load(url);
      }
      return(xmldocs[url]);
}

//function which returns the random-Text
function getRandomText(url){
      //get the Xml-Data
      getXmlDoc(url,true);
      var text='';
      if(xmldocs[url])
            text=xmldocs[url].getElementByTagName('randomText').firstChild.data+'';
      return(text);
}

//function which changes the Text inside a div-Element
function changeRandomText(id,url){
      document.getElementById(id).innerHTML=getRandomText(url);
}
---------------------------------------------------------------------------------

Html-Code
---------------------------------------------------------------------------------
<body onload="window.setIntervall('changeRandomText(\'randomTextDiv\',\'./randomTextAsXml.php\');',5000)">
....
<div id="randomTextDiv"></div>
....
</body>
---------------------------------------------------------------------------------

ragerino

haven't tested this example
just copied js-code from other projects

if you find an error just ask me
but this should be the solution.

don't forget to set the content-type of the xml-file to "text/xml" because internet-explorer doesn't allways accept the xml-file without right content-type

OMC2000

This is working example form MSDN:

<html>
<body>


<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px;
height:300px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0) ">



<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
background:gold"> This is DIV #1 </DIV>



<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px;
width:240px; height:160px; background: yellowgreen; " > <BR> This is DIV #2
</DIV>
</DIV>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>

<SCRIPT>
var bTranState = 0;
function fnToggle() {
oTransContainer.filters[0].Apply();
if (bTranState=='0') {
bTranState = 1;
oDIV2.style.visibility="visible";
oDIV1.style.visibility="hidden";}
else {
bTranState = 0;
oDIV2.style.visibility="hidden";
oDIV1.style.visibility="visible";}
oTransContainer.filters[0].Play();
setTimeout("fnToggle()","1500");
}
setTimeout("fnToggle()","900");

</SCRIPT>
</body>
</html>

ragerino

fade the text:

http://www.greywyvern.com/javascript.php

pigmentarts

ASKER

Sorry your going to have to explain in more basic terms for me, can you should me how it would be in a html document. The external file I used is called quotes, does this have to be a xml file now?

ragerino

pigmentarts

ASKER

on http://www.greywyvern.com/javascript.php the first one where the blocks of text are flying in and out thats what i need, but i can not get it to work, and working examples i can use please?

SOLUTION

OMC2000

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

ragerino

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial