Solved

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

Posted on 2004-11-02
4,262 Views
Last Modified: 2008-01-09
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>
0
Question by:pigmentarts
    8 Comments
     
    LVL 3

    Expert Comment

    by: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>
    ---------------------------------------------------------------------------------
    0
     
    LVL 3

    Expert Comment

    by: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
    0
     
    LVL 15

    Expert Comment

    by:OMC2000
    This is working example form MSDN:


    <html>
    <body>
    <!-- This element has the filter applied. -->

    <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) ">

    <!-- This is the first content that is displayed. -->

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

    <!-- This content displays after the first content. -->

        <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>
    0
     
    LVL 3

    Expert Comment

    by:ragerino
    0
     
    LVL 12

    Author Comment

    by:pigmentarts
    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
    0
     
    LVL 12

    Author Comment

    by:pigmentarts
    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?
    0
     
    LVL 15

    Assisted Solution

    by:OMC2000
    you don't need XML, use your Quotes
    <html>
    <body>
    <!-- This element has the filter applied. -->

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

    <!-- This is the first content that is displayed. -->

        <DIV ID="oDIV1" STYLE="position:absolute; top: 0px; left: 0px; width: 300px;
    height:300px; color: black;"> </DIV>

    <!-- This content displays after the first content. -->

        <DIV ID="oDIV2" STYLE="position:absolute; top: 0px; left: 0px; width: 300px;
    height:300px; color: black;"> </DIV>
    </DIV>


    <SCRIPT>
    var bTranState = 0;

    var Quotes = new Array();

    Quotes[0] = "this is the first string";
    Quotes[1] = "and this is the second string";
    Quotes[2] = "and this is the third string";

    function quotePrint()
    {
      var index = parseInt(Math.random()*Quotes.length);
      return Quotes[index];
    }

    function fnToggle() {
        oTransContainer.filters[0].Apply();
        if (bTranState=='0') {
            bTranState = 1;
            oDIV2.style.visibility="visible";
            oDIV1.style.visibility="hidden";
            oDIV2.innerHTML = quotePrint();
        }
        else {  
            bTranState = 0;
            oDIV2.style.visibility="hidden";
            oDIV1.style.visibility="visible";
    //        oDIV1.innerHTML = quotePrint();
        }
        oTransContainer.filters[0].Play();
      setTimeout("fnToggle()","5000");
    }
      setTimeout("fnToggle()","900");

    </SCRIPT>
    </body>
    </html>
    0
     
    LVL 3

    Accepted Solution

    by:
    you can also use your quotes array:)

    view the source of this page http://www.greywyvern.com/code/js/fade.html

    copy the styles to your page
    copy the script code to your page till this line "/* ***** End: GreyWyvern's Buffered Text-fade Effect - v2.1 ******** */"

    paste following code at the end of the script
    -----------------------------------------------------------------------
    var fader=new Array();
    fader[0] = new fadeObj(0, 'fade0', 'dddddd', '000000', 40, 40, true);
    for(var i=0;i<Quotes.length;i++)
          fader[0].message[i]=Quotes[i];

    var olditem=-1;

    function fadeRandom(){
          if(olditem>-1)
                fade(0,olditem,false);
          var newitem=-1;
          while(newitem<0 || newitem==olditem)
                var newitem=parseInt(fader[0].message.length*Math.random());
          fade(0,newitem,true);
          olditem=newitem;
    }

    var fadeInterval=window.setInterval('fadeRandom();',5000);
    -----------------------------------------------------------------------


    insert following line where your fader should be placed in your html-code
    -----------------------------------------------------------------------
    <div id="fade0"></div>
    -----------------------------------------------------------------------

    that worked for me:

    here's the code of my testpage
    i created the quotes-array by myself


    ----------------------------------------------------------------------
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <title>Fader script v2.1</title>
      <script type="text/javascript">

    /* ********************************************************************
    * GreyWyvern's Buffered Text-fade Effect - v2.1
    * - A bit of Javascript for handling intelligent fading of text
    *
    *   This program is licenced under the GPL and may be distributed far
    * and wide, anywhere on the planet and beyond (maybe!)  If you happen
    * to get a kick out of this script, please drop me a note at:
    * javascript@greywyvern.com and tell me where you gave it a good home
    * and plenty of bytes to eat, hmmm? :)  I'd be eternally grateful.
    *
    * Description:
    *   A complete recode of the original fade in and out javascript I
    * wrote with many improvements.  The buffer system now works almost
    * flawlessly, and making fade effects is much easier for the javascript
    * beginner.  Just fill in the messages and assign the onmouseover and
    * onmouseout attributes with the appropriate fade function!  It also
    * helps *me* out by allowing the instruction manual (below) to be much
    * simpler to write ;)
    *
    * Changelog:
    *  2.1 - The script would cancel two fade commands if one was a fade in
    *        and one was a fade out of the same fade target and message.
    *        I added some extra code to cancel the opposite case: two
    *        commands where one is a fade out and the other is a fade in of
    *        the same message.
    *      - If the fade trigger element contained text within an HTML
    *        element, a quick mouseover/mouseout or mouseout/mouseover pair
    *        of events would be triggered if you moused-out of the text,
    *        while staying within the trigger element.  I added a new
    *        timeout to catch this set of events.
    *
    * Support:
    *   Opera 7.x  - Perfectly
    *   IE 6       - Perfectly
    *   IE 5.5     - Perfectly
    *   IE 5.01    - Fails
    *   Mozilla    - Flickers slightly
    *   Firefox    - Flickers slightly
    *
    *
    * I) Setting Up
    *   Copy the javascript from this page into an external .js file or
    * into the <script> tag of your own HTML page.  This shouldn't be that
    * difficult, but you wouldn't believe the kind of mail I get about
    * this!  Just do it, okay?  Jeez.
    *
    * a) The Fade Object
    *   After that's done we need to create a fade object.  We do this by
    * calling the fadeObj function with a number of arguments.  We'll use
    * the default example included in the script: fader[0].  You can delete
    * the fader[1] lines if you like.
    *
    * fader[0] = new fadeObj(0, 'fade0', 'dddddd', '000000', 20, 20, true);
    *
    *   We'll go through the arguments in order.
    *
    *   The first argument (0), is the same number you give to the fader
    * variable.  So if your fader object is fader[78], the first argument
    * would be 78.
    *
    *   Next is the id of the HTML tag which will be displaying the fading
    * effect.  Usually you'll want to apply some height and width styles to
    * this element, since it starts out with no text by default and will
    * probably be collapsed.  You don't want it jumping around when the
    * script writes new text to it.
    *
    *   The next two values are hexidecimal colour values, WITHOUT the
    * preceding #.  The first value is the starting colour, or the colour
    * the text is before it fades in.  The second value is the ending
    * colour, or the colour the text will be when it finishes fading in.
    *
    *   After this comes two speed integers, the first for fade-in speed,
    * the second for fade-out.  The speed of the fade will increase the
    * smaller these numbers get.  At a value of one there is no visible
    * fade effect; the text will just "appear".
    *   Essentially what these numbers are is the number of "steps" the
    * script must take to complete the fade.  With a value of 20 like in
    * the example above, there will be 20 colour changes before the text
    * is fully faded-in or faded-out.
    *
    *   The final argument is very important.  It tells the script if there
    * is a default block of text you'd like to display in the fade element.
    * If set to true, the value of the message[0] will be faded-in if there
    * are no more fade commands in the queue.  Once another fade is
    * triggered, the default text will fade out first before the new text
    * fades in.
    *   If set to false, the script will erase the text in the fade element
    * if there are no more fade commands left in the queue, leaving it
    * completely blank.
    *
    *
    * b) The Fade Messages
    *   After setting up our fade object, all we need to do now is write
    * out all of the messages which will be displayed in this element.
    * Remember that this script only affects text and including images or
    * links won't work.
    *
    *   Messages are included in the message[] array.  Simply assign each
    * message a number, like so:
    *
    * fader[0].message[1] = "Fade text, message one.";
    *
    *   Each fade object can have as many messages as you want, and be in
    * any numerical order.  You can even skip numbers, but note that if you
    * use the fade() pointed at a message number which doesn't exist, you
    * will get an error.
    *
    *   As mentioned above, if your fade object has a default message
    * specified, it will use the message text from message[0].  Specifying
    * a default message and not including a message[0] will cause an error.
    *
    *
    * II) The Events
    *   Fades can be triggered by any DOM event, but most likely you'll be
    * using mouseover and mouseout events.  I used those events as examples
    * below.
    *
    *   To trigger a fade, you use the fade() function which takes a few
    * important arguments:
    *
    * Example: onmouseover="fade(0, 1, true);"
    *
    *   The first argument is the number of the fade object this command is
    * targetting.  In this case, it's been pointed at fader[0].
    *
    *   The second is the message this command refers to.  This one has
    * been associated with message[1] of fader[0].
    *
    *   Lastly, the final argument indicates the direction of the fade.
    * true = fade in, false = fade out.
    *
    *   Examine the working example script to see how these events were
    * placed on the <td> elements below.
    *
    *
    * III) Tips
    *   - If you give your fade object a default message, it won't appear
    * until after the first mouseover event is triggered.  To rectify this
    * you can add an onload event to the <body> tag which triggers the
    * default message: <body onload="fade(0, 0, true);"> where the first
    * argument is, of course, the number of the desired fade object.
    *
    *   - All the text in each message[] variable MUST be on one line in
    * the code.  That means this:
    *
    *   fader[0].message[1] = "Fader zero,
    * message one";
    *
    * ... is not allowed!  The text should wrap automatically when it's
    * displayed on your HTML page, but you can force line breaks with the
    * <br> tag.
    *
    *   - If you're placing the fading text on a background, make the
    * starting colour an average sample of the background instead of just
    * black or white.  This will enhance the "disappearing" effect.
    *
    *   - The script can only fade text, but can accept non-graphical HTML
    * tags like <p>, <table> (no borders), <strong> and <em>.  Use these
    * tags to add structure and simple text-effects to your fades.
    *
    * *********************************************************************
    * That's it!  Isn't that amazing!?! :)
    *
    * If you have any problems with this script, don't hesitate to email me
    * at javascript@greywyvern.com and I'll be happy to answer your matter-
    * of-life-and-death questions!  Cheers!
    * ****************************************************************** */

    /* ***** Begin: GreyWyvern's Buffered Text-fade Effect - v2.1 ****** */
    var fader = new Array(), fadeQ = new Array();
    var RGB = new Array(256), k = 0, hex = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
    for (var i = 0; i < 16; i++) for (var j = 0; j < 16; j++) RGB[k++] = hex[i] + hex[j];

    function fadeObj(number, id, colOff, colOn, spdIn, spdOut, def) {
      this.number = number;
      this.id = id;
      this.colOff = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
      this.colOn = [parseInt(colOn.substr(0, 2), 16), parseInt(colOn.substr(2, 2), 16), parseInt(colOn.substr(4, 2), 16)];
      this.colNow = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
      this.spdIn = spdIn;
      this.spdOut = spdOut;
      this.def = def;
      this.direction = false;
      this.active = false;
      this.message = new Array();
      this.messageNow = 0;
    }

    function fadeCmd(number, message, direction) {
      this.number = number;
      this.message = message;
      this.direction = direction;
    }

    function fade(number, message, direction) {
      if (fader[number].def && fader[number].messageNow == 0 && fader[number].direction) {
        fadeQ[fadeQ.length] = new fadeCmd(number, 0, false);
        fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
        message = 0;
        direction = false;
      } else fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
      setTimeout("fadeBegin(" + number + ");", 20);
    }

    function fadeBegin(number) {
      for (var x = 0; x < fadeQ.length; x++) {
        for (var y = x + 1; y < fadeQ.length; y++) {
          if (fadeQ[x].number == fadeQ[y].number && fadeQ[x].message == fadeQ[y].message && fadeQ[x].direction != fadeQ[y].direction) {
            fadeQ.splice(x, 1);
            fadeQ.splice(y - 1, 1);
          }
        }
      }
      if (!fader[number].active) {
        for (var x = 0; x < fadeQ.length; x++) {
          if (fadeQ[x].number == number && fadeQ[x].direction != fader[number].direction) {
            var del = fadeQ.splice(x, 1);
            setTimeout("fadeEng(" + number + ", " + del[0].message + ", " + del[0].direction + ");", 0);
            break;
          }
        }
      }
    }

    function fadeEng(number, message, direction) {
      if (!fader[number].active) {
        fader[number].active = true;
        fader[number].direction = direction;
        fader[number].messageNow = message;
        document.getElementById(fader[number].id).innerHTML = fader[number].message[message];
      }
      var iniCol = (direction) ? fader[number].colOff : fader[number].colOn;
      var endCol = (direction) ? fader[number].colOn : fader[number].colOff;
      var incCol = fader[number].colNow;
      var spd = (direction) ? fader[number].spdIn : fader[number].spdOut;
      for (var x = 0; x < 3; x++) {
        var incr = (endCol[x] - iniCol[x]) / spd;
        incCol[x] = (incr < 0) ? Math.max(incCol[x] + incr, endCol[x]) : Math.min(incCol[x] + incr, endCol[x]);
      }
      document.getElementById(fader[number].id).style.color = "#" + RGB[parseInt(incCol[0])] + RGB[parseInt(incCol[1])] + RGB[parseInt(incCol[2])];
      if (incCol[0] == endCol[0] && incCol[1] == endCol[1] && incCol[2] == endCol[2]) {
        fader[number].active = false;
        for (var x = 0; x < fadeQ.length; x++) {
          if (fadeQ[x].number == number) {
            var del = fadeQ.splice(x, 1);
            setTimeout("fadeEng(" + number + ", " + del[0].message + ", " + del[0].direction + ");", 0);
            return false;
          }
        }
        if (!direction) {
          if (fader[number].def) {
            setTimeout("fadeEng(" + number + ", 0, true);", 0);
          } else document.getElementById(fader[number].id).innerHTML = "&nbsp;";
        }
      } else setTimeout("fadeEng(" + number + ", " + message + ", " + direction + ");", 0);
    }
    /* ***** End: GreyWyvern's Buffered Text-fade Effect - v2.1 ******** */


    /* ***** User defined fade objects and messages ******************** */
    var Quotes=new Array();
    Quotes[0]="test1"
    Quotes[1]="sadfasfda"
    Quotes[2]=" sadf dsf"
    Quotes[3]="adsfa sfdasfd"


    var fader=new Array();
    fader[0] = new fadeObj(0, 'fade0', 'dddddd', '000000', 40, 40, true);
    for(var i=0;i<Quotes.length;i++)
          fader[0].message[i]=Quotes[i];

    var olditem=-1;

    function fadeRandom(){
          if(olditem>-1)
                fade(0,olditem,false);
          var newitem=-1;
          while(newitem<0 || newitem==olditem)
                var newitem=parseInt(fader[0].message.length*Math.random());
          fade(0,newitem,true);
          olditem=newitem;
    }

    var fadeInterval=window.setInterval('fadeRandom();',5000);


      </script>
      <style type="text/css">

    body {
      background-color:#ffffff;
      text-align:center;
    }

    table {
      margin:20px auto;
      text-align:left;
      border:3px outset #ccffdd;
      background:transparent url(http://www.greywyvern.com/code/js/stream.jpg) no-repeat scroll center center;
      font-size:90%;
    }
    table tr td {
      width:81px;
      height:46px;
      border:2px outset #ccffdd;
      text-align:center;
      cursor:pointer;
    }

    #fade0 {
      width:130px;
      height:190px;
      text-align:left;
      padding:5px 20px 5px 10px;
      border:0px none transparent;
    }
    #fade1 {
      width:130px;
      height:190px;
      text-align:right;
      padding:5px 10px 5px 20px;
      border:0px none transparent;
    }
    .footer {
      text-align:left;
      margin:0px;
    }

      </style>
    </head>
    <body onload="fade(0, 0, true);">

    <div id="fade0"></div>

    </body>
    </html>
    ----------------------------------------------------------------------
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
    I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    884 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now