Here is a little script I wrote for testing layouts. It injects random lorem ipsum texts, lists and headings into a documents content area. To start using it include the script at the bottom of your HTML page and give your content container an the id stretchme. An absolutely positioned div with links to inject different kinds of content will appear in the top left corner of your page.
I use this a lot for design heavy HTML email templates that are going to be populated by clients or other developers to make sure the layout can accommodate different content lengths. Check out the demo.
/*global document */
var stretch = {
blocks: 1,
text: [
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et massa sed purus suscipit volutpat. Vivamus a lectus vitae mi adipiscing accumsan. Nam auctor dolor. Morbi semper arcu commodo dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pede magna, feugiat id, sagittis quis, congue et, nibh. Fusce ac quam pharetra ante condimentum hendrerit. Donec sollicitudin iaculis ante. Cras accumsan ipsum quis nisi. Sed ornare risus a orci.",
"Quisque pellentesque quam luctus justo. Mauris at purus eu mauris aliquam luctus. Morbi fermentum, lacus at iaculis consequat, erat magna malesuada quam, eget pharetra velit lacus quis arcu. Quisque quis est eu risus congue condimentum. Fusce fermentum semper massa. Donec blandit. Quisque condimentum. Phasellus orci justo, ornare nec, pretium sit amet, convallis sed, quam. Integer ornare ullamcorper tellus. Suspendisse ante mauris, mattis vel, ultricies semper, sagittis nec, felis. Phasellus pellentesque, nisl sed lobortis semper, velit lorem sollicitudin dui, in imperdiet justo nunc sit amet enim. Vivamus nec sem ut diam pulvinar pellentesque. Duis malesuada sapien ut libero. Sed sit amet lorem vitae purus iaculis vestibulum. Fusce interdum leo eu ipsum. Vivamus varius sollicitudin nisl. Nullam a tortor. Suspendisse risus pede, lobortis id, adipiscing ut, lacinia id, turpis. Sed iaculis hendrerit urna. Donec in massa.",
"Nam mattis, nulla in volutpat semper, quam orci convallis tellus, in interdum ipsum eros eu enim. Vestibulum velit erat, ultrices vel, dapibus sed, tempor sit amet, ligula. Fusce nec mauris. Aenean blandit purus at velit. Maecenas ac tellus. Cras vulputate purus ac augue placerat accumsan. Praesent porttitor, lorem at viverra volutpat, mi nisl suscipit nibh, nec venenatis mauris velit ut mi. Nunc odio libero, scelerisque eu, ultrices eget, rhoncus et, elit. Aenean erat tortor, interdum eu, fermentum ut, pharetra sit amet, neque. Fusce sagittis enim sed tellus. Aliquam dolor. Nullam accumsan. Ut lectus libero, pharetra nec, mattis quis, eleifend vehicula, nunc. Praesent velit nisl, pharetra ut, iaculis non, aliquet eget, enim. Fusce et nisl. Ut viverra sollicitudin urna. Nullam eros lacus, pharetra et, varius ut, vehicula id, nulla. Donec sit amet tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
"Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non leo aliquet felis eleifend porttitor. Proin ut metus non mi feugiat pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer malesuada mauris. Sed in lorem. Fusce non turpis. Ut tincidunt. Curabitur sit amet erat id risus ornare faucibus. Fusce consectetuer hendrerit eros. Vestibulum convallis libero ac turpis. Aliquam rhoncus pretium purus. Pellentesque molestie augue a lacus. Nam auctor libero eu eros. Suspendisse potenti. Duis ut tellus vehicula mauris blandit placerat. Nam rhoncus, dui in dictum molestie, urna dolor consequat ipsum, at semper lacus ligula tincidunt lacus. In orci lectus, ultrices in, tristique quis, adipiscing at, urna.",
"Morbi sapien sapien, vulputate eu, malesuada posuere, euismod ac, lorem. Aenean varius, risus ac fringilla commodo, felis mauris imperdiet est, ac auctor est leo in lacus. Proin viverra, quam ut vehicula viverra, diam elit viverra mauris, eu dignissim neque ipsum eleifend est. Duis non nisl sit amet mauris adipiscing placerat. Aenean tellus magna, rutrum a, pretium a, imperdiet a, purus. In ipsum. Aenean nisi diam, ultrices tempor, molestie ut, suscipit at, dolor. Ut metus eros, suscipit vel, pellentesque nec, imperdiet sit amet, sapien. Praesent porttitor aliquet erat. Nam venenatis nunc a orci. Morbi vel lectus et nibh pretium luctus. Etiam ultrices mollis urna. Praesent quis mi id lectus mattis aliquam.",
"Duis quis augue ac lectus dictum faucibus. Aliquam lacinia aliquet nunc. In hac habitasse platea dictumst. Phasellus vel ante a lorem dignissim posuere. Morbi mollis nunc auctor augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Cras quam augue, dictum vitae, scelerisque eget, hendrerit in, quam. Sed faucibus nunc in sapien. Ut ipsum ante, lacinia a, vestibulum ut, dignissim a, tortor. Ut in magna. Proin ante. Nulla facilisi. Nulla volutpat porta odio. Donec mollis porttitor nisi. Nam imperdiet luctus magna. Praesent est leo, fermentum dapibus, ullamcorper ut, volutpat at, risus. Integer porttitor euismod turpis. Nam sit amet magna eget tellus rutrum condimentum. Suspendisse tristique auctor leo.",
"Sed sed lectus ac risus vehicula ullamcorper. Suspendisse potenti. Donec adipiscing iaculis turpis. Curabitur dictum auctor elit. Maecenas in nisl at mi sagittis dignissim. Duis et odio. Morbi ornare dolor a quam. Mauris in justo. Vivamus a augue. Ut hendrerit urna quis urna. Duis eros augue, tempus non, consequat eu, ullamcorper quis, purus. Aliquam erat volutpat. Sed ultrices vulputate diam.",
"Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc semper, turpis ac tristique commodo, nibh velit ullamcorper sem, at lacinia mi odio vitae orci. Nam posuere. Vivamus arcu quam, viverra quis, tempus ac, vestibulum quis, mauris. Suspendisse ullamcorper convallis justo. Nullam cursus, lectus in fringilla laoreet, pede nulla gravida lorem, id mollis leo tellus quis tellus. Phasellus pulvinar, dui vitae volutpat ultricies, felis justo pellentesque augue, vitae pretium lorem turpis vitae sapien. Morbi vel pede. Integer non leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sapien libero, ornare ac, venenatis sit amet, commodo in, nunc. Curabitur pretium diam quis nisl. Pellentesque vehicula augue et arcu. Proin est eros, euismod vel, mattis quis, condimentum in, tellus. Nulla a felis sit amet ipsum malesuada vehicula. Vestibulum sit amet massa in magna facilisis gravida. Quisque vel nisi malesuada dolor facilisis bibendum. Ut lobortis porta lorem. Sed ultrices mattis neque.",
"Mauris vehicula libero non diam. Proin quis eros et purus consequat commodo. Vivamus a sapien. Phasellus sagittis metus vel purus. Nunc congue sem in pede. Suspendisse potenti. Maecenas aliquet, erat et vulputate adipiscing, metus leo luctus risus, ut feugiat dui mi nec magna. Nunc tristique eros non leo. Duis nibh. Curabitur nibh orci, imperdiet nec, aliquam quis, interdum quis, est. Aliquam lorem ligula, vestibulum a, lobortis ac, accumsan at, lectus. Fusce sed lorem in turpis scelerisque dapibus. Nullam dictum est posuere arcu vestibulum egestas.",
"Maecenas ut lacus. Donec ultricies odio at dolor. Donec neque. Donec vel magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam sodales metus non purus. Nulla egestas aliquet pede. Ut massa elit, lacinia vel, luctus eget, blandit in, tortor. Etiam varius. Fusce lacinia tristique nunc. Nullam eget turpis vel urna adipiscing egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ligula nulla, placerat sed, porttitor sollicitudin, vulputate sit amet, tortor. Nullam sodales interdum augue. Nam lacinia augue nec quam."
],
unorderedlist: [
"<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Nulla tincidunt auctor massa.</li><li>Nunc egestas rhoncus pede.</li><li>Nam varius pellentesque ligula.</li><li>Praesent sit amet nisl sed arcu convallis consectetuer.</li><li>Maecenas lobortis gravida odio.</li><li>Morbi auctor vehicula nisl.</li></ul>",
"<ul><li>Nam consequat justo sed elit.</li><li>Sed ultrices porta pede.</li><li>Etiam congue sagittis libero.</li><li>Nam vel nisl sit amet lorem varius ultrices.</li><li>Donec adipiscing tincidunt odio.</li></ul>",
"<ul><li>Sed ornare tempor nisi.</li><li>Proin porttitor justo ut elit.</li><li>Praesent auctor risus condimentum nisl.</li><li>Vestibulum rhoncus diam a arcu.</li><li>Quisque semper laoreet nibh.</li><li>Phasellus at magna at nunc interdum euismod.</li><li>Vivamus elementum sapien vel felis.</li><li>Vivamus sodales enim ac nulla.</li></ul>",
"<ul><li>Duis scelerisque vehicula mi.</li><li>Cras cursus dui eu justo.</li><li>Curabitur sed elit a velit commodo blandit.</li><li>Morbi varius elit id neque.</li><li>Sed ut velit adipiscing augue rutrum pulvinar.</li><li>Maecenas blandit egestas nulla.</li><li>Aenean sit amet lacus vel risus rhoncus scelerisque.</li></ul>",
"<ul><li>In ut purus quis leo mattis vestibulum.</li><li>Cras a lorem a risus euismod eleifend.</li><li>Aenean aliquet leo sed ipsum.</li><li>Fusce posuere porttitor leo.</li><li>Integer ornare tellus eu erat.</li><li>Cras elementum risus scelerisque velit.</li></ul>",
"<ul><li>Duis adipiscing mauris a justo.</li><li>In lacinia sodales orci.</li><li>Nullam molestie lectus id nisi.</li><li>Morbi vulputate turpis at risus adipiscing mattis.</li><li>Duis posuere eros vitae nunc.</li><li>Nullam at lorem ut purus tincidunt viverra.</li><li>Morbi vestibulum tellus ut dolor.</li></ul>",
"<ul><li>Aliquam gravida sollicitudin ligula.</li><li>Curabitur elementum ornare turpis.</li><li>Donec a dolor nec mauris ornare tempor.</li><li>Curabitur auctor est eget dolor.</li><li>Nulla convallis lacus nec augue.</li><li>Aliquam ultrices ligula id ligula.</li></ul>",
"<ul><li>Vivamus feugiat dui sed tellus.</li><li>Donec nec lacus non sapien ullamcorper faucibus.</li><li>Nunc laoreet lacinia purus.</li></ul>",
"<ul><li>Sed eget lorem nec risus accumsan sagittis.</li><li>Duis viverra venenatis quam.</li><li>Duis ultricies pretium elit.</li><li>Nulla volutpat volutpat elit.</li></ul>",
"<ul><li>Morbi ultricies bibendum libero.</li><li>Etiam eget sapien eget ipsum lobortis consequat.</li><li>Ut a sem vel erat varius adipiscing.</li><li>Vivamus vulputate urna eget massa.</li><li>Pellentesque ut dolor sed est porta porttitor.</li><li>Donec bibendum scelerisque arcu.</li><li>Proin sit amet lectus id quam gravida pretium.</li></ul>"
],
orderedlist: [
"<ol><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Nulla tincidunt auctor massa.</li><li>Nunc egestas rhoncus pede.</li><li>Nam varius pellentesque ligula.</li><li>Praesent sit amet nisl sed arcu convallis consectetuer.</li><li>Maecenas lobortis gravida odio.</li><li>Morbi auctor vehicula nisl.</li></ol>",
"<ol><li>Nam consequat justo sed elit.</li><li>Sed ultrices porta pede.</li><li>Etiam congue sagittis libero.</li><li>Nam vel nisl sit amet lorem varius ultrices.</li><li>Donec adipiscing tincidunt odio.</li></ol>",
"<ol><li>Sed ornare tempor nisi.</li><li>Proin porttitor justo ut elit.</li><li>Praesent auctor risus condimentum nisl.</li><li>Vestibulum rhoncus diam a arcu.</li><li>Quisque semper laoreet nibh.</li><li>Phasellus at magna at nunc interdum euismod.</li><li>Vivamus elementum sapien vel felis.</li><li>Vivamus sodales enim ac nulla.</li></ol>",
"<ol><li>Duis scelerisque vehicula mi.</li><li>Cras cursus dui eu justo.</li><li>Curabitur sed elit a velit commodo blandit.</li><li>Morbi varius elit id neque.</li><li>Sed ut velit adipiscing augue rutrum pulvinar.</li><li>Maecenas blandit egestas nulla.</li><li>Aenean sit amet lacus vel risus rhoncus scelerisque.</li></ol>",
"<ol><li>In ut purus quis leo mattis vestibulum.</li><li>Cras a lorem a risus euismod eleifend.</li><li>Aenean aliquet leo sed ipsum.</li><li>Fusce posuere porttitor leo.</li><li>Integer ornare tellus eu erat.</li><li>Cras elementum risus scelerisque velit.</li></ol>",
"<ol><li>Duis adipiscing mauris a justo.</li><li>In lacinia sodales orci.</li><li>Nullam molestie lectus id nisi.</li><li>Morbi vulputate turpis at risus adipiscing mattis.</li><li>Duis posuere eros vitae nunc.</li><li>Nullam at lorem ut purus tincidunt viverra.</li><li>Morbi vestibulum tellus ut dolor.</li></ol>",
"<ol><li>Aliquam gravida sollicitudin ligula.</li><li>Curabitur elementum ornare turpis.</li><li>Donec a dolor nec mauris ornare tempor.</li><li>Curabitur auctor est eget dolor.</li><li>Nulla convallis lacus nec augue.</li><li>Aliquam ultrices ligula id ligula.</li></ol>",
"<ol><li>Vivamus feugiat dui sed tellus.</li><li>Donec nec lacus non sapien ullamcorper faucibus.</li><li>Nunc laoreet lacinia purus.</li></ol>",
"<ol><li>Sed eget lorem nec risus accumsan sagittis.</li><li>Duis viverra venenatis quam.</li><li>Duis ultricies pretium elit.</li><li>Nulla volutpat volutpat elit.</li></ol>",
"<ol><li>Morbi ultricies bibendum libero.</li><li>Etiam eget sapien eget ipsum lobortis consequat.</li><li>Ut a sem vel erat varius adipiscing.</li><li>Vivamus vulputate urna eget massa.</li><li>Pellentesque ut dolor sed est porta porttitor.</li><li>Donec bibendum scelerisque arcu.</li><li>Proin sit amet lectus id quam gravida pretium.</li></ol>"
],
head: [
"Lorem ipsum dolor",
"Quisque pellentesque",
"Nam mattis",
"Cum sociis natoque",
"Morbi sapien sapien",
"Duis quis",
"Sed sed lectus ac risus vehicula ullamcorper",
"Class aptent taciti sociosqu",
"Mauris vehicula libero non diam",
"Maecenas ut lacus"
],
init: function () {
document.getElementsByTagName("head")[0].innerHTML = document.getElementsByTagName("head")[0].innerHTML +
"<style type='text/css'>" +
"#stretchy { position: fixed; background-color: white; border: 1px solid black; left: 0px; top: 0px; color: black; z-index: 2; padding: 4px; }" +
"#stretchy a { color: black; text-decoration: none; }" +
"#stretchy a:hover {text-decoration: underline;}" +
"</style>";
document.body.innerHTML = document.body.innerHTML + "<div id="stretchy"><a href='#' onclick='return stretch.getHeading();'>Heading</a> | <a href='#' onclick='return stretch.getText();'>Paragraph</a> | <a href='#' onclick='return stretch.getOrderedList();'>Ordered List</a> | <a href='#' onclick='return stretch.getUnorderedList();'>Unordered List</a> | <a href='#' onclick='return stretch.clear();'>Clear</a></div>";
},
clear: function () {
document.getElementById("stretchme").innerHTML = "";
},
randomContent: function (contentArray) {
var i = Math.floor(Math.random() * contentArray.length);
return contentArray[i];
},
getHeading: function () {
document.getElementById("stretchme").innerHTML = document.getElementById("stretchme").innerHTML + "<h" + stretch.blocks + ">" + this.randomContent(stretch.head) + "</h" + stretch.blocks + ">";
stretch.blocks = stretch.blocks + 1;
if (stretch.blocks > 6) {
stretch.blocks = 1;
}
return false;
},
getText: function () {
document.getElementById("stretchme").innerHTML = document.getElementById("stretchme").innerHTML + "<p>" + this.randomContent(stretch.text) + "</p>";
return false;
},
getUnorderedList: function () {
document.getElementById("stretchme").innerHTML = document.getElementById("stretchme").innerHTML + this.randomContent(stretch.unorderedlist);
return false;
},
getOrderedList: function () {
document.getElementById("stretchme").innerHTML = document.getElementById("stretchme").innerHTML + this.randomContent(stretch.orderedlist);
return false;
}
};
stretch.init();
