philnicholas.com » Web Development http://www.philnicholas.com Just another WordPress weblog Wed, 15 Jul 2009 16:06:25 +0000 en hourly 1 http://wordpress.org/?v=3.0 Reloading your JavaScript without reloading your page http://www.philnicholas.com/2009/05/11/reloading-your-javascript-without-reloading-your-page/ http://www.philnicholas.com/2009/05/11/reloading-your-javascript-without-reloading-your-page/#comments Mon, 11 May 2009 08:23:01 +0000 Phil http://www.philnicholas.com/?p=62 Continue reading →]]> Maybe you’re like me and develop your JavaScript with an endless cycle of “edit… save… refresh” to see/test the results. This gets pretty tiring if you’re having to fill in a form or wait for a complicated page to load up each time!  I thought, “Why can’t I just save the JavaScript and use it without having to reload the browser window? Can’t it just replace it in memory… live?”  Yes, it can.  Here’s how to do it.

1. Build the loader function:

Put the following code in the document <head>

<script type="text/javascript">
function LoadMyJs(scriptName) {
var docHeadObj = document.getElementsByTagName("head")[0];
var dynamicScript = document.createElement("script");
dynamicScript.type = "text/javascript";
dynamicScript.src = scriptName;
docHeadObj.appendChild(newScript);
}
</script>

2. Automatically call the loader once the page has loaded

<body onLoad="LoadMyJs()">

3. Place a button on the page to trigger the dynamic relead:

<input type="button" name="reloadjs" value="Reload JavaScript" onClick="LoadMyJs('my_live_loading_script.js')">

4. Load your page!

Now once your page is loaded it will called the LoadMyJs() method.  This method does the following:

  1. Defines a function called “LoadMyJs” that takes on parameter which we will herein refer to by the variable “scriptName”
  2. Get the first (and only, of course) “head” tag as an object using the getElementsByTagName() method built into JavaScript.
  3. Create a new variable called “dynamicScript” as a “script” (the funciton equivalent of having written a <script> tag).
  4. Set the type to “text/javascript” (just the same as the type="text/javascript" in the <script> definition).
  5. Tell the browser that the “source” (abbreviated “src”) of the JavaScript is whatever address was passed to the function when it was called (in this example, “my_live_loading_script.js“);
  6. Take the now-defined “dynamicScript” ojbect and appended it to the document head.

There you have it!  Whenever you make changes to your JavaScript file, just click the “Reload JavaScript” button on your page and the browser will reload the JavaScript without you having to reload the page and all that hassle.

From here you may want to get creative, just and loading multiple scripts or even using a couple functions to toggle between the effects of two different script (e.g., one that gives helpful info to newbies and another that gives more advanced help message).

Finally, a special thanks to Patrick Hunlock for his “How to Dynamically Insert Javascript And CSS” article that gave me the head start on this!

]]> http://www.philnicholas.com/2009/05/11/reloading-your-javascript-without-reloading-your-page/feed/ 0 MSO-BIDI meaning http://www.philnicholas.com/2009/01/30/mso-bidi-meaning/ http://www.philnicholas.com/2009/01/30/mso-bidi-meaning/#comments Fri, 30 Jan 2009 20:41:24 +0000 Phil http://www.philnicholas.com/?p=20 Continue reading →]]> For those not familiar with working with Cascading Style Sheets for use by Microsoft Office product, some of the rules of the road can prove cryptic at best.  Case in point is the ” series of embedded styles.  These can sometimes appear to conflict with other styles in the same declaration, for example:

<span style='font-size:11.0pt;mso-bidi-font-size:10.0pt;color:navy'>

The font-size is a standard CSS declaration, but the next declaration is particular to Microsoft:

The “mso” part is, of course, the abbreviation for Microsoft Office (since Microsoft almost always abbreviates its name as “ms” in code).  But what does “bidi” mean?  I hunted everywhere, but had to resort to deep Googling to dig up the answer from the Windows Internet Explorer Blog. In a post dedicated to the issue of bidirectional text behavior in MSIE 6 vs. 7, the IE gurus explain:

When text is presented in horizontal lines, most scripts display characters from left to right. However, there are several languages (such as Arabic, Divehi, Hebrew and Syriac) where the natural ordering of horizontal text in display is right to left. Ambiguities can arise in determining the ordering of character display when text flows in two directions (hence Bidirectional) is present.

So the “bidi” means “bidirectional” and tells the Office-based application that declaration affects the display/print of bidirectional fonts, such as those for Arabic or Hebrew.

Therefore, the “mso-bidi-font-size:12.0pt” declaration means “Microsoft Office Bidirectional Font Size:12 point ” style and allows the setting of a 12 point font size in the event of a bidirectional font appearing within the bounds of the declaration

Hopefully I just saved some of you a bit of Googling.

]]> http://www.philnicholas.com/2009/01/30/mso-bidi-meaning/feed/ 0 Showcase of outstanding data representation at FlowingData.com http://www.philnicholas.com/2009/01/15/showcase-of-outstanding-data-representation-at-flowingdatacom/ http://www.philnicholas.com/2009/01/15/showcase-of-outstanding-data-representation-at-flowingdatacom/#comments Thu, 15 Jan 2009 18:45:34 +0000 Phil http://www.philnicholas.com/?p=11 Continue reading →]]> I can’t remember where I found it, but I ran across a fascinating time-based graphic depicting the growth of WalMart.

Ever since taking the “Presenting Data and Information” course from the venerable Edward Tufte, I’ve been interested in information and statistics presentation (eventually contributing my minoring in visual communications). Representing numbers and data visually is very hard, especially when the goal of visual presentation (i.e., to demonstrate how the data relates to itself) often gets lost in our desire for glitzy over-production of whiz-bang PowerPoint.

So this brings us to the site FlowingData.com. Check it out, and don’t miss their 5 Best Data Visualization Projects of the Year.

]]> http://www.philnicholas.com/2009/01/15/showcase-of-outstanding-data-representation-at-flowingdatacom/feed/ 0