1. User loads the home page. Angular fetches the template and inserts it into the ng-view.
2. User scrolls down the page a bit, say 600px.
3. User clicks a link to another page. Angular fetches the requested page’s template and inserts it into the ng-view, but the browser stays scrolled 600px, so the user doesn’t actually see the content they loaded.
4. User clicks the browser’s back button and sees again the content they were at before clicking the link.

The quick, dirty, incomplete “solution” to this might be to simply detect when the route is changing and auto-scroll to the top of the window in all cases. However, if we did that, upon clicking back in step 4 above, the browser would scroll back to the top of the page instead of landing the user back where they came from. So what we need is a real solution that will auto-scroll to the top of the page when a *new* page is loaded, but allow the browser to restore the scroll position for any page that was navigated away from.

My first thought was to just store the most recently viewed page and detect a new page load, compare the new page to the most recent page, and if it’s different, scroll to the top. This doesn’t work, however, when the user clicks back more than one page.

My second thought was to just store the history of pages viewed and only scroll to top if the newly loaded page is not in that history. This, however, doesn’t take into consideration that a user may go back in the browser then go forward again, and if they go forward to a page they just came from, we don’t want that scrolling away on them.

No, what we need is to store the history of all pages loaded both backward and forward. Below is the solution I implemented which stores the current page, a stack for all backward pages, and another stack for all forward pages. When the location changes, the new URL is compared to the top of the backward stack and the forward stack. If it’s either one, the matching element is popped and we leave the scroll position where it is. If it’s neither, the user must be linking forward into a new path, so the forward stack is emptied.

Overall the solution works pretty nicely. The only less-than-usual thing to be aware of is that if you click a link that takes you backward or forward one page (i.e., instead of clicking the back button back to the homepage you click a “home” link), it will look to the code like you used your back button and leave the scroll position unchanged, but I actually like that behavior. It makes the whole SPA thing feel much more solid.

[GitHUB »]

<script>
// first thing's first; initialize the app
var app = angular.module('yourAppName', ['ngRoute']);// '

// use $rootScope since this is for application-wide behavior
app.run(function _bwdFwdDetect($rootScope, $location) {
  $rootScope.path = $location.path();// stores only the current page being viewed
  $rootScope.pathBwd = [];// stores up to the last page viewed before the current one
  $rootScope.pathFwd = [];// stores starting with the page viewed before coming back to the current one

  // detect that the location is about to change
  $rootScope.$on('$locationChangeStart', function(event) {
    var newPath = $location.path();// take note of the new path (using path instead of url is good)

    // grab the last backward page for comparison
    var bwd = !$rootScope.pathBwd.length ? null :
      $rootScope.pathBwd[$rootScope.pathBwd.length - 1];

    // grab the last forward page for comparison
    var fwd = !$rootScope.pathFwd.length ? null :
      $rootScope.pathFwd[$rootScope.pathFwd.length - 1];

    // if the new page is the last backward page, assume the user went "back"
    if (bwd == newPath) {
      // it's no longer the last backward page, so remove it
      $rootScope.pathBwd.pop();

      // and push into the forward stack the page we're just leaving to go backward from
      $rootScope.pathFwd.push($rootScope.path);
    }
    // the new page is the last page we came backward from, assume the user went "forward"
    else if (fwd == newPath) {
      // it's no longer the last forward page, so remove it
      $rootScope.pathFwd.pop();

      // and push into the backward stack the page we're going forward away from
      $rootScope.pathBwd.push($rootScope.path);
    }
    // we didn't go back or forward; assume it's a new forward trail being started
    else if ($rootScope.path != newPath) {
      // remember the page we're leaving as our last backward page
      $rootScope.pathBwd.push($rootScope.path);

      // empty out our forward stack since we're now starting a wholly new forward path
      $rootScope.pathFwd = [];

      // this is what it's all about; scroll to the top of the freshly-loaded page
      $('html,body').animate({ scrollTop: 0 }, 'slow');
    }

    // now that we're done with our comparisons, we can remember our new current page
    $rootScope.path = newPath;
  });
});
</script>

Of course this whole “new page detection” thing I’m doing doesn’t only have to be used to scroll to the top of the page. There could be any number of things you might want to do depending on whether the route is changing backward or forward or down a new path.

At the moment I’ve been delving head-first into some modern frameworks like AngularJS and Bootstrap, so I plan to document things I learn along the way that I think will help other developers also new to these technologies who might come up against some of the same issues or who might just find interesting the things I’m discovering.

Without further ado, this is my first of such posts, which is a little more advanced than just starting to learn everything from scratch, but I do plan to back-track and cover more in future posts the basics of using AngularJS.

If you’re developing a Single Page Application (SPA) with Angular, you may find that loading an HTML fragment with a form input that should be auto-focused might not work. Assuming you’ve already set up ngRoute to dynamically control the routing of your application, the simplest way I came up with to set focus on an input after ensuring the HTML template is fully loaded is to define a callback for $routeChangeSuccess which is invoked after the route has finished changing. The best place to respond to that event is in a run block, since it’s an application-wide action we’re taking. The trick is that the DOM may still not be ready for you to set focus at that point, but setting focus inside a $timeout will ensure the $digest loop has ended.

The other, more obvious decision was to ensure the input I want to auto-focus has the “autofocus” attribute so it can be targeted using a simple jQuery selector. Below is a bit of sample code demonstrating what I just described with comments, so hopefully it’s all pretty obvious to you (and it should be if you’re using Angular yourself).

[GitHUB »]

<script>
// first thing's first; initialize the app
var app = angular.module('yourAppName', ['ngRoute']);// '

//... do other things like set up your routing (not covered here)

// set up a Run Block
app.run(function _forceAutofocus($rootScope, $timeout) {

  // tell Angular to call this function when a route change completes
  $rootScope.$on('$routeChangeSuccess', function() {
    // we can't set focus at this point; the DOM isn't ready for us

    // instead, we define a callback to be called after the $digest loop
    $timeout(function(){
      // once this is executed, our input should be focusable, so find (with jQuery)
      // whatever is on the page with the autofocus attribute and focus it; fin.
      $('[autofocus]').focus();
    });
  });

});
</script>

For starters, clicking a BUTTON does not cause its form to be submitted. This means that a user will never be able to submit the form by clicking it. Furthermore, if you are using JavaScript including jQuery to trigger a callback upon form submit, that callback will never be fired.

<form method="post" action="">
  <!-- ... your form fields go here ... -->

  <button name="proceed" value="save">Update Record</button>
  <button name="proceed" value="undo">Cancel</button>
</form>

The easiest fix, which might be your best option, would be to simply replace those BUTTON elements with INPUT elements:

  <input type="submit" name="proceed" value="Update Record"/>
  <input type="submit" name="proceed" value="Cancel"/>

Again, this is a simple fix, and if it satisfies your requirements, you should definitely stick with it. The problems with this, however, are:

1. You may be dealing with legacy or third-party code and you don’t want to go fumbling through thousands of lines of someone else’s code to change their HTML. (This could also break other parts of the system that make assumptions about the fields being of type BUTTON or having a specific value attribute.)
2. The other issue is that you cannot specify an arbitrary value for the fields because the value attribute also doubles as the user-friendly display value.

So, to tackle both of our issues, we’ll need to bind a click handler to every BUTTON on a page contained within a FORM element. We can do this with jQuery by using the following code:

$(document).ready(function(){
  // use live() to handle dynamically added buttons (pre jQuery v1.7)
  $("form button").live('click',function(){
    var f = $(this).get(0).form;

    if (typeof(f) !== 'undefined') {
      if (this.type && this.type != 'submit')
        return;

      if (this.name) {
        this.trueName = this.name;
        this.name = '';
      }

      $("input[type='hidden'][name='"+this.trueName+"']", f).remove();

      if (typeof(this.attributes.value) !== 'undefined')
        $(f)
          .append('');

      $(f).trigger('submit');
      return false;
    }
  });
});
/*
Note: As of jQuery v1.7, live() has been deprecated. You can replace
that line above with the following if you're using the latest jQuery:
  $("form").on("click", "button", function(){
*/

Note that we don’t want this code to be executed in other browsers than IE7 and older, so you should put it into a file, let’s call it ie7.js, and use Microsoft’s conditional comments in your HTML file to import it only if the user is using a version of Internet Explorer before version 8:

<!--[if lt IE 8]>
<script type="text/javascript" src="ie7.js"></script>
<![endif]-->

Now, if you’re interested, let’s consider how that code works. It will cause any click of a BUTTON element contained within a FORM element to trigger the callback we defined. The callback does two important things:

1. It appends a hidden INPUT element to the FORM using the name of the clicked BUTTON and its real value attribute (rather than the display label).
2. It triggers the submit event on the FORM element, so any callbacks you’ve bound on form submission will get executed.

Side note: Fetching the actual “value” attribute can seem a tricky thing to figure out. If you’re just trying to use $button.attr(‘value’) you’ll always get the button label. Instead, we use the “attributes” value of the element.

That should be all you need to get your BUTTON elements working properly in IE7.

As an added bonus, you may want to add a handler to submit your form when the user presses enter while focused on an entry field. To do so, you can use this to trigger the click event on the first non-disabled button in the form:

$(document).ready(function(){
  $("form").on("keypress", "input,select", function(e){
    if (e.keyCode == 13)
      $("button:not(disabled):first", this.form).trigger('click');
  });
});

For example, if you had a field prompting a user to enter their username, the placeholder text might be “Enter your username here.” With the introduction and support of the “placeholder” attribute, all that would be required is the use of an input tag like <input type=”text” placeholder=”Enter your username here.”/> and the browser will automatically display your text whenever there is no entry in the field and it does not have the keyboard focus.

The only problem is that older web browsers (and even those that are not-so-old, such as IE8) lack support for placeholders, so a standalone solution is required. After contemplating a couple of different fallback implementations, I decided that for my requirements, an extremely simple implementation would be best.

Other people have designed jQuery plugins mainly in one of two ways: 1) use the input’s own value to display the placeholder text when there is no user entry, and 2) float the placeholder text in front of the input.

Option 1 seems like the most obvious solution, but after brief contemplation, it is obviously a very sloppy one considering that overriding the input value means you’d have to design special handling to carry the true user entry. It also mucks things up that the input might be of type “password” which means you can’t just set the placeholder text as its value, since it will just show up obscured. Furthermore, if the input has a “maxlength” attribute that is shorter than the length of your placeholder text, you’d have to work around that as well. And as far as styling goes, if you wanted your placeholder text to appear differently than the input text, you’d need to also keep track of the styles of both. Clearly, a complete solution this isn’t.

Option 2 seems to be the much better implementation. Unfortunately, most all such solutions I’ve been able to find out there seem to be poorly designed, overlooking several key requirements for half-decent functionality. For example, they ignore the fact that the browser window might be resized (in which case the placeholder needs to move with the input) or the input might become hidden (in which case the placeholder should also be hidden).

And finally, here is the solution I came up with. You should be able to just drop it into your own page as-is, or minify it first if you’d like. (It’s a bit bloated here for readability and documentation.)

<script type="text/javascript">
$(document).ready(function(){// wait until the DOM is ready
  $(function(){// encapsulate our variables into their own scope
    // test if HTML5 placeholder is supported; if so, quit
    var el = document.createElement('input');
    if ('placeholder' in el)
      return;

    // traverse all inputs with a placeholder attribute
    $("input[placeholder],textarea[placeholder]").each(function(){
      var $ip = $(this),// the input itself (in a jQuery object)
          tx = $ip.attr('placeholder');// placeholder text

      // create a label and a span within it
      var $lb = $(''),
          $sp = $(''+tx+'').appendTo($lb);

      // the label surrounds the input
      $lb.insertBefore($ip).append($ip);

      // try getting the input's size
      var w = $ip.width(),
          h = $ip.height();

      // if it fails, it's likely because the input is not visible
      if (!w || !h) {
        // clone the input and make it have size/shape without showing it
        var $clone = $ip.clone().appendTo('body').css({
          position : 'absolute',
          visibility : 'hidden',
          display : 'block'
        });

        // fetch the correct size (hopefully)
        w = $clone.width();
        h = $clone.height();

        $clone.remove();
      }

      // copy the position, size, and font into the
      // placeholder text's span
      $sp.css({
        position : 'absolute',
        display : 'block',
        width : w+'px',
        height : h+'px',
        lineHeight : $ip.css('line-height'),
        paddingLeft : $ip.css('padding-left'),
        paddingTop : $ip.css('padding-top'),
        marginLeft : $ip.css('margin-left'),
        marginTop : $ip.css('margin-top'),
        fontSize : $ip.css('font-size'),
        fontWeight : $ip.css('font-weight'),
        overflow : 'hidden',
        cursor : 'text'
      });

      // in MSIE 7 the text is vertically misaligned
      if ($.browser.msie && parseInt($.browser.version) <= 7)
        $sp.css({marginTop:parseInt($sp.css('margin-top'))+2+'px'});

      // if the input is hidden or shown, so should the placeholder be
      $ip.bind('hide', function(){ $sp.hide(); });
      // when showing, ensure the text is the right size
      $ip.bind('show', function(){
        $sp.show().css({
          width:$ip.width()+'px',
          height:$ip.height()+'px'
        });
      });

      // if the input is starting out hidden or there is a default value in
      // the input already, hide the placeholder
      if (!$ip.is(':visible') || $ip.val().length)
        $sp.hide();

      // when input gets focus, hide the placeholder and
      // when we leave the input, if it has no user entry
      // show the placeholder
      $ip.focus(function(){ $sp.hide(); });
      $ip.blur(function(){ if ($(this).val() == '') $sp.show(); });

      // if the placeholder is focused, send focus to the input
      $sp.focus(function(){ $ip.focus(); });
    });

    // override jQuery.hide() to trigger the 'hide' event
    var hide = $.fn.hide;
    $.fn.hide = function() {
      $(this).trigger('hide');
      return hide.apply(this, arguments);
    };

    // override jQuery.show() to trigger the 'show' event
    var show = $.fn.show;
    $.fn.show = function() {
      $(this).trigger('show');
      return show.apply(this, arguments);
    };
  });
});
</script>

.placeholder { color: #bbb; margin-top: 5px !important; }
/* you should use it alongside, and identically to, your style rules for HTML5
placeholder text, which as of this writing can be done in Mozilla and Webkit
browsers as follows: */
::-webkit-input-placeholder { color: #bbb; margin-top: 5px !important; }
/* single-colon for older Mozilla */
:-moz-placeholder { color: #bbb; margin-top: 5px !important; }
/* double-colon for newer Mozilla */
::-moz-placeholder { color: #bbb; margin-top: 5px !important; }

1) I could obviously make it into a plugin, but for my purposes, I’m just using it as-is.

2) I opted to override hide() and show() in jQuery. This might not be preferable and could possibly conflict with any other overrides of those same functions that might be present in your scripts. If this is an issue, you can just remove them.

3) The issue with some inputs is they may start out hidden when the page is loaded. If so, the width/height will not be known. To help mitigate this issue, we clone the input and make it take shape so we can determine its size. This helps, but it can still be inaccurate when the size of the input depends on CSS specific to its hierarchy (because we’re appending the clone to “body”, not to the input’s parent, who might also be non-visible due to some ancestor).

For example, if the CSS for your input is something like:

#some-panel { display: none; }
#some-panel .some-box input { width: 500px; }

Then we’ll clone the input, append the clone to “body”, and apply its width to the placeholder text. But since the CSS width depends on the input being a descendant of #some-panel and then .some-box, the width of our clone will very certainly not be the 500px we’re after.

The complete solution is: when showing the container of the input, always explicitly call something like $("#some-panel .some-box input[placeholder]").show() to trigger our input’s show() event, which triggers its placeholder’s show() event, which in turn adjusts the text to match the input’s size. It’s not elegant, but it works.

As always, if you encounter any issues or have any questions. Please comment below.

As is usually the case, I couldn’t find what I needed so I decided to create it myself, and so the Fancy Opts plugin was born. It allows you to simply create flexible and completely unique radio button and checkbox inputs.

I compiled the info, download, and demo info here: Fancy Opts jQuery Plugin. It’s really simple to use, degrades gracefully, and acts very much like a traditional input.

If you have any comments, suggestions, or problems with the plugin, please feel free to let me know!

A quick google lead me to believe that no such plugin for jQuery currently exists. I did find a few table-centric plugins that (maybe) include the kind of functionality that I wanted, but nothing looked to provide just what I had in mind. So, I started working on the plugin myself.

I call the plugin TH Float, but it could also aptly be named Sticky Table TH or Fixed THEAD / TFOOT. What it does is make the <thead> or <tfoot> of a table remain floating in view at the top or bottom, respectively, of the scrollable container until the table is completely out of view.

I’ve thrown together a simple info page and demo: TH Float jQuery Plugin. It’s really simple to use and from my tests works identically and flawlessly in (most?) all browsers (though, interestingly, I did discover an obscure bug in IE8 while creating the demo page).

If you have any comments, suggestions, or problems with the plugin, please feel free to let me know!

This is a screenshot of what the menu currently looks like at Wired.com:


And this is a screenshot of the menu I created:

I just used a bit of straightforward CSS and jQuery JavaScript to get it done. Below is the code and a functional demo for your viewing pleasure. Admittedly it’s not the most elegant solution, but it suffices and provides the bare essentials that can be tweaked to suit your liking.

CSS

#navbar {
  width: 100%;
  height: 25px;
  background: #000;
}

