It seems working for PayPerPost is not for the faint at heart. Let’s see the first week I had to introduce myself to a bunch of people and in front of a camera no less. Absolutely no pressure there since it was going to be shown to the world; right. At the end of the month I had to give a Mexican yell and take a shot in front of the same, maybe not so strange people.

Last month in May was my birthday, May 5, and the celebration for that day was purely Cinco de Mayo but I somehow fell through the cracks at month end when I was supposed to do my cake plow for having a birthday in May. Caught up with me though with a slip of the tongue by another developer. Damn!!!

So here it is the at the month of June and our company pot luck was today. Since I truly could not be invisible, and believe me I tried, as cake was brought out for me. Rather a huge friggin slice of one. Oh well at least I didn’t have to do the Mexican yell. I hope you enjoy!!!

Here’s the problem, a web site allows you to use html but filters script blocks. You really want to use some cool javascript though.

How to you do it?

Use an anonymous javascript function on the onload event of an image. If you read my article about WEDJE and/or Mike Davidsons’ article about the same you’ll see the basic format for setting up script for slow loading servers without stopping a page load. Based upon that knowledge I decided to take it a step forward. As I normally do.

Testing in all browsers show that they support the onload event for and image tag. What this means is if the image was successfully loaded then the onload event is triggered. So we’ll use that to call an image off our server but for everyones sake I’ll replace the onload with onclick for demo purposes.

<div id=”needed_script_container”></div>
<img src=”http://www.techraving.com/images/ror.gif” border=”0″ onclick=”" />

Having that basic setup let’s add the base javascript to call our external javascript file using the anonymous function to create a script element dynamically.

<div id=”needed_script_container”></div>
<img src=”http://www.techraving.com/images/ror.gif” border=”0″ onclick=”(function() { s=document.createElement(’script’); s.type=’text/javascript’; s.src=’http://www.techraving.com/javascript/anon.js’; setTimeout(’document.getElementById(\’needed_script_container\’).appendChild(s)’, 1); })()” />

The reason the div is needed is to attach the new script element. The setTimeout is to delay the attachment of the element just a little to make sure the page has successfully loaded it. For slower sites the timeout can be increased.

Now with that code placed in a webpage and clicking the graphic the onclick event is triggered and activates the inner javascript. Dynamically creating the seed script block with the div means that further javascript functions can now be used.

Using the above code click the image below to see it in operation:

The called javascript file merely includes: alert(”This page location: ” + window.location.pathname + “. I am glad to meet you!”);

So far I’ve found no real reason to use this, yet! But hey now we know right!

I came across a post that discussed an age old problem, reducing draw times for JavaScript widgets on external sites. As a widget and web site developer I’ve seen this time and time again; the publisher embeds the JavaScript code into their pages. When the JavaScript file producing server becomes slow or un-responsive the publishing web page barely gets drawn and visitors become impatient and leave.

Mike Davidson with consultation from Intern Rob have published a post Widget Enabled DOM JavaScript Embedding which can be found at WEDJE . They also recognize the implications of bad JavaScript includes and even cross-browser incompatibilities. Their solution to these is thus coined WEDJE.

In short the solution surrounds creating a standard div element in the page and then utilizing the DOM elements to create a script element within. Their post simulates a slow loading server and their pages still fully loads and when the 7 second delay is up their widget appears.

I will definitely have to explore the WEDJE pattern some more. Definitely review the comments as there are some further examples that are worth taking a stab at. I had to laugh as I wrote this article on Widget Enabled DOM JavaScript Embedding because I realized that the WEDJE acronym sounds like Wedge.