Ten Tonne Baby!

Where's Mama?

Archive for the javascript tag

• HTML 5 data- attributes

  One welcome addition to the proposed HTML5 specification is to allow any attribute prefixed with data- to be treated as a storage area for private data. This makes it possible to associate private data with different DOM elements when a page is generated and sent from the server while still validating against an HTML validator.

  Previously it has been possible to temporarily store state information in custom properties against an element via javascript, however embedding state information in a page when generated server-side (and getting a page to validate) always required workarounds. I’ve often resorted to using hidden input elements to expose state information to client-side script, but this should not (and won’t any longer) be necessary.

  Posted:

  February 2, 2010 @ 10:28

  Categories:

  Development

  Tags:

  ajax, html5, javascript

  Comments:

  No comments so far

• Problems having a simple, self-contained script with dependencies

  A while back I was working on a javascript based video solution, and I wanted to make it as simple as possible to include a video widget into a page. This would be roughly along the lines of…

     1: <script type="text/javascript" src="blah.js"></script>    

     2:  

     3: <script type="text/javascript">

     4:     

     5:     mycompany.video.addVideoWidget({

     6:         siteId: "Heat",

     7:         keywords: "Britney Spears",

     8:         parent: "Id of the container"

     9:     });

    10:     

    11: </script>

  When authoring a script like this, it needs to be entirely self-contained as you have no knowledge of what other scripts have been included on the host page, or what versions etc.

  The issue is how to offer this script when you have a dependency. In this case I wanted to use swfoject as a reliable way to add a flash movie to a page. Another common scenario would be writing script on top of jquery. An example is Typekit who end up packaging up and distributing jquery as part of the code they require you to download – discussed here.

  Given that you have no working knowledge of the host page, the only possible option is to package up the dependency, avoid naming conflicts, and include it with your script logic. However this seems quite wasteful given that the host page may also include the same library.

  We are so used to using libraries now to make javascript a pleasurable activity, the idea of writing raw script, while possible, is really not an enjoyable prospect.

  I don’t have a good answer to the problem – I ended up going down the same route that Typekit have gone. The only other option is to provide a flavour which requires the host page to implement the dependency, but then you lose the simplicity and are open to tricky issues around versioning.

  Still, I guess life is short and bandwidth is cheap.

  Posted:

  December 16, 2009 @ 16:37

  Categories:

  Development

  Tags:

  javascript, typekit

  Comments:

  No comments so far

• Problems with javascript minification that affects SwfObject 2.1 in Internet Explorer

  This is actually a more general issue with javascript minification that can affect a number of scripts, but I noticed it while tracking down weird behaviour with the minified version of SwfObject that only affected Internet Explorer.

  Basically, standard behaviour with most javascript minifiers is to strip out anything contained within comments. I finally tracked down this piece of code in the swfobject library that was getting stripped out (incorrectly) by the minifier…

  /*@cc_on

  ie = true;

  @if (@_win32)

  windows = true;

  @elif (@_mac)

          mac = true;

      @end

  @*/

  This library carries out browser detection by using the proprietary Conditional Compilation feature in Internet Explorer. In order to stop other browsers from choking, the code is wrapped in a comment.

  I’m not commenting whether this is a good or bad idea, simply that it does appear in existing scripts, and causes a bunch of javascript minifiers to strip out functional code.

  I think my approach will be to revise the set of regular expressions that control what gets stripped out to cater for this variation.

  Posted:

  March 26, 2009 @ 12:01

  Categories:

  Development

  Tags:

  flash, javascript, performance

  Comments:

  No comments so far