#navbar > ul {
  list-style: none;
}

#navbar > ul > li {
  float: left;
  display: inline-block;
}

#navbar > ul > li > a {
  display: block;
  color: #fff;
  padding: 5px 20px;
  text-align: center;
}

#navbar > ul > li > a:hover, #navbar > ul > li > a.open {
  background: #888;
}

#navbar .dropdown {
  display: none;
  position: absolute;
  margin-top: -2px;
  background: #fafafa;
  border: 3px solid #aaa;
  padding: 5px;
  padding-left: 0;
}

#navbar .dropdown ul {
  list-style-type: none;
  display: inline-block;
  float: left;
  margin: 0 0 0 5px;
  padding: 0;
}

#navbar .dropdown ul li {
  border-bottom: 1px solid #aaa;
  margin: 0;
  padding: 0;
}

/* would use :last-child but IE doesn't recognize it */
#navbar .dropdown ul li.last {
  border: 0;
}

#navbar .dropdown ul li a {
  display: block;
  min-width: 100px;
  padding: 3px 5px 3px 10px;
  margin: 1px 0;
  font-weight: normal;
  font-size: 0.85em;
}

#navbar .dropdown ul li a:hover {
  background: #eee;
}

HTML

<div id="navbar"> 
  <ul> 
    <li> 
      <a href="#">Apple</a> 
      <div class="dropdown"> 
        <ul> 
          <li><a href="#">Column A #1</a></li> 
          <li><a href="#">Column A #2</a></li> 
          <li><a href="#">Column A #3</a></li> 
          <li><a href="#">Column A #4</a></li> 
          <li class="last"><a href="#">Column A #5</a></li> 
        </ul> 
        <ul> 
          <li><a href="#">Column B #1</a></li> 
          <li><a href="#">Column B #2</a></li> 
          <li><a href="#">Column B #3</a></li> 
          <li><a href="#">Column B #4</a></li> 
          <li class="last"><a href="#">Column B #5</a></li> 
        </ul> 
      </div> 
    </li> 
    <li> 
      <a href="#">Banana</a> 
      <div class="dropdown"> 
        <ul> 
          <li><a href="#">Column A #1</a></li> 
          <li><a href="#">Column A #2</a></li> 
          <li><a href="#">Column A #3</a></li> 
          <li><a href="#">Column A #4</a></li> 
          <li class="last"><a href="#">Column A #5</a></li> 
        </ul> 
        <ul> 
          <li><a href="#">Column B #1</a></li> 
          <li><a href="#">Column B #2</a></li> 
          <li><a href="#">Column B #3</a></li> 
          <li><a href="#">Column B #4</a></li> 
          <li class="last"><a href="#">Column B #5</a></li> 
        </ul> 
      </div> 
    </li> 
    <li> 
      <a href="#">Cherry</a> 
      <div class="dropdown"> 
        <ul> 
          <li><a href="#">Column A #1</a></li> 
          <li><a href="#">Column A #2</a></li> 
          <li><a href="#">Column A #3</a></li> 
          <li><a href="#">Column A #4</a></li> 
          <li class="last"><a href="#">Column A #5</a></li> 
        </ul> 
        <ul> 
          <li><a href="#">Column B #1</a></li> 
          <li><a href="#">Column B #2</a></li> 
          <li><a href="#">Column B #3</a></li> 
          <li><a href="#">Column B #4</a></li> 
          <li class="last"><a href="#">Column B #5</a></li> 
        </ul> 
      </div> 
    </li> 
    <li> 
      <a href="#">Durian</a> 
      <div class="dropdown"> 
        <ul> 
          <li><a href="#">Column A #1</a></li> 
          <li><a href="#">Column A #2</a></li> 
          <li><a href="#">Column A #3</a></li> 
          <li><a href="#">Column A #4</a></li> 
          <li class="last"><a href="#">Column A #5</a></li> 
        </ul> 
        <ul> 
          <li><a href="#">Column B #1</a></li> 
          <li><a href="#">Column B #2</a></li> 
          <li><a href="#">Column B #3</a></li> 
          <li><a href="#">Column B #4</a></li> 
          <li class="last"><a href="#">Column B #5</a></li> 
        </ul> 
      </div> 
    </li> 
    <li> 
      <a href="#">Elephant</a> 
      <div class="dropdown"> 
        <ul> 
          <li><a href="#">Column A #1</a></li> 
          <li><a href="#">Column A #2</a></li> 
          <li><a href="#">Column A #3</a></li> 
          <li><a href="#">Column A #4</a></li> 
          <li class="last"><a href="#">Column A #5</a></li> 
        </ul> 
        <ul> 
          <li><a href="#">Column B #1</a></li> 
          <li><a href="#">Column B #2</a></li> 
          <li><a href="#">Column B #3</a></li> 
          <li><a href="#">Column B #4</a></li> 
          <li class="last"><a href="#">Column B #5</a></li> 
        </ul> 
      </div> 
    </li> 
  </ul> 
