News to display one random line (rather than rotate)

[atalkingfish]

Is it possible to have the news banner display only one piece of text from the selection, but randomly changing each page load. This is similar to a code I had in v4 where there was a box on the top of the page that displayed one of many lines randomly on each page load. I think it would be cool to have the news turned into that, so you could use the buttons to shuffle through them (randomly) without a page reload. And I like the animations on the news ticker anyway. So this would be really a nice plugin if possible.

Thank you

[Peter]

Hey Lynx,

A nice simple plugin for you

Go on, I dare ya

- autoform for news entries
- insert div into the DOM
- select random entry from the autoform (Math.random)
- insert into the div

[Lynx]

Only problem with that, Peter, is that I don't know how to insert a div into the DOM - unless that's what the createElement('div') is for. Either way, I haven't got that far yet in the tutorials.

[Peter]

Lynx ,

var items = ["Hello World", "Whatup People", "'nuff"];
var rand_item = items[Math.floor(Math.random() * items.length)];

// Create the div

var div = document.createElement("div");

// Text only...
// div.appendChild(document.createTextNode(rand_item))

div.innerHTML = rand_item;

// Grab the content wrapper

var content = document.getElementById("content");

// Makes sense to have this at the top right?
// Grab first child

var first_child = content.firstChild;

// Now insert it before that child

content.insertBefore(div, first_child);

Equivalent to that in jQuery...

var items = ["Hello World", "Whatup People", "'nuff"];
var rand_item = items[Math.floor(Math.random() * items.length)];

$("#content").prepend($("<div></div>").html(rand_item));

A lot shorter isn't it?  But doesn't feel like I really done anything compared to the first one.

[atalkingfish]

Is this functional, then?

[Peter]

Nope, my posts were to guide Lynx if he wanted to take on your request.

[atalkingfish]

Oh okay, thank you.

[Lynx]

atalkingfish,

Did you want this to show only on the home page or every page?

[Lynx]

Here. This shows up on every page. It's just an Alpha release, so I haven't submitted it to the library yet.

Random_News.pbp (842 B)


Edit: By the way, Peter - I took you up on your "dare".

[Lynx]

Since it's been about a week since I've posted this, if anyone wants to take this for a test drive, feel free to do so. If you do, keep in mind the following:

(1) Whatever news item is there will stay there until a refresh or another page gets loaded (it doesn't cycle through them otherwise);

(2) The text color is currently hard-coded to black, so be sure to test on a lighter background (text color option will get added after I'm sure it's bug-free);

(3) Items are picked randomly, which does mean that you may get the same one twice or more in a row. This is more prominent with just a few items. However, it is autoformed, so feel free to add as many as you want for testing;

(4) To use a phrase from Chris - since this is an alpha release, "it only has one coat of primer on it". This test is more for testing for bugs than looks. Let's make sure any kinks are worked out before we make it look pretty.

Thanks to anyone who wants to test this.

[Peter]

In response to #1; A great time to learn intervals (setInterval).

I dare ya

Little things like this is slowly helping you fill your toolbox with tools to use in the future. Keep at it.

[Chris]

This is probably not the place for such discussions Lynx and Peter , but I've always favored a self-invoking setTimeout over the use of setInterval since I personally hate going to sites that employ the method and seeing my browser become unresponsive. If the time it takes the task to complete exceeds the time designated between recurring tasks then any task that needs to wait for the previous task to complete gets pushed on the queue, the same queue that also handles browser events, resulting in more tasks to do between servicing events (that "click" will need to wait). The self-invoking setTimeout only adds itself to the queue after the task has been completed thus allowing for more even spacing of event processing.

[Lynx]

Thanks for that, Chris!

I probably won't add that to this version, as the OP had specifically asked for it to be "randomly changing each page load". I may do another version that does have it changing randomly on the same page, but the OP didn't request that so it's not going in this one. They just wanted it to change on page load, which I took as a refresh or page change - which this one (hopefully) does.

[Lynx]

Update: Random_News_101.pbp (971 B)

Text coloration added. Each News Line can now be given its own text color.


To Peter and Chris:

I'm not sure if this is how you guys would have done it, but I wanted to try my hand at a ternary operation. This if statement:


if (msg_news_feed.length) {
           var msg_rand_nf = msg_news_feed[Math.floor(Math.random() * msg_news_feed.length)].news_line;
       }


was turned into this:


if (msg_news_feed.length) {
           var z = Math.floor(Math.random() * msg_news_feed.length);
           var msg_txt_clr = (settings.msg_newsfeed[z].text_color == undefined ? "#000" : settings.msg_newsfeed[z].text_color);
           var msg_rand_nf = msg_news_feed[z].news_line;
       }


I put the Math value into a variable so I could use it to access the text color associated with news line it belongs to. I had also thought that, by using the ternary to set the text color, it would properly accommodate each run to see if there was indeed a text color set for a particular news line. If it was not set, it would be set to black, otherwise it would grab it from the settings.

Sorry - I just got excited when I tested it and it WORKED!

[Lynx]

It would appear as if the OP has lost interest in this, possibly?

Edit: Wondering if I should just submit this to the library. I haven't seen anyone else ask about this, so not sure. Opinions - anyone? Should I submit this to the library or not?