• Webtrends tracking from Flash

  I’ve been working on a Flash widget, and the majority of the sites it will be hosted on use WebTrends for analytics. I recently had to look into capturing certain interaction events from the Flash movie and passing them through to WebTrends for reporting.

  Flash events are tracked as fake page impressions in WebTrends based on unique URLs that you define. The flash movie doesn’t talk to WebTrends directly – it calls through to javascript on the host page which logs the event via standard WebTrends javascript.

  In my case I’m working on a widget that could be hosted on a variety of pages that may or may not implement WebTrends. The required behaviour is for tracking to automatically kick in if the host page implements WebTrends, but gracefully degrade if not. I have a javascript file that handles interaction with the flash movie, so I can guarantee certain js functions exist on the host page.

  The solution looks like so…

  Add an ActionScript class to pass events through to host page

  package {

      import flash.external.ExternalInterface;

      public class Analytics {

          public static const WIDGET_LOADED:String = "/Video/Widget/WidgetLoaded";

          public static const PLAYER_LAUNCHED:String = "/Video/Widget/PlayerLaunched";

          public function Analytics(): void {

          }

          public static function captureEvent(eventType:String) {

              if (ExternalInterface.available) {

                  ExternalInterface.call("mycompany.video.captureAnalyticsEvent",  eventType);

              }

          }

      }

  }

  An example of passing an event to this class…

  Analytics.captureEvent(Analytics.WIDGET_LOADED);

  Implement javascript functions on the host page

  /* set up namespace for new functions */

  if (window["mycompany"] == null) {

      window["mycompany"] = {};

  }

  mycompany.video = {

      webtrendsTrackingFunction: {},

      captureAnalyticsEvent: function(eventType) {

          var uriParam = 'DCS.dcsuri';

          if (typeof (this.webtrendsTrackingFunction) == 'function') {

              // if user has nominated a specific tracking function

              this.webtrendsTrackingFunction(uriParam, eventType);

          } else if (window["dcsMultiTrack"] != null) {

              // if dcsMultiTrack already implemented on page

              window.dcsMultiTrack(uriParam, eventType);

          } else if (window["dcsTag"] != null) {

              // otherwise if webtrends implemented on page, use default implementation

              mycompany.video.analytics.dcsMultiTrack(uriParam, eventType);

          }

      }

  }

  mycompany.video.analytics = {

      dcsMultiTrack: function() {

          for (var i = 0; i < arguments.length; i++) {

              if (arguments[i].indexOf('WT.') == 0) {

                  WT[arguments[i].substring(3)] = arguments[i + 1]; i++;

              }

              if (arguments[i].indexOf('DCS.') == 0) {

                  DCS[arguments[i].substring(4)] = arguments[i + 1]; i++;

              }

              if (arguments[i].indexOf('DCSext.') == 0) {

                  DCSext[arguments[i].substring(7)] = arguments[i + 1]; i++;

              }

          }

          var dCurrent = new Date();

          DCS.dcsdat = dCurrent.getTime();

          dcsTag();

      }

  }

  The key points above the script above…

  • To report events from Flash, WebTrends require an additional function on the host page that they provide – dcsMultiTrack
  • If the host page has implemented dcsMultiTrack already, the existing function will be used
  • If the host page implements standard WT js but not the additional function, a fresh implementation of the dcsMultiTrack function will be used
  • If WebTrends javascript has not been implemented on the host page, nothing bad happens

  In addition, we have a standard function that the flash movie will always call, so if we need to extend functionality to cater for different analytics systems etc, then we have a single place to implement this.

  This is probably the least sexy post I’ve ever written, but it seemed worthwhile to document this. I’ll follow up with some sexified content sometime soon.

  Posted:

  February 27, 2009 @ 12:07

  Categories:

  Development

  Tags:

  analytics, flash, javascript, webtrends

  Comments:

  2 comments so far

• Using ExternalInterface to call Javascript from Actionscript – ‘null’ is null or not an object in IE

  If you are using ExternalInterface in Actionscript 3 to call through to a javascript function, the original object tag that instantiated the flash runtime needs to have an explicit id attribute. Otherwise you’ll get the above error when running the movie in Internet Explorer.

  Posted:

  February 26, 2009 @ 11:00

  Categories:

  Development

  Tags:

  flash, javascript

  Comments:

  7 comments so far

• Added object tag to page via DOM methods – IE chaos

  I’ve been working on a widget project that involves Flash and Javascript, and came across some very strange behaviour in IE6 / 7. The object tag to render the flash movie is dynamically added to the page at runtime using standard DOM methods – document.createElement, setAttribute, appendChild etc. Life was wonderful until I opened Internet Explorer, which hangs with what looks like a request for a file with no timeout (progress bar moving very slowly but never completing). This is identical behaviour to how IE behaves when the location of the SWF is invalid.

  The markup

  The markup I was generating was based on Flash Satay. Including this as static markup in a page works fine. Simple example below…

  <object type='application/x-shockwave-flash' data='test.swf' width='420' height='155'>

      <param name='movie' value='test.swf' />

  </object>

  DOM approach that chokes IE

  The following approach causes IE to choke…

  <script type="text/javascript">

      var object = document.createElement('object');

      object.setAttribute('type', 'application/x-shockwave-flash');

      object.setAttribute('data', 'test.swf');

      object.setAttribute('width', '100');

      object.setAttribute('height', '100');

      var param = document.createElement('param');

      param.setAttribute('name', 'movie');

      param.setAttribute('value', 'test.swf');

      object.appendChild(param);

      document.body.appendChild(object);

  </script>

  The solution / workaround

  For some reason if the object tag + params are parsed at the same time everything works fine, so the solution involves using the alternate approach to manipulating the DOM – innerHTML. This wouldn’t have been my first choice given the situation, but it seems to be the only way to get this working. A version that works in IE…

  <script type="text/javascript">

      var fragment =

          "<object type='application/x-shockwave-flash' data='test.swf' width='100' height='100'>" +

              "<param name='movie' value='test.swf' />" +

          "</object>";

      var container = document.createElement('div');

      container.innerHTML = fragment;

      document.body.appendChild(container);

  </script>

  This achieves the same end result – a DOM element node that can be inserted anyway you wish, but avoid the problem in IE.

  Posted:

  February 26, 2009 @ 10:51

  Categories:

  Development

  Tags:

  dom, flash, IE, javascript, x-browser

  Comments:

  2 comments so far