</div>

jQuery JavaScript

$("#navbar > ul > li > a").mouseover(function(){
  $("#navbar > ul > li > a").each(function(){
    $(this).removeClass('over open');
    $(this).next().removeClass('over').hide();
  });

  $(this).addClass('over open');
  $(this).next().show();
});
$("#navbar > ul > li > a").mouseout(function(){
  var a = $(this);
  a.removeClass('over');
  setTimeout(function(){
    if (a.hasClass('over') || a.next().hasClass('over')) return;
    a.removeClass('open');
    a.next().hide();
    }, 1000);
});
$("#navbar > ul > li > div.dropdown").mouseover(function(){
  $(this).addClass('over');
});
$("#navbar > ul > li > div.dropdown").mouseout(function(){
  var a = $(this);
  a.removeClass('over');
  setTimeout(function(){
    if (a.hasClass('over') || a.prev().hasClass('over')) return;
    a.prev().removeClass('open');
    a.hide();
    }, 1000);
});

Demonstration

This presented a couple of problems because, similar to an issue touched on in my last clog, the widgets needed to be inserted dynamically and that’s usually easier said than done. After a little bit of digging into how the widgets function, I was able to make them seemingly load normally on-the-fly.

Dynamic Facebook Share Button

Facebook share buttons are created in a couple of pieces. I started with the default widget code supplied by Facebook:

<a type="button_count" name="fb_share"
  href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Understanding how to make this work dynamically first means understanding what exactly this code does. The <a> tag is clearly a link to Facebook’s share service where users can submit our page. The <script> tag loads a JavaScript object named FB.Share.

Failed Insertion

If you were to try inserting these bits of code dynamically, you’d discover in no time flat that it just won’t work. For example, this might look like a good idea, but it’s useless:

$("#somediv").append('<a type="button_count" name="fb_share" '+
  'href="http://www.facebook.com/sharer.php">Share</a>');
$("#somediv").append('<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" '+
  'type="text/javascript"></script>');

And you may even try it a little more manually by directly modifying the DOM:

