Random Content Generator - A jQuery Plugin Featuring Chuck Norris -- 3nhanced.com

Random Content Generator - A jQuery Plugin Featuring Chuck Norris

tagged JavaScript by Jon

Placeholder Text, such as Lorem Ipsum, is something every web designer or developer uses. And for good reason. It’s not meant to confuse clients and provoke comments such as, “what is this funky writing? I can’t read Spanish”. But, to fill in content areas for web design in a way that simulates real written text.

The Problem with Filler Text

I don’t know if ‘problem’ is the right word, maybe ‘annoyance’. Yes, it can be very annoying to look up a random content generator and endlessly copy and paste.

Using Lorem Ipsum, or Greeking, has also been criticized for just being a visual placeholder rather than valuable information. Also, it doesn’t accurately depict the ‘real thing’ and can confuse clients who don’t understand the concept. You can read more about this and join the Just say no to Lorem Ipsum bandwagon here at 37 Signals.

You should also read Mark Boulton’s response to 37 Signal’s article that he assertively titled Design tip: Just say YES to Lorem Ipsum.

So, anyways. . .

Whether you like it or not, I believe filler text is here to stay. To support its survival and remedy some annoyances that I mentioned above, I have created a random content generator using jQuery and, for the sake of entertainment, featuring Chuck Norris (well, actually just facts about him).

This jQuery plugin looks for a designated class name and inserts a random chuck of text from a XML file. You can view the demo page and download the plugin here. If Chuck Norris facts don’t fit your need (I can’t imagine why not), then you can take a minute to customize the XML file. You can even create different categories such as Long Text and Short Text, or Scary Text and Happy Text in the XML and assign the different kinds of content to different classes.

The benefit of this is not having to copy and paste, then remember all the places it needs to be removed after the fact. How many times has Lorem Ipsum slipped into a finished product? If you search the tubes you can find pics of printed material, or ads and even websites that have gone live with filler text still in place. With this plugin, all you have to do is remove it and all filler text is gone. The other purpose I had in mind is to use the randomness part to stress test layouts. Every time you refresh the page, the plugin will randomly insert new text into the placeholders and stretch the layout in all sorts of random ways. This is a good way to find breaking points and such.

I plan to continue developing this. There is a lot more that can be done with it. For example, I would like to integrate the Metadata plugin. If you have any suggestions let me know.

In case you skipped the article and jumped straight to the bottom, here is the link to the demo page where you can also download it.

Leave your mark...

If you liked this article please leave a comment and share it.

Add a comment Digg Stumble Upon Reddit

Alfredo
November 16th, 2008

Stress testing is a huge step to preventing layout issues. I’ve seen several instances where a front-end developer hands off a site to a programmer without testing for large or small amounts of copy. This usually causes problems and ends up waisting time for both programmer and slicer. Front-end developers can really benefit from a tool like this. I will probably stick with random lorem ipsum, just cause I’m oldskool. Thanks for the article.

Jennifer
May 3rd, 2009

Aside from the benefits of stress testing and easy removal, I would use it simply because I love Chuck Norris!

Dan
May 22nd, 2009

This is plugin works great and easy to setup. The only think I’m having a problem with is creating muptiple styles for the copy within the XML file. I can easily put a style for the whole Node, but I want the text within the node to have multiple styles.

Any Ideas?

Alan
June 9th, 2009

Dan,

I think what you want to do is something like this:


		<h2>header</h2>

<p>First one in the XML.</p>

Hopefully this will display properly. What you want to do is use ASCII for all the elements inside the nodes on the opening and closing brackets. so for a h2 you would write & l t ; (no spaces) h2 & g t ;

then in the CSS you can style as normal.

Jon,

Thanks for this. I have done this with PHP before but needed a jQuery solution and this kept me from writing it myself.

-alan

Joe
July 14th, 2009

Great plugin very easy to use. I am looking to also add in stored links in the XML file, how would I pass them to the HTML file along with the text.

Pia
August 1st, 2009

Just speaking of Lorem Ipsum… Ever tried the neat little trick in MS Word 2007? Type ‘=lorem(3,3)’ (not the quote marks) in a new document and press Enter. Comes in handy at some times actually.

Jon
August 12th, 2009

@pia

That’s freaking awesome! You made my day with that little tid bit. Thanks.

Eddy
September 4th, 2009

This script is awesome.. Only thing is, it doesn’t work in Internet Explorer 6+. Anyone else have this problem?

Dave
October 1st, 2009

Is there a way to modify this script to bring in text in order and not randomly? I have used this script previously and it is great but now I am getting a request on reload to bring in text snippets sequentially. If not, would you know of a way to do that?

Thanks!
Dave

KY Payday Loans
November 2nd, 2009

Lorem Ipsum? You may laugh, but computer-nerd son thinks it’s the best invention of mankind since the wheel.

99sousuo
November 8th, 2009

???

Shaun
December 3rd, 2009

This works great.

I’m using it to pull quotes onto multiple pages, but when there’s more than one being displayed I get a lot of duplicates.

Any ideas how to not?

Jon
December 11th, 2009

@Shaun

Adding more quotes would decrease the possibility of duplicates. I would have to play around with the code a little bit, but it shouldn’t be too hard to add logic that would check for duplicates. This is a good feature request.

gatopardos
January 7th, 2010

Hey smartchuck I thought than before you published any script you had to debug them first!!!

You have done a lot of mistakes in this script like $.fn should be jquery.fn e.t.c. please fix these mistakes before you release it again.

gatopardos
January 7th, 2010

I forgot to mention it doesn’t work in IE6 BUT THIS ONE WORKS !!

http://groupsinteractive.com/dev-blog/random-quotes-in-jquery/comment-page-1/#comment-150

Chris
January 14th, 2010

I am playing with this to pull random quotes from a dictionary (XML). The XML is broken into term, then then description. I want to display both but I’m not programmer. Has to be easy and I think it happens right here in the nodeName (in this case I need 2 nodes… “term” and “definition”):

$(’.chuck’).randomContent({xmlPath: “nolo_dictionary-111909.xml”, nodeName: “term”});

I’ve tried lots of combinations and google searches and it’s come to me asking you all to save me from my hours of trying to figure out the correct syntax can be solved by you real programmers typing me a hint in a few seconds! Thanks in advance.

PS. Chuck rules.

Josh
March 17th, 2010

Great script! One problem. It works perfectly on my local machine, but when I upload it with the exact same dir structure, it doesn’t work. Any ideas why that might be happening? Thanks.

Guy Hoogewerf
May 14th, 2010

Love this - just what I wanted. BUT please can you offer any help on preventing duplicates. I have 9 content areas and would like to show up to 4 at a time… the rate of duplication is too high at the moment.

Any help would be appreciated.

Paul
November 7th, 2010

Hi… Great plugin but I’m having an issue with large numbers of quotes. I have the plugin running as an iPhone app (via phonegap) and everytime I have more than 56 lines of code in the XML file nothing gets displayed.

Any help would be greatly received.

Paul