• Simulated Events and Firefox

  Suppose you want to write some javascript to simulate an event taking place. For many of the common events, there is the equivalent method, so you can call click() on an element to simulate a mouse click. After a painful debugging session today I found that doing this in Firefox means that the wrong element ends up on the event.target property, which can cause various problems when you’re handling the event.

  In this case I had an input element that was kicking off an ansychronous form submit when clicked. On top of this I’m implementing drag and drop behaviour, so I figured it would be as simple as simulating the click event when the item was dragged and dropped in the right way. The click handler already worked, and kicked off the async operation as desired, so it should be a nice layer on top.

  The async operation basically hijacks the form submit if it is caused by certain elements, and performs an async post instead. The problem with the event target in Firefox meant that this behaviour never kicked in.

  A workaround was to use dispatchEvent instead. This allows a simulated click which results in the correct event target set. This is in the W3C DOM level 2 spec, and is implemented in Firefox (but not IE).

  Posted:

  June 19, 2007 @ 18:17

  Categories:

  Development

  Tags:

  events, firefox, javascript

  Comments:

  No comments so far

• Javascript New Releases

  There are a couple of new books that are worth taking a look at. The first is the O’Reilly book on Atlas. I’m currently reading this one from APress, but I’ve heard rumour that the OReilly book provides much more context in examining the underlying technologies that Atlas is based on.

  The other is one that I’ve been looking forward to for a little while now, PPK on Javascript. This comes from the guy behind quirksmode.org and should be an interesting read. It’s along a similar direction as DOM Scripting but providing the next level of detail, where DOM Scripting was a great introduction into modern use of javascript and the DOM. My copy should be delivered midweek, so I’ll let you know how I get on with it.

  If javascript makes you feel sad or confused and you need a little light relief, you should come along to Stephen K Amos at the Garrick theatre on Thursday (I have no idea about ticket availability – currently assuming we can get some for thurs). I’ve been to a couple of shows in Edinburgh which made my face hurt from laughter. I’m eager for more face-ache, so should be going this week too.

  Posted:

  October 23, 2006 @ 9:37

  Categories:

  Development

  Tags:

  books, dom, javascript, reading, reviews

  Comments:

  No comments so far

• Atlas or YUI?

  For a little while I’ve been meaning to take a proper look at Atlas, Microsoft’s main offering to help out in building AJAX applications and richer web based interfaces.

  Javascript is definately back in fashion, with a number of libraries popping up to help out with application development. I think overall this is fine, so long as you have an appreciation of what is actually happening under the scenes. I don’t think a library should dictate the way that you build an application, rather enable you to build it more efficiently.

  I’ve started using elements of the Yahoo YUI library which is very impressive. There seem to be a lot of very useful little utility functions available, the kind of thing that you would typically rewrite on each project.

  I’m quite curious about how the Microsoft and Yahoo libraries compare. I’ll post some information about this when I’ve had a chance to look in more detail at Atlas.

  Posted:

  July 3, 2006 @ 12:16

  Categories:

  Development

  Tags:

  ajax, asp.net, javascript, libraries, YUI

  Comments:

  No comments so far

• PPK on Javascript

  Peter-Paul Koch is publishing a new book on Javascript. If you have been following the work of Jeremy Keith, chances are you’ve come across his book which is one of the best modern web development books I’ve read. This looks like it extends the same ideas, but goes into much more technical detail.

  It’s not out just yet, but worth keeping an eye out for – I think the UK release is towards the end of August.

  Posted:

  June 28, 2006 @ 11:34

  Categories:

  Development

  Tags:

  books, javascript, reviews

  Comments:

  No comments so far