a = document.createElement('a');
a.type='button_count';
a.name='fb_share';
a.href='http://www.facebook.com/sharer.php';
a.innerHTML = 'Share';
document.getElementById('somediv').appendChild(a);

s = document.createElement('script');
s.type='text/javascript';
s.src='http://static.ak.fbcdn.net/connect.php/js/FB.Share';
document.getElementById('somediv').appendChild(s);

But you’ll be disappointed by the results. A working solution required a little more digging.

Successful Buttonization

I opened Facebook’s JavaScript file and started sniffing around. Their code is designed to initialize all buttons on the page just once, which makes perfect sense. So the solution is to add the <a> tag as per the above but then manually force FB.Share to re-execute, thus turning our dynamically added link into a button. The required function call is rather simple:

if (typeof(FB.Share) != 'undefined') {// make sure it exists
  // FB.Share.onFirst();
  // *** UPDATE: 17 Aug 2011 - Thanks to zr0ck who informed
  // FB has modified their Share script ***
  // FB.Share.onFirst() no longer exists; you must now instead call:
  FB.Share.renderPass();
}

Just execute that after you’ve inserted your <a> link and it’ll become a pretty Facebook button.

Multiple Buttons Per Page

The above solution works splendidly, assuming that you use it on a URL specific to the content you’re sharing because FB.Share will by default use the address of the current page when adding to the user’s wall. However, if you are on a listing page where there are multiple content posts and the URL is not specific to any one of them (e.g., http://videosift.com), then every dynamic button you add will reference the same address.

Facebook provides a straightforward method for you to specify an alternate URL than the current one, which is to add a u variable to the query string of the link:

<a type="button_count" name="fb_share"
  href="http://www.facebook.com/sharer.php?u=SOMEURL">

However that method doesn’t work with our dynamic buttonizing for whatever reason. A little more sniffing through the FB.Share code reveals exactly how it determines what URL to use:

FB.Share {
//...
getUrl:function(a){return a.getAttribute('share_url')||window.location.href;}
//...
}

Aha- it checks for an attribute named share_url. So all we have to do is add that attribute to our link et voila, we’re in business!

<a type="button_count" name="fb_share"
  href="http://www.facebook.com/sharer.php" share_url="SOMEURL">

Dynamic Tweetmeme Retweet Button

Fortunately, the retweet button was much less involved than the FB share button, but also require just a little bit of digging. As described on tweetmeme’s widget page, the following is the code you’d typically want to use on a web page:

<script type="text/javascript">
tweetmeme_url = 'http://yoururl.com';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

As with the FB widget, attempting to insert this code into the DOM on-the-fly just results in failure. (I’ll spare you the sample broken code.) So I cracked open the button’s js code and investigated how it worked.

It turns out tweetmeme doesn’t use a lot of JS tomfoolery to make their widgets work. Instead, they insert a simple <iframe> and allow that to do all work, which makes it easy for us because all we have to do is insert the same type of iframe and we’re in business. So we did something like the following and it worked like a charm:

$("#somediv").append('<iframe frameborder="0" scrolling="no" height="61" width="50"
  src="http://api.tweetmeme.com/button.js?url='+SOMEURL+'"></iframe>');

Enjoy!

Overview

At VideoSift we have always made available the embed code for every video on the site. Until now, the provided code has just been the raw <object> and <embed> tags as you would acquire directly from the video host, but we wanted to provide a much more attractive embed.

We opted to achieve such a thing by providing users with a <script> tag that builds the fancy new widget into the DOM of the host page. Initially, the plan was to just generate a pretty simple DOM structure wrapped around a video, but it evolved from there to include:

• the ability to optionally start out as a thumbnail image that when clicked will expand into the full widget
• a functional vote button that would remotely cast an up-vote for logged in members
• a brief, scrollable listing of comments on the video

There were a few interesting issues that needed to be resolved along the way:

• Where on the host page should the widget be inserted?
• What happens if the host page contains multiple widget <script> tags?
• How should we dynamically load the widget in comments on VideoSift?
• How should we cast votes on remote host pages that need to be posted to VideoSift?

Inserting the Widget

When it came to inserting the widget into the DOM of the host page, the desired location was obvious: immediately adjacent to the <script> tag itself. Really the only issue was to locate the appropriate <script> tag.

We start by searching for the target node in the DOM tree for all nodes with tagName ‘script’ and examine their “src” attribute:

function createWidgetDiv() {
  scripts = document.getElementsByTagName('script');
  for (i=0; i < scripts.length; ++i) {
    if (/videosift\.com\/widget\.js\?.*video=123456(&|$)/.test(scripts[i].src)) {
      widgetdiv = document.createElement('div');
      scripts[i].parentNode.insertBefore(widgetdiv, scripts[i].nextSibling);
      break;
    }
  }

// now we can start inserting our widget contents into widgetdiv
}

Name Collision

At this point we discover another issue. How are we sure this <script> tag belongs to the widget that’s currently executing? The user could have inserted onto the host page two <script> embeds. We handle the issue of there being two different embeds on the same page by checking if the <script> src URL contains the video ID that we’re currently executing with. We do not, however, handle the situation where a user inserts two embeds for the exact same video ID. In that case, both the first and the second widget will insert themselves after the first <script> tag because it’s the first one encountered in the DOM tree.

This brings us to the related issue of variable and function name collisions shared by multiple embedded scripts. With just a single widget on the page, we wouldn’t have to worry about naming convention, but let’s say we have two widgets with video IDs 111 and 222 both on the same host page. When the widget for 111 executes, everything will be fine, but when 222 executes, it will define a new createWidgetDiv(). If after that happens 111 calls createWidgetDiv() again, it will then be calling that defined by 222.

One way to fix this is to define the functions with a video ID specific suffix, e.g., createWidgetDiv_111() and createWidgetDiv_222(). This is not ideal, however, because considering again the situation where the host page contains two widgets with the same video ID, there will again be overlap. So, I opted to append a random number to every important function and variable name like createWidgetDiv_3948717().

Dynamic <script> Loading

So far, so good. At this point a page can load with any number of widgets already embedded in the HTML, but uh oh- what happens if we try to insert a <script> tag into a page that’s already been loaded? When we decided to modify VideoSift comment listings to allow just our special <script> tag, we needed to adjust how we loaded it. Here’s a very simple example trying to insert a <script> tag with jQuery:

$("#some_div").html('<script type="text/javascript"
  src="http://videosift.com/widget.js?video=111"></script>');

This won’t work because the <script> tags won’t be parsed. (This is not just jQuery-specific.) The fix, unfortunately, is not an issue that can be dealt with in the widget itself, but by the host page that is loading the script. Rather than attempting to insert a script tag, you’ll have to manually manipulate the DOM to insert a node with tagName ‘script’. You could use a function along these lines:

function dynScript(src) {
  script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  return script;
}

// insert it somewhere
$("#some_div").append(dynScript('http://videosift.com/widget.js?video=111'));

Cross-Domain Scripting and XMLHttpRequest

The final piece of the puzzle was getting the vote button to function when the widget is hosted on a remote domain. For security, XMLHttpRequest/Ajax requests are disallowed from communicating with scripts on foreign websites.

We clearly want to allow VideoSift users to cast votes for videos embedded on external sites, so we used a common workaround for the cross-domain restriction and inserted a dynamic script tag into the DOM specifying the vote URL as the <script> src attribute.

If that sounds familiar, yep, you guessed it. We reuse the dynScript() function for this purpose and it works splendidly. For example, we can do something like this:

$("#vote_btn").click(function(){
  // normally we'd make an Ajax request here, but not this time
  $(body).append(dynScript('http://videosift.com/widget_vote.js?video=111'));
  return false;
});

And the loaded script can take care of the post-processing for the host page that would normally happen in the Ajax callback. For example:

if (voting_failed)
  alert('Could not cast your vote!');
else
  updateVoteButton();

In Conclusion

Well, that’s it for my very first clog post. I hope most of what I wrote up there isn’t too vague to be appreciated by anyone who might be looking for some guidance or answers. My intent was to provide in broad strokes a breakdown of the wrinkles encountered on this project and how they were ironed out.

Here is an example of the widget in action.

The embed code for this widget follows:

<script type="text/javascript"
  src="http://videosift.com/widget.js?video=170447&width=540&comments=15&minimized=1"></script>