JAnalyzer

Jamie Johnson
Author of Velocity: The Basics: Scripting with a $ here and a # to do, Senior Web Developer and former Computing Support Analyst and Licensed Professional Counselor

May 28, 2015

You saw the alert when you launched this page. If you proceeded, you saw the output. What was that? It was my JAnalyzer tool. When developing a responsive website (i.e. RWD - Responsive Web Design), it is helpful to know what the width the various elements are in your page in order to refine CSS so that style rules prevent overflow, especially at lower resolutions. JAnalyzer is the tool I wrote to accomplish that task.

Want to use it? You can simply put this code in your page:

<!-- START JAnalyzer by @JamesArthurJohn/johns2ja -->
<style type="text/css">
#JAnalyzer{ background: #cc9; position: relative; z-index: 999; }
#JAnalyzer td { padding: 5px; border: 1px solid black; }
</style>
<table border="3" cellpadding="3" cellspacing="3" id="JAnalyzer">
<tr>
<th>Element<br/>Analyzed</th>
<th>Ancestry</th>
<th>Width<br/>(in pixels)</th>
</tr>
<tbody id="log">
</tbody>
</table>
<script type="text/javascript" src="http://tech.beacondeacon.com/JAnalyzer.js"></script>
<!-- END JAnalyzer by @JamesArthurJohn/johns2ja -->

NOTE: This tool assumes you have jQuery running on your page. If not, get it here. If you resize your window, you will want to rerun the tool.

Try it out!

Element Analyzed	Ancestry	Width (in pixels)