Most webdesigners/developers know what Lorem Ipsum is. For those who don't, it's simply dummy text of the printing and typesetting industry. Although I hardly use it myself (others think it's killing your designs), I still think the idea behind it is pretty good. Chris Coyier took this idea to a whole new level and created HTML-Ipsum. You can copy HTML elements to your own project to see if you've styled all the elements in a proper way.

There is just one thing which bugged me for a long time about Lorem Ipsum. When you copied all the text (or HTML), style it etc., you'll need to remove everything afterwards. When you created loads of different pages, it might take a while to find all your Ipsum traces. Because of that, I created jHTML-Ipsum: a jQuery HTML Ipsum plugin.

Simply set your selector and let jHTML-Ipsum do his work. It dynamically creates all the HTML elements so you can see if all your CSS works in a proper way. Using various parameters, you can set how the plugin behaves and see which elements it should create.

  

When you fully designed your website, you simply delete the plugin and you don't need to delete or change the individual pages. Read below how you can install the plugin and which options you can set.

Install / use

First, you'll need to include jQuery (works with v1.4+) and the plugin in the head section of your HTML.

 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jhtmlipsum.js"></script>

In this case, the jQuery plugin is placed inside the js folder. Make sure you change this if it's not in that folder.

You're now ready to use the plugin! Use the default jQuery syntax to enable the plugin on a specified element.

 
$(document).ready(function(){
   $("#selector").jhtmlipsum();
});

Using this syntax, the #selector will get a couple of HTML element injected using jQuery. It's as simple as that! Read the following section to see how you can use more options to create more elements.

Options

On the demo page, you can see how the code should be implemented on your site. You can define the elements parameter to set which kind of elements you want. Here you can define an array of strings on which elements should be created.

For example, you can create a long paragraph using the following syntax:

 
$("#selector").jhtmlipsum({
   elements : ["p"]
});

When you want to add a definition list, simply add it to the array:

 
$("#selector").jhtmlipsum({
   elements : ["p", "dl"]
});

You can even use elements multple times. Take note, the order of the array is of importance on how the elements will be created.

 
$("#selector").jhtmlipsum({
   elements : ["p", "table", "p", "p"]
});

The code above will create a long paragraph, a (filled) table and another two long paragraphs.

Here is the list of elements that you can use/create:

• "all" - (Default) All basic elements (h1, a, em etc.), Kitchen Sink on HTML-Ipsum
• "p" - Long paragraph
• "p_med" - Medium paragraph
• "p_single" - One sentence
• "dl" - Definition list
• "form" - Example form
• "table" - Filled table
• "nav" - Standard list navigation

Conclusion and Download

Take note this plugin has been created with a developer perspective, meaning that I didn't look at any form of performance increasement at all. It uses jQuery's 1.4+ $("<element />") way to create the elements. It's easier to use, but slower than document.createElement. Other than that, I think it's a pretty neat plugin that you can use in your next webdesign project.

  

What do you think of this plugin? Would you use it? If not, why? And do you see any room for improvement? Feel free to share!

Interested in this topic? You might enjoy another article I've written called

• jQuery Mobile First Look: Book review and Giveaway
• jQuery quickie: Unlimited Scroll using the Twitter API
• Nostalgia: Dragging the Windows XP error dialog
• jQuery 1.3 and PHP: Book review and Giveaway
• CSS3 animations and their jQuery equivalents

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: