2

1

I'd like to build a Javascript function that can read tips off of an XML or text document and display them randomly. I may up to two on screen at a time and it would be nice if they displayed different tips. The function would only need to change tips on page load and does not need to support async calls. I'm not exactly sure where to start.

JQuery is fine as well, although I have no experiance in using it and would rather not have to include multiple libraries.

For those that care, this is for a StackExchange site which has some JQuery capabilities baked in.

flag

1 Answer

3

Hey there, I've got a basic system running on StopTheSearch.com in the sidebar just below the twitter feed.

There's a few parts that need updating:

Custom CSS
------------
#quote-box-text div {
display: none;
}

and customize this sidebar code with your own tips/info:

In the Sidebar
<div id="quote-box-text">
<div>In one day, a slow dripping tap would fill a bathtub.</div>
<div>Fossil fuels were formed from the remains of ancient plants and animals</div>
<div>How many times can a piece of paper be recycled?  About 7 times.</div>
</div>

then finally in the footer

<script type="text/javascript" charset="utf-8">
$(function() {
var randomNum = Math.floor(Math.random()*3);
$('div#quote-box-text div:eq(' + randomNum + ')').css("display", "block");
});
</script>

This code certainly isn't perfect but it'll get you up and running quickly. One thing, in the footer you'll see *3... change that number based on how many lines you've got in the sidebar call. Yes, it would be better if this figured itself out itself but hey, I'll leave this as an exercise for our readers :)

link|flag
Thanks. I'll give this a shot. I was hoping to use it to put tips in the high and low banners. Some small changes need to be made but I think its do-able. – OPIEWeb Oct 14 at 13:15
@Stop I've put this out into prod now. The final script is here: static.opieweb.com/js/tips.js. I have it powered off of an array of tips and I have duplicate protection. I put document.write(getTip()) in each banner. – OPIEWeb Oct 23 at 17:51

Your Answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.