JQLorem

“

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

”

JQLorem is a jQuery plugin for generating random content in HTML documents. The principle use of the plugin is to fill out content areas with realistic-looking content during HTML/CSS template development.

Usage
Configuration
- setChars
- strToUse
- withHTML
- allTags
- useTags
Default settings

Usage

The JQLorem plugin file will need to be referenced in the head of the document after the jQuery plugin.

<script type="text/javascript" src="http://code.jquery.com/jquery-X.X.X.min.js"></script>
<script type="text/javascript" src="jquery.jqlorem.js"></script>

The JQLorem plugin can then be used as per the usual jQuery methodology, by calling "generateLorem()"

$('.anyClass').generateLorem(500).css('text-decoration','underline');

Configuration

The plugin has several configurable options:

setChars

Perhap the most obvious configuarable parameter is the ability to specify the number of characters. If only a number is specified when calling the plugin, then the plugin will insert random words from the default "Lorem ipsum..." string, up to the number of characters specified, as plain text, into the supplied jQuery object. The text will be output as a string of words, with a capital letter at the beginning, a full-stop at the end, and random punctuation (commas and full stops) in between.

Therefore, to generate two paragraphs of 100 characters of "Lorem ipsum..." text, you would use the following code:

<p class="loremP"></p>
<p class="loremP"></p>
<script type="text/javascript">
	$('.loremP').generateLorem(100);
</script>

It should be noted that the setChars parameter is an approximation and that the plugin will output a few characters more or less than the number specified by setChars.

strToUse

JQLorem can use any string specified by the parameter, strToUse, in the options object.

Any strToUse string specified should be in lower case letters, apart from proper nouns, as JQLorem will automatically alter the case of the first word after any full stop in order to emulate 'sentence case'.

Any non-alphanumeric characters are removed (except hyphen), so punctuation etc will only add unnecessary weight to the code.

<p class="maryP"></p>
<script type="text/javascript">
	var maryPSettings = {
		'strToUse': "Mary had a little lamb its fleece was white as snow and everywhere that Mary went the lamb was sure to go",
		'setChars': 100
	};
	$('.maryP').generateLorem(maryPSettings);
</script>

Note that the fewer the number of words in the strToUse string, the more repetition there will be in the output. This is compounded by any repetition in the strToUse string itself. Therefore in the above example, the strToUse string might be better shortened to "Mary had a little lamb its fleece was white as snow and everywhere that went the sure to go" to reduce the repetition, as well as very slightly reducing the weight of the code.

withHTML

This determines whether the output of JQLorem will include any HTML formatting. When set to true, the plugin will generate the specified amount of random text, with random HTML markup and the output will be inserted, as HTML, into the supplied jQuery object.

If setChars is set to less than 400 characters, and withHTML is true, then the plugin will only wrap the generated text in a single set of paragraph tags.

<div class="fillMe1"></div>
<script type="text/javascript">
	var genHTML1Settings = {
		'strToUse': "jQuery is a new kind of fast concise library that simplifies HTML document traversing event handling animating and AJAX interactions for rapid web development designed to change the way that you write JavaStript lightweight footprint about 31KB in size Mimified Gzimped compliant supports CSS3 selectors more cross-browser Internet Exploder FrioFex Safair Opear Chime",
		'setChars': 400, 
		'withHTML': true
	};
	$('.fillMe1').generateLorem(genHTML1Settings);
</script>

However, if setChars is set to more than 1000 characters, and withHTML is true, then the plugin will wrap the generated text in random HTML markup, always starting with an H1 tag, followed with various markup items according to the setting of useTags (see below).

<div class="fillMe2"></div>
<script type="text/javascript">
	var genHTML2Settings = {
		'strToUse': "jQuery is a new kind of fast concise library that simplifies HTML document traversing event handling animating and AJAX interactions for rapid web development designed to change the way that you write JavaStript lightweight footprint about 31KB in size Mimified Gzimped compliant supports CSS3 selectors more cross-browser Internet Exploder FrioFex Safair Opear Chime",
		'setChars': 1000, 
		'withHTML': true
	};
	$('.fillMe2').generateLorem(genHTML2Settings);
</script>

allTags

With the withHTML parameter set to true, the allTags parameter determines whether the plugin overrides the setChars and useTags parameters, to produce content which comprises one of each of the following HTML tags, each separated by a short paragraph.

This is useful when setting the style sheets for a template, as the developer can see all of the most common markup elements on one page.

With allTags set to true, the plugin will generate content of approximately 2850 chars.

<div class="fillMe3"></div>
<script type="text/javascript">
	var genHTML3Settings = {
		'strToUse': "Microsort Sharepint is a browser-based collaboration and an document-management platform which can be used to host web sites that access shared workspaces and documents as well specialised applications like wikis and blogs from browser it targeted collaborative workspace tool for the management and automation of business processes platform social networking",
		'setChars': 400, 
		'withHTML': true,
		'allTags': true,
		'useTags': []
	};
	$('.fillMe3').generateLorem(genHTML3Settings);
</script>

useTags

When withHTML is set to true, the useTags parameter determines which HTML elements to include in the generated content.

The full range of elements available for use within the plugin are: h1; h2; h3; h4; h5; h6; ul; ol; blockquote; a; strong, and; em.

<div class="fillMe4"></div>
<script type="text/javascript">
	var genHTML4Settings = {
		'setChars': 1000, 
		'withHTML': true,
		'useTags': ['h2', 'ul', 'a']
	};
	$('.fillMe4').generateLorem(genHTML4Settings);
</script>

Default settings

The default settings for the plugin are as follows:

strToUse: "lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi"
setChars: 500
withHTML: false
allTags: false
useTags: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'blockquote', 'a', 'strong', 'em']