ansaurus

Question

Jquery - Load text with fadeIn, change text after 5000 and stand still. Random selection of text.

Answer 1

A:

XML/HTML is simpler somewhat to handle for this scenario. For example, you could stay HTML compliant, and within your string/link metaphor (you can choose any other layout you like, though):

<div>
  <a href="TextLink 1">TextString 1</a>
  <a href="TextLink 2">TextString 2</a>
  <!-- ... -->
</div>

And in your target page:

<div id="textDisplay"></div>

And JavaScript along the lines of:

$(function () {
  // random function is from: http://roshanbh.com.np/2008/09/get-random-number-range-two-numbers-javascript.html
  function randomXToY(minVal,maxVal) {
    var randVal = minVal+(Math.random()*(maxVal-minVal));
    return Math.round(randVal);
  }

  // get the HTML and handle it when ready (i.e. everything
  // happens in the Ajax callback)
  $.get("texts.html", function(html) {
    var $found = $(html).find("a");

    if ($found.length > 0) {
      var a = $found[randomXToY(0,$found.length-1)];
      var t = $(a).text();
      var h = $(a).attr("href");

      $("#textDisplay")
      .hide()
      .text(t)
      .fadeIn('fast')
      .delay(3000)
      .fadeOut('fast', function() { $(this).text(h); } )
      .fadeIn('fast');
    }
  });
});

See it working in this jsFiddle (without the Ajax call of course).

Tomalak 2010-09-23 16:53:33

Answer 2

A:

Thank you for your response... you helped me!

Heres my working version with a XML redout:

The HTML CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>XML readout and text animation</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    //This script does the following
    //It shows and hides some XML test. The first output ist normal text, the second output is a weblink.
    //The first text fadesOut after some time and the second text fadesIn and stops. No more fading.
    //On each refresh there is only one random text selected from the XML file.


    // Set values for max and min - how many XML id in file linkData.xml
    var maxVal = 2;
    var maxMin = 0;

    //Read the XML file. Get random var from val max-min. Read only one ID from XML file. Then pass values to function animateOutput
    $.get('linkData.xml', null, function (data, textStatus) {

            var whatID = Math.round((Math.random()*(maxVal-maxMin)));

            var ausgabeText = ( $(data).find('ethLinks [id='+whatID+'] title').text());
            var ausgabeLink = ( $(data).find('ethLinks [id='+whatID+'] titleLink').text());
            var ausgabeURL = ( $(data).find('ethLinks [id='+whatID+'] url').text());

            animateOutput(ausgabeText,ausgabeLink,ausgabeURL);
    }, 'xml');

    //Gets values from XML readout and animates text.
    function animateOutput(ausgabeText,ausgabeLink,ausgabeURL) {

    $("#textDisplay")
          .hide()
          .text(ausgabeText)
          .fadeIn('fast')
          .delay(3000)
          .fadeOut('fast', function() { $(this).html('<a href="'+ ausgabeURL + '"target="_self" title="Sehen Sie die Arbeiten für: ' + ausgabeLink + '">' + ausgabeLink + '</a> und E,T&H.'); } )
          .fadeIn('fast');   
    }

</script>
</head>
<body>
    <div id="textDisplay"></div>
</body>
</html>

and the XML file code:

<?xml version="1.0" encoding="iso-8859-1"?>
 <ethLinks>
   <link id="0">
     <title>Am Bodensee sind wir ganz in unserem Element.</title>
     <titleLink>Badhütte Rorschach</titleLink>
     <url>http://www.apple.com&lt;/url&gt;
   </link>

   <link id="1">
     <title>Manchmal möchte man in die Luft gehen.</title>
     <titleLink>Ballonclub Alpenrheintal</titleLink>
     <url>http://www.orf.at&lt;/url&gt;
   </link>

   <link id="2">
     <title>Auf öde Konferenzäume pfeifen wir.</title>
     <titleLink>CONDFERENCE ARENA</titleLink>
     <url>http://www.dell.com&lt;/url&gt;
   </link>
 </ethLinks>

Great help

chris 2010-09-24 08:54:50

If I helped you it would be nice if you accepted my answer. ;-) Code looks good, the hard-coded ID limit somewhat startles me. How about *counting* the nodes instead? Also, it's generally better to avoid building DOM nodes by string concatenation. Use something like this instead: `$('<a target="_self" />').attr("href", ausgabeURL).attr("title", "Sehen Sie die Arbeiten für: " + ausgabeLink).text(ausgabeLink)` to avoid broken HTML if, for example, `ausgabeLink` contains reserved characters like `<`.

Tomalak 2010-09-24 09:17:38

Answer 3

A:

Hi Tomalak, I am not a regular user - is this the reason I cant accept your answer???

chriskapeller 2010-09-25 13:21:30

ansaurus

tags:

views:

answers:

Jquery - Load text with fadeIn, change text after 5000 and stand still. Random selection of text.

related questions