A Simple Way to Style and Test Your Web Pages

Posted on

I was working on a project today and I thought it would make it easier if I had a nice way of automatically populating some sections of the page with content. It’s also part of my normal workflow to style every single HTML element so I regularly rely on an HTML element sampler—basically a page of HTML elements that you can use to make sure everything looks right. This gets fairly to do with every project so I hit the web and monkeyed around with some Javascript a bit and came up with this nice little solution.

First off you’ll need to download the prototype.js library. This is used to make adding text to the page a tad easier. It may be overkill but hey, this was supposed to be a quick script so I used whatever would speed things up.

Now download the filler.js file. This is an adaptation of a script I found on the Web Graphics site and the YUI Fonts test page. It is essentially a Lorem Ipsum generator plus an HTML element sampler. It’s also really the heart of this whole thing.<p>

<p>Now put both of those files into the same directory as your HTML file that you want to test, then put this code in the head of your HTML file.

&lt;span class="syn_MarkupElement"&gt;&lt;script&lt;/span&gt; &lt;span class="syn_MarkupAttribute"&gt;src&lt;/span&gt;&lt;span class="syn_Symbol"&gt;=&lt;/span&gt;&lt;span class="syn_String"&gt;"prototype.js"&lt;/span&gt; &lt;span class="syn_MarkupAttribute"&gt;type&lt;/span&gt;&lt;span class="syn_Symbol"&gt;=&lt;/span&gt;&lt;span class="syn_String"&gt;"text/javascript"&lt;/span&gt;&lt;span class="syn_MarkupElement"&gt;&gt;&lt;/script&gt;&lt;/span&gt;
&lt;span class="syn_MarkupElement"&gt;&lt;script&lt;/span&gt; &lt;span class="syn_MarkupAttribute"&gt;src&lt;/span&gt;&lt;span class="syn_Symbol"&gt;=&lt;/span&gt;&lt;span class="syn_String"&gt;"filler.js"&lt;/span&gt; &lt;span class="syn_MarkupAttribute"&gt;type&lt;/span&gt;&lt;span class="syn_Symbol"&gt;=&lt;/span&gt;&lt;span class="syn_String"&gt;"text/javascript"&lt;/span&gt;&lt;span class="syn_MarkupElement"&gt;&gt;&lt;/script&gt;&lt;/span&gt;
&lt;span class="syn_MarkupElement"&gt;&lt;script&lt;/span&gt; &lt;span class="syn_MarkupAttribute"&gt;type&lt;/span&gt;&lt;span class="syn_Symbol"&gt;=&lt;/span&gt;&lt;span class="syn_String"&gt;"text/javascript"&lt;/span&gt;&lt;span class="syn_MarkupElement"&gt;&gt;&lt;/span&gt;

  &lt;span class="syn_Comment"&gt;/* This will be used to fill CLASSES with some short, random content
     Change this to the classes you want to test */&lt;/span&gt; 
  ss &lt;span class="syn_Symbol"&gt;=&lt;/span&gt; &lt;span class="syn_Keyword"&gt;new&lt;/span&gt; Array&lt;span class="syn_Symbol"&gt;(&lt;/span&gt;&lt;span class="syn_String"&gt;"main_content"&lt;/span&gt;&lt;span class="syn_Symbol"&gt;,&lt;/span&gt; &lt;span class="syn_String"&gt;"specials_content"&lt;/span&gt;&lt;span class="syn_Symbol"&gt;,&lt;/span&gt; &lt;span class="syn_String"&gt;"coupons_content"&lt;/span&gt;&lt;span class="syn_Symbol"&gt;);&lt;/span&gt;

  Event&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;observe&lt;span class="syn_Symbol"&gt;(&lt;/span&gt;window&lt;span class="syn_Symbol"&gt;,&lt;/span&gt; &lt;span class="syn_String"&gt;'load'&lt;/span&gt;&lt;span class="syn_Symbol"&gt;,&lt;/span&gt; &lt;span class="syn_Keyword"&gt;function&lt;/span&gt;&lt;span class="syn_Symbol"&gt;()&lt;/span&gt; &lt;span class="syn_Symbol"&gt;{&lt;/span&gt;
    &lt;span class="syn_Keyword"&gt;for&lt;/span&gt; &lt;span class="syn_Symbol"&gt;(&lt;/span&gt;i&lt;span class="syn_Symbol"&gt;=&lt;/span&gt;&lt;span class="syn_Number"&gt;0&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt; i&lt;span class="syn_Symbol"&gt;&lt;&lt;/span&gt;ss&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;length&lt;span class="syn_Symbol"&gt;;&lt;/span&gt; i&lt;span class="syn_Symbol"&gt;++)&lt;/span&gt; &lt;span class="syn_Symbol"&gt;{&lt;/span&gt;
      &lt;span class="syn_Comment"&gt;//Fill defined CLASSES
&lt;/span&gt;      &lt;span class="syn_Keyword"&gt;new&lt;/span&gt; Insertion&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;Bottom&lt;span class="syn_Symbol"&gt;(&lt;/span&gt;document&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;getElementsByClassName&lt;span class="syn_Symbol"&gt;(&lt;/span&gt;ss&lt;span class="syn_Symbol"&gt;[&lt;/span&gt;i&lt;span class="syn_Symbol"&gt;])[&lt;/span&gt;&lt;span class="syn_Number"&gt;0&lt;/span&gt;&lt;span class="syn_Symbol"&gt;],&lt;/span&gt;getFiller&lt;span class="syn_Symbol"&gt;());&lt;/span&gt; 
    &lt;span class="syn_Symbol"&gt;}&lt;/span&gt;

    &lt;span class="syn_Comment"&gt;/* Fill the main content section with the element sampler
       this must be an ID, NOT A CLASS */&lt;/span&gt;
    &lt;span class="syn_Keyword"&gt;new&lt;/span&gt; Insertion&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;Bottom&lt;span class="syn_Symbol"&gt;(&lt;/span&gt;$&lt;span class="syn_Symbol"&gt;(&lt;/span&gt;&lt;span class="syn_String"&gt;'content'&lt;/span&gt;&lt;span class="syn_Symbol"&gt;),&lt;/span&gt;getSampText&lt;span class="syn_Symbol"&gt;());&lt;/span&gt;
  &lt;span class="syn_Symbol"&gt;});&lt;/span&gt;

&lt;span class="syn_MarkupElement"&gt;&lt;/script&gt;

Alright, now a little explanation. The ss array should contain a list of classes. So if you’ve got a couple of paragraphs with different classes on them and you want them to be automatically filled with Lorem ipsum gibberish then put the class names here. Right now this script will only fill the first element if there are multiple elements with the same class name. This is a simple and easy fix.

The second part is the the line that starts with the dollar sign. That assigns the element sampler to an element with a specific ID. Change that ID to reflect something in your document.

That’s it. When you load up your page you should see some nice random text on your page and a really long bunch of HTML elements. When you’re done, just delete the code out of the head.

http://bajooter.com/files/filler.js_.txt"