Full Screen Gallery with Supersized and video slides

2016-01-26T00:00:00+00:00

I was recently looking to build a full screen image and video gallery for our client Mission Blue. Something similar to the Google Maps interface you can see in the screenshot below:

After scouring the Internet to find a suitable jQuery plugin I finally decided on Supersized, Full screen background slideshow plugin for jQuery.

After downloading the library, include it on the page:

<link href="/wp-content/plugins/wp-supersized/theme/supersized.shutter.css?ver=4.2.2" id="supersized_theme_css-css" media="all" rel="stylesheet" type="text/css"></link>
<script src="/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4" type="text/javascript"></script>
<script src="/wp-content/plugins/wp-supersized/js/jquery.easing.min.js?ver=1.3" type="text/javascript"></script>
<script src="/wp-content/plugins/wp-supersized/js/jquery.easing.compatibility.js?ver=1.0" type="text/javascript"></script>
<script src="/wp-content/plugins/wp-supersized/js/jquery.animate-enhanced.min.js?ver=0.75" type="text/javascript"></script>
<script type='text/javascript' src='/wp-content/plugins/wp-supersized/js/supersized.3.2.7.min.js?ver=3.2.7'></script>

Basic functionality

Let’s create a variable that will hold all the images in the slideshow:

var images = [];
images.push({
  type: 'IMAGE',
  image: 'img1.jpg',
  title: 'Image 1',
  thumb: 'img1_thumb.jpg',
  url: 'https://www.endpointdev.com'
});
images.push({
  type: 'YOUTUBE',
  image: 'screenshot1.jpg',
  title: 'YouTube slide',
  videoid: 'abc12345678',
  thumb: 'screenshot1_thumb.jpg',
  url: 'https://www.youtube.com/watch?v=abc12345678'
});

Let’s initialize Supersized:

jQuery.supersized({
  slideshow: 1,
  autoplay: 0,
  min_width: 0,
  min_height: 0,
  vertical_center: 1,
  horizontal_center: 1,
  fit_always: 0,
  fit_portrait: 1,
  fit_landscape: 0,
  slide_links: 'blank',
  thumb_links: 1,
  thumbnail_navigation: 1,
  slides: images,
  mouse_scrub: 0
});

<div id="thumb-tray" class="load-item">
  <div id="thumb-back"></div>
  <div id="thumb-forward"></div>
</div>
<div id="slidecaption"></div>

Customizing the screen image size

I didn’t want to have the full screen image as it was a little overwhelming for the user. I wanted the black bars just like in the Google interface. Supersized allows for easy customization. This CSS did the trick:

#supersized, #supersized li {
  width: 70% !important;
  left: 0 !important;
  right: 0 !important;
  top: 1px !important;
  margin:auto;
}

Introducing video (YouTube) slides

First, I added the Youtube API:

<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>

Then I added a couple of CSS styles:

#supersized .player {
  margin: auto;
  display: block;
}

Finally, I went into the Supersized library source and modified it. To allow for the video slides to appear, I added the new condition and the slide type ‘YOUTUBE’

base._renderSlide = function(loadPrev, options) {
  var linkTarget = base.options.new_window ? ' target="_blank"' : '';
  var imageLink = (base.options.slides[loadPrev].url) ? "href='" + base.options.slides[loadPrev].url + "'" : "";
  var slidePrev = base.el + ' li:eq(' + loadPrev + ')';
  var imgPrev = $('<img src="' + base.options.slides[loadPrev].image + '"/>');

  if (base.options.slides[loadPrev].type == 'YOUTUBE') {
    imgPrev.load(function () {
      var video = $('<div class="player" id="player'+ base.options.slides[loadPrev].videoid + '"></div>');
      video.appendTo(slidePrev);
      var player = new YT.Player('player' + base.options.slides[loadPrev].videoid, {
        height: 390,
        width: 640,
        videoId: base.options.slides[loadPrev].videoid
      });
    });// End Load
  }
  else {
    imgPrev.appendTo(slidePrev).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading ' + options['class']);

    imgPrev.load(function () {
      $(this).data('origWidth', $(this).width()).data('origHeight', $(this).height());
      base.resizeNow();// Resize background image
    });// End Load
  }
};

Final Result

This is how gallery looks with the customizations:

This is what a video slide looks like:

Hope you found this writeup useful!

Using jQuery Migrate plugin

2014-09-26T00:00:00+00:00

We all know these tricky situations, like introducing a new feature on top of old code, when it seems we’re about to step into a tedious swamp of workarounds and dirty hacks. Fortunately, jQuery Migrate plugin is here to make these situations easier, at least in JavaScript. So for any of you who wondered about a real-life example of using jQuery Migrate plugin I have one!

My task was to add an editable combomonster, oh sorry, combobox (even though editable comboboxes remind me of UX Frankenstein’s Monster, they are still requested a lot) to a rather old website built on jQuery v1.4.2.

I downloaded the most recent jQuery UI (at that time it was v1.10.4) and a very neat editable combobox component to go with it. It was expected that it wouldn’t work out of box with the rather outdated jQuery we had. It didn’t work and the page produced the following JavaScript error:

TypeError: t.cssHooks is undefined

...t(" ");f(i,function(e,i){t.cssHooks[i]={set:function(e,n){var a,o,r="";if("trans...

No problem, I grab the newer compatible jQuery v1.10.2 from the website and yield it into head in that particular page.

<% content_for  :head do %>
  javascript_include_tag "jquery-1.10.2.min.js"
  javascript_include_tag "jquery-ui-1.10.4.min.js"
  javascript_include_tag "jquery.editableselect.js"
<% end %>

There’s good news and bad news. Good - the old error is gone. Bad - there’s a new one:

TypeError: jQuery.browser is undefined

if (jQuery.browser.safari && document.readyState != "complete”)
function stretchbar(){
  /* the if block is for safari 4, it was disrupting the display on refresh. */
  if (jQuery.browser.safari && document.readyState != "complete")
    {
     setTimeout( arguments.callee, 100 );
     return;
   }

We have a lot of old components on that page and they fail to work with the new jQuery. Why? All versions of jQuery after v.1.9 are stripped of certain components that are not ‘core’ ones. jQuery offers a migration technique to restore deprecated and removed functionality using jQuery Migrate plugin so the older code could work. The plugin can be included with versions of jQuery as old as 1.6.4. However, the plugin is only required for version 1.9.0 or higher.

The section “Changes of Note in jQuery 1.9” explains the particular error I got. Finally, I downloaded jQuery Migrate plugin v1.2.1 (the most recent at the time) and put it after the script for jQuery:

<% content_for  :head do %>
  javascript_include_tag "jquery-1.10.2.min.js"
  javascript_include_tag "jquery-ui-1.10.4.min.js"
  javascript_include_tag "jquery.editableselect.js"
  javascript_include_tag "jquery-migrate-1.2.1.min.js"
<% end %>

Voila! The website gets an instant design boost with this brand new, sleek grey editable combobox:

jQuery Content Replacement with AJAX

2014-04-15T00:00:00+00:00

This is not a huge breakthrough, but it colored in some gaps in my knowledge so I thought I would share.

Let’s say you have a product flypage for a widget that comes in several colors. Other than some of the descriptive text, and maybe a hidden field for use in ordering one color instead of another, all the pages look the same. So your page looks like this (extremely simplified):

... a lot of boilerplate ...
<form id="order_item">
<input name="sku" type="hidden" value="WDGT-001-RED"/>
<input type="hidden"/>
</form>
... a lot more boilerplate ...

Probably the page is generated into a template based on a parameter or path segment:

http://.../app/product/WDGT-001-RED

What we’re going to add is a quick-and-dirty way of having your page rewrite itself on the fly with just the bits that change when you select a different version (or variant) of the same product. E.g.,

<select name="sku">
<option value="WDGT-001-RED">Cinnamon Surprise</option>
<option value="WDGT-002-BLK">Midnight Delight</option>
<option value="WDGT-003-YLW">Banana Rama</option>
</select>

The old-school approach was something like:

 $('select[name=sku]').change(function(){
   document.location.href = my_url + $(this).val();
 });

I.e., we’ll just send the browser to re-display the page, but with the selected SKU in the URL instead of where we are now. Slow, clunky, and boring!

Instead, let’s take advantage of the ability to grab the page from the server and only freshen the parts that change for the desired SKU (warning: this is a bit hand-wavy, as your specifics will change up the code below quite a bit):

// This is subtly wrong:
$('select[name=sku]').change(function(){
  $.ajax({
    async: false,
    url: my_url + $(this).val(),
    complete: function(data){
      $('form#order_item').html( $(data.responseText).find('form#order_item').html() );
    }
});

Why wrong? Well, any event handlers you may have installed (such as the .change() on our selector!) will fail to fire after the content is replaced, because the contents of the form don’t have those handlers. You could set them up all over again, but there’s a better way:

// This is better:
$('form#order_item').on('change', 'select[name=sku]',
  function(){
  $.ajax({
    async: false,
    url: my_url + $(this).val(),
    complete: function(data){
      var doc = $(data.responseText);
      var $form = $('form#order_item');
      var $clone = $form.clone( true );
      $clone.html(doc.find('form#order_item').html());
      $form.replaceWith($clone);
    }
  });

Using an “on” handler for the whole form, with a filter of just the select element we care about, works better—because when we clone the form, we copy its handler(s), too.

There’s room for improvement in this solution, because we’re still fetching the entire product display page, even the bits that we’re going to ignore, so we should look at changing the .ajax() call to reference something else—maybe a custom version of the page that only generates the form and leaves out all the boilerplate. This solution also leaves the browser’s address showing the original product, not the one we selected, so a page refresh will be confusing. There are fixes for both of these, but that’s for another day.

More jQuery confusion: hidden, disabled fields

2014-02-24T00:00:00+00:00

As you may have read in my earlier post, I have a proclivity for stumbling into oddball bits of jQuery behavior. (Maybe it’s not just me.)

Here’s another I discovered recently. I was debugging an odd AJAX bug in a form, one of those dynamically updating form widgets in a page:

 <select name="make">...</select>
 <select name="model">...</select>

where the first selector sends off an AJAX query to retrieve data to fill the second selector, and it in turn fires off a query to get data for the next, and so on down the line.

Squirreled away in the form was:

 <input type="hidden" name="limitation" disabled="disabled" value="">

Supposedly, this input was filled in to restrict the query on some pages, but not all. I think the original author’s intent was to put data in here as it became available, and to toggle the field’s disabled setting when it was pertinent to limit the query. (Mostly, it was pertinent when the second or third selector was firing off its AJAX query.)

However, a recent change to the code behind this AJAX query created a bug, because the “limitation” parameter was showing up where it wasn’t wanted. The AJAX call was assembling parameters “by hand” (as opposed to the .serialize() method, and that’s where the problem lies!).

<form>
<input type="hidden" name="secret" disabled="disabled" value="Sue Richards">
<input type="submit">
</form>

If you submit this form, the data received by the server won’t include the “secret” field. If you .serialize() it, likewise the data won’t include “secret”’s value. But if you build up the parameters “by hand”, e.g.,

var data = {};
data.secret = $('input[name=secret]').val();
...

And that’s the bug. The short answer is:

data.secret = $('input[name=secret]').not(':disabled').val();

because that will at least suppress the unwanted data from being transmitted.

Unbalanced HTML considered harmful for jQuery

2014-01-20T00:00:00+00:00

This isn’t earth-shattering news, but it’s one of those things that someone new to jQuery might trip over so I thought I’d share.

I had a bad experience recently adding jQuery to an existing page that had less than stellar HTML construction, and I didn’t have time nor budget to clean up the HTML before starting work. Thus, I was working with something much more complex than, but equally broken as what follows:

<table><tr><td>
<form>
</td></tr>
<tr><td>
<input type="text">
</form>
</td></tr></table>

The jQuery I added did something like this:

$('form input').css('background-color: red');

and of course, I was quite puzzled when it didn’t work. The pitfall here is that jQuery may or may not be able to handle misconstructed or unbalanced HTML, at least not as well as your average browser, which will shift things around internally until something makes sense to it. The minimal solution is to move the opening and closing “form” tags outside the table.

Using Google Maps and jQuery for Location Search

2014-01-16T00:00:00+00:00

Example of Google maps showing Paper Source locations.

A few months ago, I built out functionality to display physical store locations within a search radius for Paper Source on an interactive map. There are a few map tools out there to help accomplish this goal, but I chose Google Maps because of my familiarity and past success using it. Here I’ll go through some of the steps to implement this functionality.

Google Maps API Key

Before you start this work, you’ll want to get a Google Maps API key. Learn more here.

Geocoder Object

At the core of our functionality is the use of the google.maps.Geocoder object. The Geocoder converts a search point or search string to into geographic coordinates. The most basic use of the geocoder might look like this:

var geocoder = new google.maps.Geocoder();
//search is a string, input by user
geocoder.geocode({ 'address' : search }, function(results, status) {
  if(status == "ZERO_RESULTS") {
    //Indicate to user no location has been found
  } else {
    //Do something with resulting location(s)
  }
}

Rendering a Map from the Results

After a geocoder results set is acquired, a map and locations might be displayed. A simple and standard implementation of Google Maps can be executed, with the map center set to the geocoder results set center:

var mapOptions = {
  center: results[0].geometry.bounds.getCenter(),
  zoom: 10,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

Searching within a Radius

Next up, you may want to figure out how to display a set of locations inside the map bounds. At the time I implemented the code, I found no functionality that automagically did this, so I based my solution off of a few references I found online. The following code excerpt steps through the process:

//search center is the center of the geocoded location
var search_center = results[0].geometry.bounds.getCenter();

//Earth's radius, used in distance calculation
var R = 6371;

//Step through each location
$.each(all_locations, function(i, loc) {
  //Calculate distance from map center
  var loc_position = new google.maps.LatLng(loc.latitude, loc.longitude);
  var dLat  = locations.rad(loc.latitude - search_center.lat());
  var dLong = locations.rad(loc.longitude - search_center.lng());
  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(locations.rad(search_center.lat())) *
    Math.cos(locations.rad(search_center.lat())) *
    Math.sin(dLong/2) * Math.sin(dLong/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var d = R * c;
  loc.distance = d;

  //Add the marker to the map
  var marker = new google.maps.Marker({
    map: map,
    position: loc_position,
    title: loc.store_title
  });

  //Convert distance to miles (readable distance) for display purposes
  loc.readable_distance = (google.maps.geometry.spherical.
    computeDistanceBetween(search_center, loc_position)*
    0.000621371).toFixed(2);
});

The important thing about this code is that it renders markers for all the locations, but a subset of them will be visible.

Figuring out which Locations are Visible

If you want to display additional information in the HTML related to current visible locations (such as in the screenshot at the top of this post), you might consider using the map.getBounds.contains() method:

var render_locations = function(map) {
  var included_locations = [];
  //Loop through all locations to determine which locations are contained in the map boundary
  $.each(all_locations, function(i, loc) {
    if(map.getBounds().contains(new google.maps.LatLng(loc.latitude, loc.longitude))) {
            _push(loc);
    }
  }

  // sort locations by distance if desired

  // render included_locations
};

The above code determines which locations are visible, sorts those locations by readable distance, and then those locations are rendered in the HTML.

Adding Listeners

After you’ve got your map and location markers added, a few map listeners will add more functionality, described below:

var listener = google.maps.event.addListener(map, "idle", function() {
  render_locations(map);
  google.maps.event.addListener(map, 'center_changed', function() {
    render_locations(map);
  });
  google.maps.event.addListener(map, 'zoom_changed', function() {
    render_locations(map);
  });
});

After the map has loaded (via the map “idle” event), render_locations is called to render the HTML for visible locations. This method is also triggered any time the map center or zoom level is changed, so the HTML to the left of the map is updated whenever a user modifies the map bounds.

Advanced Elements

Two advanced pieces implemented were the use of extending the map bounds and modifying listeners in a mobile environment. When it was desired that the map explicitly contain a set of locations within the map bounds, the following code was used:

var current_bounds = results[0].geometry.bounds;
$.each(locations_to_include, function(i, loc) {
  current_bounds.extend(loc_position);
});
map.fitBounds(current_bounds);

And in a mobile environment, it was desired to disable various map options such as draggability, zoomability, and scroll wheel use. This was done with the following conditional:

if($(window).width() < 656) {
  map.setOptions({
    draggable: false,
    zoomControl: false,
    scrollwheel: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    streetViewControl: false
  });
}

Conclusion

Of course, all the code shown above is just in snippet form. Many of the building blocks described above were combined to build a user-friendly map feature. There are a lot of additional map features – check out the documentation to learn more.

Pagination days are over? Infinite scrolling technique

2013-11-15T00:00:00+00:00

Love it or hate it, but the infinite scrolling technique became a big part of UX. Google Images use it, Flickr uses it, Beyonce’s official website uses it. Twitter, Tumblr and the Facebook feed have it as well. The technique allows users to seamlessly scroll through content. When the user reaches the end of the page new content will automatically load at the bottom.

In my opinion, it allows for a much more natural and immersive experience while viewing images or articles, much better than pagination or once popular image slideshow galleries. In the real life you don’t click on pagination links to get through your day, right?

To create the infinite scrolling page with images we will use the jQuery Infinite Scroll plugin and Masonry to lay out the images. Here is the demo of what we are going to accomplish. The code is below.

First step is to include the necessary scripts:

<script src="/javascripts/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/jquery.masonry.min.js" type="text/javascript"></script>
<script src="/javascripts/jquery.infinitescroll.min.js" type="text/javascript"></script>

Add the container element. The navigation element is a very important part that triggers the loading of the subsequent page. After the second page the page number will automatically increment to fetch the subsequent pages:

<div id="container"><% @images.each do |i| %>
    <div class="item"><img src="..."/></div><% end %>
</div><nav id="page-nav" style="display: none;">
  <a href="/?p=2"></a>
</nav>

Ready to init the infinite scrolling script:

$(function(){
    var container = $('#container');
    container.masonry({
       itemSelector: '.item'
     });

    container.infinitescroll({
      navSelector  : '#page-nav', 
      nextSelector : '#page-nav a',
      itemSelector : '.item',
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },

      function( newElements ) {
        var newElems = $( newElements ).css({ opacity: 0 });
          newElems.animate({ opacity: 1 });
          container.masonry( 'appended', $newElems, true );
      }
    );
  });

Once the user scrolls down to the bottom of the first page, the script will fetch the second page and filter out the new elements by the item selector. The controller action will look like this:

def list
  @images = Image.paginate(:page => params[:p] || 1, :per_page => 25)
end

Finally, we will add the styles to create a three-column layout and some nice animations to render the newly loaded items:

#container .item {
  width: 33%;
}
.transitions-enabled.masonry .masonry-brick {
  transition-property: left, right, top;
}
.transitions-enabled.masonry, .transitions-enabled.masonry .masonry-brick {
  transition-duration: 0.7s;
}

IE7 “Enhances” href Attributes of Links Added via innerHTML

2013-11-07T00:00:00+00:00

I ran into this issue the other day while testing a new feature for a client site. The code worked well in Chrome, Firefox, Safari and IE (8-11) but it blew up in IE7. The page was fairly straightforward—I was using jQuery and the excellent doT.js templating library to build up some HTML and add it to the page after the DOM had loaded. This content included several links like so:

    <a href="#panel1">More Info</a>
    <a href="#panel2">More Info</a>
    <a href="#panel3">More Info</a>

Each of the links pointed to their corresponding counterparts which had also been added to the page. The JavaScript code in question responded to clicks on the “More Info” links and used their href attribute as a jQuery selector:

$('.my-links').on('click', function(e) {
      e.preventDefault();
      var sel = $(this).attr('href');
      ...
    });

Links “Enhanced” By IE7

As I debugged in IE7, I determined that it was adding the fully qualified domain name to the links. Instead of “#panel2” the href attributes were set to “http://example.com/#panel2” which broke things—especially my jQuery selectors. Fixing the issue was straightforward at this point:

// fix hrefs in IE7 and 6
  if ( /^http/.test(href) ) {
    sel = sel.substr(href.indexOf('#'));
  }

When the href attribute begins with http, discard everything before the hash (#).

Digging Deeper

Although the problem had been solved, I was still curious as to why this was happening. While the .href property (e.g. myAnchor.href) of a link will return the entire domain in all browsers, getAttribute(‘href’) will return only the text of the attribute. I believe the $.attr() method from jQuery is using getAttribute() behind the scenes. For modern browsers, calling $.attr() or getAttribute() worked as I was expecting.

However IE 6 and 7 had different ideas about this:

Notice that the fully qualified domain name is prepended to the href attribute in the first example.

When links are added to the page via innerHTML, IE includes/prepends the full URL. However, when links are added to the page via the createElement function they remain unscathed.

The following screenshot demonstrates how Chrome and other modern browsers handle the same code:

These browsers happily leave the href attributes alone :)

You learn something new every day!

jQuery contents() method

2013-11-04T00:00:00+00:00

I had an interesting JavaScript challenge recently and came across a jQuery method that I hadn’t heard of before, so I wanted to share my experience. Given the following markup, I needed a way to hide all the text not inside span.highlighted elements:

<p>Here is some text. 
<span class="highlighted">Here is more text! </span>
Here is even more text! Here is some more un-wrapped text. 
<span class="highlighted">Here is another wrapped span.</span>
</p>

With standard CSS rules like visibility, display, and opacity, there’s not an easy way to hide only the unhighlighted text without additional HTML modifications. So, I set out to wrap the unhighlighted text in additional HTML elements dynamically, to produce the following markup from our example:

<p><span class="unhighlighted">Here is some text. </span>
<span class="highlighted">Here is more text! </span>
<span class="unhighlighted">Here is even more text! Here is some more un-wrapped text. </span>
<span class="highlighted">Here is another wrapped span.</span>
</p>

With the markup above, the CSS rules to hide the desired spans would look something like:

p span.unhighlighted { display: none; }
p span.highlighted { display: inline-block; }

The challenge was how to wrap the unwrapped text inside the paragraph without having any DOM elements to select? My first clumsy attempt was using regular expressions, which looked something like this:

var matches = $('p').html().match(/<span class="highlighted.*?"<.*?<\/span>/g);
var non_matches = $('p').html().split(/<span class="highlighted.*?">.*?<\/span>/);

var b = '';
for(var _i=0; _i<non_matches.length; _i++) {
  if(non_matches[i] != '') {
    b += '<span class="unhighlighted">' + non_matches[i] + '</span>';
  }
  if(matches[i] !== undefined) {
    b += matches[i];
  }
}
$('p').html(b);

In the code above, I create two arrays—one that includes the unhighlighted text and one that includes the highlighted spans and their content with a non-greedy regular expression. I incremented through these arrays and built HTML with alternating newly wrapped unhighlighted content and existing highlighted spans. At the end of the loop, the paragraph HTML is updated with the new HTML. Now, there are quite a few edge cases with this method which needed to be addressed and the bigger issue I came across was that the highlighted spans were being rewritten, so any important data tied to the overwritten highlighted spans was lost with the HTML update. I felt that this implementation was overcomplicated and went in search of something more simple.

jQuery contents()

Enter the jQuery.contents() method. This method returns the children nodes of an element (or elements) in an array form, including(!) text and comment nodes. The console output of the contents() method for our example paragraph might look like:

Example output from the contents() method.

This was just the tool I was looking for: I wanted a simple way to iterate through text and span elements from my existing paragraph, without replacing exising span elements. The following JavaScript shows incremental through the contents() array and wrapping text elements with the new markup:

var contents = $('p').contents();
for(var _i = 0; _i < contents.length; _i++) {
  if(contents[_i].nodeType == 3) { //conditional indicates match on TextNode
    var updated = '<span class="unhighlighted">' + $(contents[_i]).text() + '</span>';
    $(contents[_i]).replaceWith(updated); 
  }
}

I then have the ability to toggle the visibility of both the highlighted and unhighlighted spans for the desired functionality. I’ve been working with jQuery for a long time and was happy to browse through the documentation to find this little gem!

Fixed Navigation Bar: HTML, CSS, and JavaScript Breakdown

2013-09-02T00:00:00+00:00

Something that I’ve seen frequently these days on content rich sites are fixed navigation bars, or small abbreviated header in the form of a horizontal bar at the top of the screen that shows after a user has scrolled below the header. Here’s an example:

A live example of an abbreviated fixed navigation bar at the top of the articles at ABCNews.com. The background has a grey opaque layer for demonstration purposes only.

I recently implemented this functionality for H2O, and I’ll go through the tools needed to do this.

HTML Markup

First thing’s first, you need the HTML markup for this. The only tricky thing here is that the horizontal bar must be outside of any wrapping dividers on the page that are confining the content to a set width. For example, if your content is limited to 900 pixels in width, the horizontal bar markup must be outside that constraint. Here’s what the HTML might look like:

<div id="fixed_bar">
  <div class="wrapper">
    Links & content here.
  </div>
</div>

Note that in the above HTML, the “wrapper” div may be constraining the content width to match the remaining content, such as in the example above. This HTML may go at the beginning or end of the page HTML. I prefer to see it at the top of the page HTML. Another note is that other HTML elements may be used in place of the div, but I chose the div above because it defaults to a block element (an element where the CSS display default value is block).Finally, one more note here is that HTML5 elements can be used in place of the div as well (section or nav might make sense) if the site is HTML5 compliant.

CSS Settings

The secret to this interactive feature lies in the CSS settings. Here’s what the CSS for my example code above might look like:

body {
  margin: 0px;
  padding: 0px;
}
#fixed_bar {
  width: 100%;
  position: fixed;
  z-index: 100; //exceed z-index of other elements on the page
  display: none;
  background: transparent url(/images/fixed_bar.png) bottom repeat-x;
  top: 0px;
}
.wrapper {
  width: 900px;
  margin: 0px auto;
}

Here are the important bits of the CSS above:

The fixed positioning setting is what keeps the bar in one place as the user scrolls up and down (line 7).
The body must have margin and padding settings at 0px to ensure that the fixed bar is flush against the top of the screen (line 2 & 3).
The fixed bar spans the width of the browser, but in this case, the .wrapper element is constrained to 900 pixels wide (line 14).
The default state of the #fixed_bar element is none, which is hidden upon page load (line 9).
The background of the #fixed_bar can be a small image with a gradient to transparency, such as in the example above (line 10).

Scroll Event Listener

Finally, after the HTML and CSS markup is good to go, here’s what the interactive JavaScript (via jQuery) might look like:

var offset = 100; // some offset value for which when the header becomes hidden
jQuery(window).scroll(function() { //also an option: jQuery .on('scroll') method
  if(jQuery('#fixed_bar').is(':visible') && jQuery(window).scrollTop() < offset) {
    jQuery('#fixed_bar').fadeOut(200);
  } else if(!jQuery('#fixed_bar').is(':visible') && jQuery(window).scrollTop() > offset) {
    jQuery('#fixed_bar').fadeIn(200);
  }
});

The jQuery above checks for two scenarios:

a) If the #fixed_bar div is visible and the scroll position is less than the offset, fade the #fixed_bar div to a hidden state.
b) If the #fixed_bar div is not visible and the scroll position is greater than the offset, fade the #fixed_bar div to a visible state.

These two use cases will toggle the visibility of the fixed bar to a hidden and visible state. With these combined elements of HTML, CSS, and jQuery & JavaScript, a nice user interactivity feature adds to the usability of the site by providing valuable links and content as the user scrolls down the page.

Paper Source Case Study with Google Maps API

2013-03-29T00:00:00+00:00

Recently, I’ve been working with the Google Maps API for Paper Source, one of our large Interchange clients with over 40 physical stores throughout the US.

On their website, they had previously been managing static HTML pages for these 40 physical stores to share store information, location, and hours. They wanted to move in the direction of something more dynamic with interactive maps. After doing a bit of research on search options out there, I decided to go with the Google Maps API. This article discusses basic implementation of map rendering, search functionality, as well as interesting edge case behavior.

Basic Map Implementation

In its most simple form, the markup required for adding a basic map with markers is the shown below. Read more at Google Maps Documentation.

HTML

<div id="map"></div>

CSS

#map {
  height: 500px;
  width: 500px;
}

JavaScript

//mapOptions defined here
var mapOptions = {
  center: new google.maps.LatLng(40, -98),
  zoom: 3,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

//map is the HTML DOM element ID where it will be rendered
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

//all locations is a JSON object representing locations,
//where each location has a latitude and longitude
$.each(all_locations, function(i, loc) {
  var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(loc.latitude, loc.longitude)
  });
})

Building Search Functionality

Next up, I needed to build out search functionality. Google has its own geocoder to allow address searches. Here is the basic markup for running a search:

var geocoder = new google.maps.Geocoder();
//search is a variable representing the user search, such as a zip code, city name, or state name
geocoder.geocode({ 'address' : search }, function(results, status) {
  var search_center = results[0].geometry.bounds.getCenter();

  var mapOptions = {
    center: search_center,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  $.each(all_locations, function(i, loc) {
    var marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(loc.latitude, loc.longitude)
    });
  })
}

In the above code, the search term is passed into the Geocoder object and a map with all locations marked is rendered. To determine which markers are in the visible map boundaries, the following map.getBounds().contains() method would be leveraged:

var visible_locations = [];
$.each(all_locations, function(i, loc) {
  if(map.getBounds().contains(new google.maps.LatLng(loc.latitude, loc.longitude))) {
    visible_locations.push(loc);
  }
});
//render visible locations to the left of the map

One final step here is to add a listener to the map, so that visible locations are updated when the user zooms in and out. This is accomplished with the following listener:

google.maps.event.addListener(map, 'zoom_changed', function() {
  //call method to rerender visible locations
});

Handling Zero Results

What happens if your Geocoder object can’t find the address? A simple conditional can be used:

geocoder.geocode({ 'address' : search }, function(results, status) {
  if(status == "ZERO_RESULTS") {
    //notify customer that no results have been found
  } else {
    //got results, render location
  }
}

Calculate and Sort by Distance

The next layer of logic I needed to add was the ability to determine the distance between the search address and sort the results by distance. To calculate distance, I did some research and settled on the following code:

var R = 6371;
$.each(all_locations, function(i, loc) {
  var loc_position = new google.maps.LatLng(loc.latitude, loc.longitude);
  var dLat  = locations.rad(loc.latitude - search_center.lat());
  var dLong = locations.rad(loc.longitude - search_center.lng());

  //calculate spherical distance between search position and location
  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
  Math.cos(locations.rad(search_center.lat())) *
    Math.cos(locations.rad(search_center.lat())) *
    Math.sin(dLong/2) * Math.sin(dLong/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var d = R * c;
  loc.distance = d;

  //convert distance to miles
  loc.readable_distance =
    (google.maps.geometry.spherical.computeDistanceBetween(search_center, loc_position) *
    0.000621371).toFixed(2);
});

To sort the locations by distance, I leverage jQuery sort:

var sort_by_distance = function(obj) {
  return obj.sort(function(a, b) {
    if(a.distance > b.distance) {
      return 1;
    } else {
      return -1;
    }
  })
};
var sorted_locations = sort_by_distance(all_locations);

Adjust Map Boundaries to Include Specific Markers

Another interesting use case I needed to handle was forcing the map to zoom out to include stores within 100 miles if there was nothing in the initial map boundaries, e.g.:

The search for “27103” doesn’t return any nearby stores, so the map is extended to include stores within 100 miles.

To accomplish this functionality, I added a bit of code to extend the map boundaries:

geocoder.geocode({ 'address' : search }, function(results, status) {
  var search_center = results[0].geometry.bounds.getCenter();

  var mapOptions = {
    center: search_center,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var current_bounds = results[0].geometry.bounds;

  $.each(all_locations, function(i, loc) {
    var loc_position = new google.maps.LatLng(loc.latitude, loc.longitude);
    var dLat  = locations.rad(loc.latitude - search_center.lat());
    var dLong = locations.rad(loc.longitude - search_center.lng());

    //calculate spherical distance between search position and location
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(locations.rad(search_center.lat())) *
      Math.cos(locations.rad(search_center.lat())) *
      Math.sin(dLong/2) * Math.sin(dLong/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;
    loc.distance = d;

    //convert distance to miles
    loc.readable_distance =
      (google.maps.geometry.spherical.computeDistanceBetween(search_center, loc_position) *
      0.000621371).toFixed(2);

    var marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(loc.latitude, loc.longitude)
    });

    if(loc.readable_distance < 100) {
      current_bounds.extend(loc_position);
    }
  });

  //Google map method to fit map boundaries to desired boundaries
  map.fitBounds(current_bounds);
}

Disable Scroll and Zoom on Mobile-Sized Devices

One final behavior needed was to disable map zooming and scrolling on mobile devices, to improve the usability on mobile/touch interfaces. Here’s how this was accomplished:

var options_listener = google.maps.event.addListener(map, "idle", function() {
  if($(window).width() < 656) {
    map.setOptions({
      draggable: false,
      zoomControl: false,
      scrollwheel: false,
      disableDoubleClickZoom: true,
      streetViewControl: false
    });
  }
  google.maps.event.removeListener(options_listener);
});

Conclusion

With all this code, the final location search functionality includes:

Basic United States map rendering to display all physical store locations.
Search by location which shows stores within 100 miles, and allows users to zoom in and out to adjust their search. Search lists results sorted by distance.
“Saved” or “Quick” searches by states, which displays all physical stores by state.
Adjustment of mobile display map options.

Data binding in web applications

2013-03-06T00:00:00+00:00

Ever since JavaScript was introduced the world of web programming has constantly been visited by creative minds, ready to solve burning problems web developers were experiencing.

Navigating through some of the oldest web-dev articles, we still can feel the pain of manipulating the DOM, the-vanilla-way and creating ever so clever hacks to make the code work on all of the web browsers.

Then, the JS-frameworks epidemy started to disseminate. As web developers—we started to have some powerful tools. The productivity of average nerdy Joe raised immediately as he started using Prototype.js, Mootools or jQuery.

Evolution of UI programming for browsers

And so was the start of our global evolution, towards making the Web—our main means of interacting with users. Few with big enough imagination were already seeing HTML, CSS & JS as the future standard of creating user interfaces for data-rich applications. Of course, there were toolkits like ExtJS which aimed at nothing but this—but who would have known back then, that we will be able to build apps for smartphones the way we are building ones for the web?

I have my little observation in life — all hot stuff in the world of technology, has their phases. That is:

they don’t exist, but the problems they solve do and they are painful
they show up, and there is massive excitement
people discover new pains brought on by these solutions
next pain and the beginning of the “next big thing”

At the beginning it was painful to write all the vanilla JS code without shooting yourself in your own foot (well let’s just say it—JS is Pandora’s Box of pain). Then you realize you’ve got your sweet & cool jQuery with which you can rapidly impress your boss/clients/friends.

Your next surprise is that jQuery isn’t enough—ever wondered why frameworks like Backbone.js were created?

Data binding

Here is the challenge for you: write GMail web interface clone using just jQuery. Here is the spoiler: you’d get lost in managing your app’s state—and syncing UI to reflect it. In fact—even small todo app in vanilla jQuery could end up being quite complicated. That’s just not the way other folks are dealing with UI programming. A long time ago they were—but they got smarter. We can learn from their mistakes.

When I was beginning my journey into the world of professional programming, I was given a job of creating small business app with C# and Windows Forms. Despite the fact that in the world of desktop apps you have to be mindful of much more things than in the web/browsers world (like updating your UI only on the main thread), the whole experience was pretty much the same as with vanilla jQuery:

create inputs
subscribe to its events
write the code that updates inner state based on the state of those inputs/controls

This quickly gets very cumbersome as the needs grows. You could have a requirement that one set of inputs is dependent on another, which results in hours of coding and more hours in debugging.

The way smart devs are tackling this issue is called data binding. This simply means that you tell specific portion of UI to be bound to some value from your business layer.

One nice example of the framework that employs data binding is Apple’s Cocoa. The XCode even has nice visual tools to bind controls values with the data model. Another example of the framework that uses data binding extensively is WPF (Windows Presentation Foundation). The concept widely used there is the MVVM pattern (Model-View-ViewModel). Which basically says that you have your view model object and UI which is bound to the view model and all you have to do is to manage the view model.

That’s the core concept here: managing objects is much easier than managing UI

Data binding on web

As the need came with more and more amazing web apps—we now have quite a nice choice when it comes to employing data binding:

Angular.js

Angular.js is one of the most impressive front-end JS frameworks there are. It has view templates mechanism allowing you to specify your binding statements directly there.

Ember.js

Ember.js gains popularity every day. Just like Angular.js, it has its own nice templating language (handlebars) which allows you to have your binding statements in the markup too.

Knockout.js

If you don’t want to use any of those frameworks, that’s a great library that implements just the data binding part.

It uses the concept I described before: the MVVM pattern. You are simply defining your view model and telling your UI where it has to get values from and that’s it.

Backbone.js

But what if you’d like to use Backbone.js? It’s true that it’s amazing and is one neat piece of technology you can use to build your next ‘cool app’. There is one caveat though: you have to set up all the niceties that comes along with Angular.js or Ember.js yourself, including all the sweetness of data binding.

Backbone.js + Knockout.js

Here is a simple way of using Knockout.js with Backbone.js:

for every Backbone.js view, define complementary view model
put ‘ko.applyBindings’ at the end of your ‘render’ method
do not use any logic in your view templates—rely solely on data binding

So for example:

# app/views/photos.coffee

module.exports = class PhotosView extends Backbone.View
   template: require "./templates/photos/index"

   initialize: () ->
       @view = new PhotosViewModel()
       @render()

   render: () ->
       $(@el).html(@template())
       ko.applyBindings(@view, @el)

   setData: (photos) =>
       @view.photos(photos)

class PhotosViewModel
   constructor: ->
       @photos = ko.observableArray []

# app/views/templates/photos/index.eco

<ul data-bind="foreach: photos">
   <li><img data-bind="attr: {src: $data.get('url')}"/></li>
</ul>

Now—with this, you can manipulate the photos array however you like, and the UI will get auto-updated on its own. But this idea shines the most when it comes to implementing forms with it. Take a look at the following example:

# app/views/company.coffee

module.exports = class EditCompanyView extends Backbone.View
   template: require "./templates/companies/edit"

   initialize: () ->
       @view = new EditCompanyViewModel()
       @render()

   render: () ->
       $(@el).html(@template())
       ko.applyBindings(@view, @el)

   setData: (company) =>
       @view.company(company)

class EditCompanyViewModel
   constructor: ->
       # let’s instantiate it with default company for bindings to work
       @company = ko.observable(new Company())
       @companyName = ko.computed
           read: => @company.get('name')
           write: (value) => @company.set('name': value)
       @companyState = ko.computed
           read: => @company.get('state')
           write: (value) => @company.set('state': value)
       @companyWebsite = ko.computed
           read: => @company.get('url')
           write: (value) => @company.set('url': value)
       @saveCompany = () =>
           @company.save()

# app/views/templates/companies/edit.eco

<form data-bind="submit: saveCompany">Name:
   <input data-bind="value: companyName"/>
   State:
   <input data-bind="value: companyState"/>
   Website:
   <input data-bind="value: companyWebsite"/>

   <button type="submit">Submit</button>
</form>

Ghost Table Cells in IE9

2013-02-08T00:00:00+00:00

What’s this about ghosts?

I recently came across an arcane layout issue in my work on a redesigned client site. The problem was specific to Internet Explorer 9 (IE9). The related CSS styles had been well tested and rendered consistently across a variety of browsers including IE7 and 8. Everything was fine and dandy until some new content was introduced into the page for a “Quickview” feature. While all of the other browsers continued to behave and render the page correctly, the layout would break in random and confusing ways in IE9.

The following screenshots compare the correct layout with an example of the broken layout in IE9.

Correct grid layout:

Broken layout in IE9:

The Stage

The following is a list of the factors at work on the page in question:

Internet Explorer 9
Browser mode: IE9, Document mode: IE9 standards
Some content manipulation performed via JavaScript (and jQuery in this case)
Lots of table cells

Debugging

The page included a list of products. The first “page” of twelve results was shown initially while JavaScript split the rest of the list into several additional pages. Once this JavaScript pagination function was complete, users could cycle through products in bite-sized pieces.

My first thought was that the issue may be related to CSS or JavaScript. I tested and debugged the styles thoroughly, tweaked styles and edited the underlying HTML structure to see if that might resolve the problem. I also tested the JavaScript and compared the original HTML with the parts which had been paginated via JavaScript. No dice.

When changes improved the paginated HTML, the bug appeared in the initial HTML. Other changes resolved the issue in the original HTML but it appeared in the paginated HTML.

I inspected the table with the Chrome Developer Tools console and also with the Developer Tools in IE9. There did not appear to be any differences between the rows which rendered properly and those which were skewed.

Bugging Out

At this point I began to research the issue and discovered it was a bug in the IE9 browser. A Microsoft forum post described the issue and included responses from Microsoft stating that it will not be fixed. It also included a sample application which demonstrated the issue. I tested and verified that the problem has been addressed and fixed in Internet Explorer 10, thankfully.

This explained the many, seemingly random ways I had seen the grid break. At times the cells were squished and pushed to the left. This was because the ghost cell had been added at the end of a row. Other times the cells were shifted to the right (as seen in the screenshot above). In this case, the ghost cell had been added to the middle of a row.

The Fix

Further digging revealed the the issue was related to whitespace between table cells. The solution was fairly simple: use a regular expression to remove all whitespace between the table elements:

$('#problem-table').html(function(i, el) {
  return el.replace(/>\s+</g, '><');
});

With all of the whitespace removed from the affected <table>, IE9 rendered the page correctly.

jQuery Performance Tips: Slice, Filter, parentsUntil

2013-02-04T00:00:00+00:00

I recently wrote about working with an intensive jQuery UI interface to emulate highlighting text. During this work, I experimented with and worked with jQuery optimization quite a bit. In the previous blog article, I mentioned that in some cases, the number of DOM elements that I was traversing at times exceeded 44,000, which caused significant performance issues in all browsers. Here are a few things I was reminded of, or learned throughout the project.

console.profile, console.time, and the Chrome timeline are all tools that I used during the project to some extent. I typically used console.time the most to identify which methods were taking the most time.
Caching elements is a valuable performance tool, as it’s typically faster to run jQuery calls on a cached jQuery selector rather than reselecting the elements. Here’s an example:

Slower	Faster
//Later in the code $('.items').do_something();	//On page load var cached_items = $('.items'); //Later in the code cached_items.do_something();

The jQuery .filter operator came in handy, and gave a bit of a performance bump in some cases.

Slower	Faster
$('.highlighted');	cached_items.filter('.highlighted');

jQuery slicing from a cached selection was typically much faster than reselecting or selecting those elements by class. If retrieving slice boundaries is inexpensive and there are a lot of elements, slice was extremely valuable.

Slower	Faster
cached_items.filter('.highlighted');	cached_items.slice(10, 100);

Storing data on elements was typically a faster alternative than parsing the id from the HTML markup (class or id). If it’s inexpensive to add data values to the HTML markup, this was a valuable performance tool. Note that it’s important to test if the jQuery version in use automatically parses the data value to an integer.

Slower	Faster
//given var slice_start = parseInt($('tt#r123') .attr('id') .replace(/^r/, ''));	//given var slice_start = $('tt#r123') .data('id');

Advanced jQuery selectors offered performance gain as opposed to jQuery iterators. In the example below, it’s faster to use selectors :has and :not combined rather than iterating through each parent.

Slower	Faster
$.each($('p.parent'), function(i, el) { //if el does not have any visible spans // do_something() });	$('p.parent:not(:has(span:visible))') .do_something();

The jQuery method parentsUntil was a valuable tool instead of looking at the entire document or a large set of elements. In the cases where the children were already defined in a subset selection, I used the parentsUntil method to select all parents until a specific DOM element.

Slower	Faster
$('#some_div p.parent:not(:has(span:visible))') .do_something();	subset_of_items .parentsUntil('#some_div') .filter(':not(:has(span:visible))') .do_something();

The best takeaway I can offer here is that it was almost always more efficient to work with as precise set of selected elements as possible, rather than reselecting from the whole document. The various methods such as filter, slice, and parentsUntil helped define the precise set of elements.

JavaScript-driven Interactive Highlighting

2013-01-25T00:00:00+00:00

An example of highlighted text, by sergis on Flickr

One project I’ve been involved in for almost two years here at End Point is the H2O project. The Ruby on Rails web application behind H2O serves as a platform for creating, editing, organizing, consuming and sharing course materials that is used by professors and their students.

One of the most interesting UI elements of this project is the requirement to allow highlighting and annotating text interactively. For example, when one reads a physical textbook for a college course, they may highlight and mark it up in various ways with different colors and add annotated text. They may also highlight a section that is particularly important for an upcoming exam, or they may highlight another section with a different color and notes that may be needed for a paper.

The H2O project has required support for digitizing interactive highlighting and annotating. Since individual text is not selectable as a DOM element, each word is wrapped into an individual DOM element that is selectable, hoverable, and has DOM properties that we can assign it. For example, we have the following text:

The cow jumped over the moon.

Which is manipulated to create individual DOM elements by word:

<span>The </span>

<span>cow </span>

<span>jumped </span>

<span>over </span>

<span>the </span>

<span>moon.</span>

And an id is assigned to each element:

<span id="e1">The </span>

<span id="e2">cow </span>

<span id="e3">jumped </span>

<span id="e4">over </span>

<span id="e5">the </span>

<span id="e6">moon.</span>

This markup is the foundation of digitizing highlighting behavior: it allows the starting and ending boundaries of a highlighted section to be selected. It also allows additional highlighting boundary elements to be created before and after highlighted text, as well as provide the ability to interactively toggle highlighting. Without this, we can’t easily parse or identify starting and ending points other than trying to determine it by other methods such as substring-ing text or using positioning details to identify the current word.

How do we Highlight?

With our example, I’ll describe the history of highlighting functionality that I’ve been involved in on the project. For this post, let’s say our desired emulated highlighted behavior is the following, where “cow jumped over” is highlighted in pink, and “over the” is highlighted in blue:

The cow jumped over the moon.

And our HTML markup may look like this to indicate the highlighted layers:

<span id="e1">The </span>

<span id="e2" class="pink">cow </span>

<span id="e3" class="pink">jumped </span>

<span id="e4" class="pink blue">over </span>

<span id="e5" class="blue">the </span>

<span id="e6">moon.</span>

Highlighting Iteration 1

One of the challenges with emulating highlighting is that a DOM element can only have one background color. We can’t easily layer pink and blue highlights over a specific word to give a layered highlighted effect. So in our example, the pink and blue highlighted words will show up fine, but no color combinations will show up because a node cannot have multiple background colors. During my first iteration on this functionality, I implemented behavior to track the history of our highlights per textual node. The following steps are an example of a use case that demonstrates the highlight overlap:

Starting from unhighlighted text, first a user highlights pink:

The cow jumped over the moon.

Next, a user highlights blue:

The cow jumped over the moon.

Next, a user unhighlights blue:

The cow jumped over the moon.

Finally, a user unhighlights pink:

The cow jumped over the moon.

Or another simple use case:

Starting from unhighlighted text, first a user highlights pink:

The cow jumped over the moon.

Next, a user highlights blue:

The cow jumped over the moon.

Next, a user unhighlights pink:

The cow jumped over the moon.

Finally, a user unhighlights pink:

The cow jumped over the moon.

Programmatically, this method required that a history of highlights be stored to each text node in the form of an array. When something was highlighted or unhighlighted, the array was manipulated to remove or add highlights and the last highlight applied to the text node. While this method was fairly simply to implement, it did not allow users to visualize the overlapping highlighted sections. This iteration was in place for over a year, but ultimately it did not appropriately demonstrate overlapped highlights.

Highlighting Iteration 2

In the next iteration, I attempted to implement a method that added opaque, absolute and fixed positioned elements underneath the text, similar to how one might see layers in Photoshop:

In the second iteration, additional colored & opaque nodes were created under the text to provide a layered highlighting effect.

Unhighlighted markup looked like this:

<span id="e1">
    <span class="highlights"></span>
    The 
</span>
<span id="e2" class="pink">
  <span class="highlights"></span>
    cow 
</span>
<span id="e3" class="pink">
    <span class="highlights"></span>
    jumped
</span>
<span id="e4" class="pink blue">
    <span class="highlights"></span>
    over
</span>
<span id="e5" class="blue">
    <span class="highlights"></span>
    the
</span>
<span id="e6">
    <span class="highlights"></span>
    moon.
</span>

And highlighted markup looked like this:

<span id="e1">
    <span class="highlights"></span>
    The 
</span>
<span id="e2" class="pink">
    <span class="highlights">
        <span class="highlight_pink"></span>
    </span>
    cow 
</span>
<span id="e3" class="pink">
    <span class="highlights">
        <span class="highlight_pink"></span>
    </span>
    jumped 
</span>
<span id="e4" class="pink blue">
    <span class="highlights">
        <span class="highlight_pink"></span>
        <span class="highlight_blue"></span>
    </span>
    over 
</span>
<span id="e5" class="blue">
    <span class="highlights">
        <span class="highlight_blue"></span>
    </span>
    the 
</span>
<span id="e6">
    <span class="highlights"></span>
    moon.
</span>

In the above markup, the following should be noted:

Each span.highlights node is absolutely positioned with a width and height matching the text node.
Each span.highlights span node (e.g. a node with the highlight_pink class) has a width and height of 100%, a background color defined in CSS, and an opacity that is scaled based on the number of highlights.
Whenever highlights are toggled in the text, the children nodes of span.highlights are manipulated (added or removed), as well as the opacity.

While this functionality provides a nice highlighted layering effect, absolute positioning is probably my least favorite thing to work with in cross browser development, and it did not always behave as expected. Specifically, IE and Chrome behaved somewhat as expected, but Firefox did not. This absolute positioning also caused problems with other absolutely positioned elements on the page.

Additionally, this markup was subject to cause significant performance issues. In one case, content with 44,000 words (and text nodes) alone caused performance implications, but additional highlighting layering caused extreme performance pain, to the point that Chrome would not load the content and the content would take more than 30 seconds to load in Firefox, so I went searching for a better solution.

Highlighting Iteration 3

Finally, in the most recent iteration, after identifying that Iteration 2 produced significant performance issues, after more research, I came across the jQuery xColor plugin. This plugin allows you to do mathematical operations on colors, such as combining colors. While the plugin itself only lets you combine 2 colors at one time, I created a method to combine multiple opaque layers:

$.each($('span.' + highlighted_class), function(i, el) {
    var current = $(el);
    var highlight_colors = current.data('highlight_colors');
    if(highlight_colors) {
      highlight_colors.push(hex);
    } else {
       highlight_colors = new Array(hex);
    }
    var current_hex = '#FFFFFF';
    var opacity = 0.4 / highlight_colors.length;
    $.each(highlight_colors, function(i, color) {
        var new_color = $.xcolor.opacity(current_hex, color, opacity);
        current_hex = new_color.getHex();
     });
     current.css('background', current_hex);
     current.data('highlight_colors', highlight_colors);
});

Step by step, the above code does, for each span node with a specific highlight:

Retrieve the array of highlights applied to that node, or create a new array with the new highlight color.
For each highlight, layer an opaque version of that highlight on top of the summation of colors.
Set the background to the final combination of layered highlights.
Store the new array of highlights applied to that node.

The markup is back to the original markup with no additional children elements per text node. Each highlighting interaction triggers a recalculation of the background color per text node based on the data stored to that node.

Conclusion

Significant limitations during this work have included the described performance limitations, as well as the inability to set multiple background images on a DOM element. Absolutely positioning, while valuable at times, proved to be quite challenging because of other absolute and fixed positioned elements on the page. In addition to emulating this highlighting behavior, there are additional interactive requirements included with the interactive highlighting.

Example of additional features needed in interactive highlighting tool.

Additional UI functional requirements include:

Functionality to show paragraph numbers, and hide all paragraph numbers when they have no visible children (Hint: advanced jQuery selectors are used here).
Ability to toggle display of unhighlighted text. The […] in the above image trigger the unhighlighted text in that section to display, while the left and right arrows trigger the unhighlighted text in that section to be hidden.
Ability to toggle display of highlighted text, similar to the toggle of unhighlighted text.
Ability to toggle between a “read” and “edit” mode for owners of the text, which allows for these users to interactively add additional highlights and dynamically modify the markup. In the edit mode, additional markup is added to identify these highlighted layers.
Ability to toggle display of the annotation. In the above image, clicking on the green asterisk toggles this display. No asterisk is shown if there is no annotation.
Ability for highlights to encompass HTML nodes that are not individual span elements. For example, highlighted sections may encompass multiple paragraphs and headers of <span> nodes, which is why simply adding a wrapping element to highlights will not work.

One might suggest we go to a better tool to manage content markup, but ultimately these types of markup tools do not provide the interactivity we seek, and they require that the end user have knowledge of HTML markup, which is not always the case.

Lazy AJAX

2012-12-18T00:00:00+00:00

Don’t do this, at least not without a good reason. It’s not the way to design AJAX interfaces from scratch, but it serves well in a pinch, where you have an existing CGI-based page and you don’t want to spend a lot of time rewriting it.

I was in a hurry, and the page involved was a seldom-used administration page. I was attempting to convert it into an AJAX-enabled setup, wherein the page would stand still, but various parts of it could be updated with form controls, each of which would fire off an AJAX request, and use the data returned to update the page.

However, one part of it just wasn’t amenable to this approach, or at least not quick-and-dirty. This part had a relatively large amount of inline interpolated (Interchange) data (if you don’t know what Interchange is, you can substitute “PHP” in that last sentence and you’ll be close enough.) I wanted to run the page back through the server-side processing, but only cared about (and would discard all but) one element of the page.

My lazy-programmer’s approach was to submit the page itself as an AJAX request:

$.ajax({
    url: '/@_MV_PAGE_@',
    data: {
        'order_date': order_date,
        'shipmode' : shipmode
    },
    method: 'GET',
    async: true,
    success: function(data, status){
        $('table#attraction_booklet_order').replaceWith(
            $(data).find('#attraction_booklet_order').get(0)
        );
        $('table#attraction_booklet_order').show();
    }
});

In this excerpt, “MV_PAGE” is a server-side macro that evaluates to the current page’s path. The element I care about is a rather complex HTML table containing all sorts of interpolated data. So I’m basically reloading the page, or at least that restricted piece of it. The tricky bit, unfamiliar to jQuery newcomers, lets you parse out something from the returned document much as you would from your current document.

Again, don’t do this without a reason. When I have more time, I’ll revisit this and improve it, but for now it’s good enough for the current needs.

Interactive Piggybak Demo Tour

2012-12-06T00:00:00+00:00

A new interactive tour of Piggybak and the Piggybak demo has been released at piggybak.org. Piggybak is an open source Ruby on Rails ecommerce framework built as a Rails 3 engine and intended to be mounted on existing Rails applications.

The tour leverages jTour (a jQuery plugin) and guides you through the homepage, navigation page, product page, cart and checkout pages, gift certificate page, advanced product option page, and WYSIWYG driven page. The tour also highlights several of the Piggybak plugins available and installed into the demo such as plugins that introduce advanced product navigation, advanced product optioning, and gift certificate functionality. Below are a few screenshots from the demo.

An interesting side note of developing this tour is that while I found many nice jQuery-driven tour plugins available for free or at a small cost, this jQuery plugin was the only plugin offering decent multi-page tour functionality.

Here is the starting point of Piggybak tour.	The Piggybak tour adds an item to the cart during the tour.
The Piggybak tour highlights advanced product navigation in the demo.	The Piggybak tour highlights features and functionality on the one-page checkout.

You can check out the interactive tour with your own Piggybak demo.

AJAX Queuing in Piggybak

2012-09-18T00:00:00+00:00

AJAX is inherently asynchronous; for the most part, this works fine in web development, but sometimes it can cause problem if you have multiple related AJAX calls that are asynchronous to eachother, such as the use case described in this article.

In Piggybak, a Ruby on Rails open source shopping cart module developed and maintained by End Point, the one page checkout uses AJAX to generate shipping options. Whenever state and zip options change, the shipping address information is sent via AJAX and valid shipping methods are returned and rendered in a select dropdown.

Event listeners on the state and zip code inputs trigger to generate shipping options via AJAX.

While working on development for a client using Piggybak, I came across a scenario where AJAX asynchronous-ity was problematic. Here’s how the problematic behavior looked on a timeline, picking up as the user enters their shipping address:

0 seconds: User changes state, triggers AJAX shipping lookup with state value, but no zip code entered (Let’s refer to this as AJAX REQUEST 1).
1 second: User changes zip code, triggers AJAX shipping lookup with state and zip value present (Let’s refer to this as AJAX REQUEST 2).
2 seconds: AJAX REQUEST 2 returns valid shipping options.
3 seconds: AJAX REQUEST 1 returns invalid shipping options, because no zip code provided in this data set, and overwrites shipping options returned by AJAX REQUEST 2.

The result is that the user has finished entering a valid shipping address, but sees that no valid shipping options can be chosen:

To address this issue, I researched AJAX queuing, with the requirement that AJAX requests should be performed synchronously and existing AJAX requests could be aborted if needed. After experimenting with a few different plugins, I found the most success with the jQuery-ajaxq plugin. It’s simple to use:

To append a new AJAX call on to a queue, you call $.ajaxq(queue_name, options), where options includes the standard AJAX arguments.
To cancel or abort AJAX calls currently running in a queue, you call $.ajaxq(queue_name).

The event listener on state and zip changes now looks like the code shown below, in simplified form. The piggybak.update_shipping_options cancels AJAX requests on the shipping_options queue and then adds a new request to the queue which will execute immediately. This does not affect other asynchronous AJAX requests on the page.

var piggybak = {
    update_shipping_options: function() {
        $.ajaxq("shipping_options");
        $.ajaxq("shipping_options", {
            url: ...,
            cached: false,
            data: ...,
            dataType: "JSON",
            beforeSend: function() {
                 ...
            },
            success: function(data) {
                ...
            }
        });
    }
}

Here’s how this looks on a timeline:

0 seconds: User changes state, triggers AJAX shipping lookup with state value, but no zip code entered (Let’s refer to this as AJAX REQUEST 1).
1 second: User changes zip code, triggers AJAX shipping lookup with state and zip value present (Let’s refer to this as AJAX REQUEST 2). This signals to abort all current AJAX requeusts on the shipping_options queue.
2 seconds: AJAX REQUEST 2 returns valid shipping options.

This was an interesting technical problem to solve, but the needs were not surprising. The jQuery-ajaxq plugin offers a simple, elegant solution for handling AJAX queing in jQuery.

Three Things: Times Two

2012-09-10T00:00:00+00:00

It’s been a while since I’ve written up a “Three Things” article where I share a few featured web development tidbits picked up recently. So I made this a double episode!

1. event.stopPropagation() and event.stopImmediatePropagation()

I recently came across these two methods in jQuery, described here and here. Both of these methods [prevent the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event]. In my web application, my $(‘html’) element had a listener on it, but I added specific listeners to children elements that when clicked on calls event.stopPropagation to cancel the event on the $(‘html’) element. See the code below for a simplified example:

jQuery(function() {
    jQuery('html').click(function() {
        jQuery.hideSomething();
    });
    jQuery('.popup').click(function(event) {
        event.stopPropagation();
    });
})

2. alias_attribute

The alias method in Rails is one that I use frequently. But I recently came across the alias_attribute method as well. This might make the most sense to use when using shared views for multiple models with varying attributes.

3. Excel behavior in jQuery

Recently, there was a bit of discussion about jQuery tools that emulate spreadsheet behavior. A couple of the tools that came up were Handsontable and DataTables. They are worth checking out if you are looking to add Excel-like behavior to your web application!

4. Rack::SslEnforcer

I recently had a need on a Rails application to force some pages as secure, but have other pages be forced as non-secure. Instead of the common practice of adding controller before filters to force a redirect, this was included via the Gemfile, bundle install, and then configured in config/application.rb. Here’s an example configuration setup that I’m using:

config.middleware.use Rack::SslEnforcer,
        :only => [/\/checkout\/$/, /\/users$/, ‘/admin’],
        :strict => true

The one interesting caveat I found in working with this is that you absolutely must have all CSS and JavaScript assets precompiled in order for them to be served via SSL. The JS and CSS assets would not be forced to SSL, so they must exist in the Rails public directory via the precompiling, or this gem will redirect https requests on a secure page to http, resulting in the browser reporting that some non-secure elements are being served from a secure page.

5. Setting a viewport

I was recently troubleshooting a CSS issue for a client who was examining their website on an iPad. The iPad was setting the width of the viewport to a value that resulted in mis-alignment of floating elements. After a bit of research, I found that setting the viewport to the desired static width of my page fixed this issue. Here is a nice overview of the viewport attribute.

6. Line Specific Substitution in vi

Several of my coworkers are vi experts. When I’m in a shared screen with them, I pick up small tips for improving efficiency. One that I picked up on a few months ago and practiced enough to remember was line-specific substitution, e.g. 4,10s/moo/meow/g will substitute all occurrences of “moo” to “meow” in lines 4 through 10. I use this technique frequently.

Interesting jQuery Modules

2012-06-13T00:00:00+00:00

Marina Lohova talked about her favorite jQuery modules. It was the last talk of the day and she did not have much time.

Her focus was on the functional plugins. Interesting modules that she mentioned include:

Ajax PayPal Cart
Sisyphus (uses HTML5 LocalStorage)
jImpress (presentations)
jPlayer (HTML5)
ResponseJS
lqTouch (adds mobile events like swipe)

Keeping Your Apps Neat & Tidy With RequireJS

2012-05-17T00:00:00+00:00

RequireJS is a very handy tool for loading files and modules in JavaScript. A short time ago I used it to add a feature to Whiskey Militia that promoted a new section of the site. By developing the feature as a RequireJS module, I was able to keep all of its JavaScript, HTML and CSS files neatly organized. Another benefit to this approach was the ability to turn the new feature “on” or “off” on the site by editing a single line of code. In this post I’ll run through a similar example to demonstrate how you could use RequireJS to improve your next project.

File Structure

The following is the file structure I used for this project:

├── index.html
└── scripts
    ├── main.js
    ├── my
    │   ├── module.js
    │   ├── styles.css
    │   └── template.html
    ├── require-jquery.js
    ├── requirejs.mustache.js
    └── text.js

The dependencies included RequireJS bundled together with jQuery, mustache.js for templates and the RequireJS text plugin to include my HTML template file.

Configuration

RequireJS is included in the page with a script tag and the data-main attribute is used to specify additional files to load. In this case “scripts/main” tells RequireJS to load the main.js file that resides in the scripts directory. Require will load the specified files asynchronously. This is what index.html looks like:

<!DOCTYPE html><br/><html><br/><head><br/>    <title>RequireJS Example</title><br/></head><br/><body><br/>    <h1>RequireJS Example</h1><br/>    <!-- This is a special version of jQuery with RequireJS built-in --><br/>    <script data-main="scripts/main" src="scripts/require-jquery.js"></script><br/></body><br/></html><br/>

I was a little skeptical of this approach working on older versions of Internet Explorer so I tested it quickly with IE6 and confirmed that it did indeed work just fine.

Creating a Module

With this in place, we can create our module. The module definition begins with an array of dependencies:

define([
  "require",
  "jquery",
  "requirejs.mustache",
  "text!my/template.html"
  ],

This module depends on require, jQuery, mustache, and our mustache template. Next is the function declaration where our module’s code will live. The arguments specified allow us to map variable names to the dependencies listed earlier:

  function(require, $, mustache, html) { ... }

In this case we’re mapping the $ to jQuery, mustache to requirejs.mustache and, html to our template file.

Inside the module we’re using Require’s .toUrl() function to grab a URL for our stylesheet. While it is possible to load CSS files asynchronously just like the other dependencies, there are some issues that arise that are specific to CSS files. For our purposes it will be safer to just add a element to the document like so:

  var cssUrl = require.toUrl("./styles.css");
  $('head').append($('<link/>',
    { rel: "stylesheet", media: "all", type: "text/css", href: cssUrl }));

Next, we define a view with some data for our Mustache template and render it.

  var view = {
    products: [
      { name: "Apples", price: 1.29, unit: 'lb' },
      { name: "Oranges", price: 1.49, unit: 'lb'},
      { name: "Kiwis", price: 0.33, unit: 'each' }
    ],
    soldByPound: function(){
      return (this['unit'] === 'lb') ? true : false;
    },
    soldByEach: function() {
      return (this['unit'] === 'each') ? true : false;
    }
  }

  // render the Mustache template
  var output = mustache.render(html, view);

  // append to the HTML document
  $('body').append(output);
});

The Template

I really like this approach because it allows me to keep my HTML, CSS and JavaScript separate and also lets me write my templates in HTML instead of long, messy JavaScript strings. This is what our template looks like:

<ul class="hot-products"><br/>  {{#products}}<br/>  <li class="product"><br/>    {{name}}: ${{price}} {{#soldByEach}}each{{/soldByEach}}{{#soldByPound}}per lb{{/soldByPound}}<br/>  </li><br/>  {{/products}}<br/></ul><br/>

Including the Module

To include our new module in the page, we simply add it to our main.js file:

require(["jquery", "my/module"], function($, module) {
    // jQuery and my/module have been loaded.
    $(function() {

    });
});

When we view our page, we see that the template was was rendered and appended to the document:

Optimizing Your Code With The r.js Optimizer

One disadvantage of keeping everything separate and using modules in this way is that it adds to the number of HTTP requests on the page. We can combat this by using the the RequireJS Optimizer. The r.js script can be used a part of a build process and runs on both node.js and Rhino. The Optimizer script can minify some or all of your dependencies with UglifyJS or Google’s Closure Compiler and will concatenate everything into a single JavaScript file to improve performance. By following the documentation I was able to create a simple build script for my project and build the project with the following command:

node ../../r.js -o app.build.js

This executes the app.build.js script with Node. We can compare the development and built versions of the project with the Network tab in Chrome’s excellent Developer Tools.

Development Version:

Optimized with the RequireJS r.js optmizer:

It’s great to be able to go from 8 HTTP requests and 360 KB in development mode to 4 HTTP requests and ~118 KB after by running a simple command with Node! I hope this post has been helpful and that you’ll check out RequireJS on your next project.

Three Things: Startups, Rails news, jQuery index

2012-03-23T00:00:00+00:00

I recently had a conversation with Jon about End Point blogging, microblogging, and tweeting. Many of us End Pointer’s have tips and tools that we encounter regularly that aren’t worthy of an entire blog post, but are worthy of sharing. Here’s my first attempt at sharing smaller bits of info – stay tuned to see how it works out.

1. Paul Graham’s Ambitious Startup

Here is an interesting recent article by Paul Graham entitled Frighteningly Ambitious Startup Ideas. It’s great. Read it.

2. Rails Vulnerability Hack

If you aren’t up to speed on things going on in the Rails world, check out this recent commit. A GitHub user was able to exploit Rails’ mass-assignment vulnerability to commit to the Rails core. Check out a few more related links at A Fresh Cup’s post on the incident.

3. jQuery’s index method

I recently came across the index method in jQuery, and wanted to share an example of its use.

I’m using jQuery UI’s accordion on four categories (Period, Genre, Theme, Nationality) that have a set of options. A user can click any of the options to filter products, e.g. clicking on Folk Songs in the screenshot to the right would bring up products that have a Genre of Folk Songs. On the subsequent page load, the accordion region that includes the filtered option must be visible. Here’s what I came up with using the index method:

$(function() {
    var active = 0;
    if($('#accordion a.current').length) {
        active = $('#accordion div').index($('#accordion a.current').parent());
    }
    $('#accordion').accordion({ active: active, autoHeight: false });
});

And here’s how it breaks down:

First, the default active region is set to 0.
Next, if an accordion link has a class of current (or a filtered option is selected), the index method is used to determine the position of that link’s parent divider among all the accordion regions.
The accordion UI is created, set with the active option, which contains the selected link or defaults to the first accordion region.

jQuery’s index method was used to set the active accordion region.

A Little Less of the Middle

2012-03-14T00:00:00+00:00

elephant by esclarabunda

I’ve been meaning to exercise a bit more. You know, just to keep the mid section nice and trim. But getting into that habit doesn’t seem to be so easy. Trimming middleware from an app, that’s something that can catch my attention.

Something that caught my eye recently is a couple recent commits to Postgres 9.2 that adds a JSON data type. Or more specifically, the second commit that adds a couple handy output functions: array_to_json() and row_to_json(). If you want to try it out on 9.1, those have been made available as a backported extension.

Lately I’ve been doing a bit of work with jQuery, using it for AJAX-y stuff but passing JSON around instead. (AJAJ?) And traditionally that involves something in between the database and the client rewriting rows from one format to another. Not that it’s all that difficult; for example, in Python it’s a simple module call:

jsonresult = json.dumps(cursor.fetchall())

… assuming I don’t have any columns needing processing: TypeError: datetime.datetime(2012, 3, 09, 18, 34, 20, 730250, tzinfo=psycopg2.tz.FixedOffsetTimezone(offset=0, name=None)) is not JSON serializable Similarly in PHP I can stitch together a JSON array to pass back to the front end:

while ($row = pg_fetch_assoc($rs))
{
    $rows[] = $row;
}
$jsonresult = json_encode($rows)

Now I can trim that out, and embed the encoding right into the database query:

SELECT row_to_json(pages) FROM pages WHERE page_id = 5;
-- or, to return an array of rows
SELECT array_to_json(array_agg(pages)) FROM pages WHERE page_title LIKE 'A Little Less%';

Notice the use of the row-type reference to the table itself after the SELECT, rather than just a single column. This outputs:

[{"page_id":105,"today":"\u03c0 day","page_title":"A Little Less of the Middle","contents":"I've been meaning to exercise a bit more.  You...","published_on":"2012-03-15 03:30:00+00"}]

Compare that to the output from json_encode() above, where the database driver treated everything as a string, even the page_id integer. The other difference is the Postgres code doesn’t do any quoting on Unicode characters:

[{"page_id":"105","today":"π day","page_title":"A Little Less of the Middle","contents":"I've been meaning to exercise a bit more.  You...","published_on":"2012-03-15 03:30:00+00"}]

I’m a bit on the fence about whether it’s a real replacement for doing it in middleware, especially in some web use cases where you typically want to do things like anti-XSS type processing on some fields before sending them off to a browser somewhere. Besides, at the moment at least, there’s no built-in way to break JSON back apart in the database. But I’m sure there’s some places getting direct JSON is helpful, and it’s certainly an interesting start.

Handling outside events with jQuery and Backbone.js

2012-03-02T00:00:00+00:00

I recently worked on a user interface involving a persistent shopping cart on an ecommerce site. The client asked to have the persistent cart close whenever a user clicked outside or “off” of the cart while it was visible. The cart was built with Backbone.js, and jQuery so the solution would need to play nicely with those tools.

The first order of business was to develop a way to identify the “outside” click events. I discussed the scenario with a colleague and YUI specialist and he suggested the YUI Outside Events module. Since the cart was built with jQuery and I enjoyed using that library, I looked for a comparable jQuery plugin and found Ben Alman’s Outside Events plugin. Both projects seemed suitable and a review of their source code revealed a similar approach. They listened to events on the document or the element and examined the event.target property of the element that was clicked. Checking to see if the element was a descendant of the containing node revealed whether the click was “inside” or “outside”.

With this in mind, I configured the plugin to listen to clicks outside of the persistent cart like so:

  $(function(){
    $('#modal-cart').bind('clickoutside', function(event) {
    });
  });

The plugin worked just like it said on the tin, however further testing revealed a challenge. The site included ads and several of them were <iframe> elements. Clicks on these ads were not captured by the clickoutside event listener. This was a problem because the outside event listening code could be ignored depending on where the user clicked on the page.

To mitigate this issue, a second approach was taken. A “mask” element was added below the persistent cart. CSS was used to position the mask below the persistent cart using the z-index property. The mask was invisible to the user because the background was transparent. Instead of listening to clicks outside of the persistent cart, clicks on the mask element could be captured. Thanks to the magic of CSS, the mask covered the entire page (including those pesky <iframes>).

Now that I was able to handle the “outside” clicks properly, the event handling code needed to be configured inside the Backbone.js cart view. Backbone uses jQuery to handle events behind the scenes but the syntax is a little bit different.

Where with jQuery you might set up an event handler like this:

  $('#mask').click(maskClickHandler);

This would be the Backbone.js equivalent:

  "click #mask": "maskClickHandler"

Here is how it all shaped up inside the Backbone view. First, the event handler on the mask element was configured inside the events object of the view:

window.cartView = Backbone.View.extend({
  template: '#cart-template',

  initialize: function() {
    _.bindAll(this, 'render');
    this.initializeTemplate();
  },

  initializeTemplate: function() {
    this.template = _.template($(this.template).html());
  },  

  // set up event listener on the mask element
  events: function() {
    "click #modal-cart-mask": "closeCart"
  },

The openCart function was augmented to show the mask element each time the persistent cart was shown:

  openCart: function () {
    // show the mask element when the cart is opened
    $(this.el).find('#modal-cart-mask').show();
    this.render();
    $(this.el).removeClass("closed");
    this.isClosed = false;
  },

Lastly, the closeCart function was modified to hide the mask element each time the persistent cart was closed:

  closeCart: function () {
    $(this.el).addClass("closed");
    this.isClosed = true;
    // hide the mask element when the cart is closed
    $(this.el).find('#modal-cart-mask').hide();
  },  

  render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
  }
});

With this in place, the outside events were properly captured and handled by the same Backbone view that managed the persistent cart. How’s that for playing nice?

jQuery Async AJAX: Interrupts IE, not Firefox, Chrome, Safari

2012-03-01T00:00:00+00:00

I recently worked on a job for a client who uses (Thickbox). Now, ThickBox is no longer maintained, but the client has used it for a while, and, “if it ain’t broke don’t fix it,” seems to apply. Anyway, the client needed to perform address verification checks through Ajax calls to a web-service when a form is submitted. Since the service sometimes takes a little while to respond, the client wanted to display a ThickBox, warning the user of the ongoing checks, then, depending on the result, either continue to the next page, or allow the user to change their address.

Since the user has submitted the form and is now waiting for the next page, I chose to have jQuery call the web service with the async=false option of the ajax() function. (Not the best choice, looking back). Everything worked well: Firefox, Safari and Chrome all worked as expected, and then we tested in IE. Internet Explorer would not pop up the initial ThickBox (‘pleaseWait’ below), until the Ajax queries had completed, unless I put an alert in place between them, then the ThickBox would appear as intended.

function myFunc(theForm) {
    ...
    tb_show("Please wait.','#TB_inline?height=50&width=200#inlineID=pleaseWait&modal=true");
    ...
    $.ajax({
        type : "POST",
        url:  "call to webservice",
        data:   "address to post to the webservice",
        async:  false,
        success:  function (msg) {
            ...
        }
    });
};

To make a long story a bit shorter, we finally determined that the culprit was the async setting in the JQuery ajax call. Making the Ajax call in synchronous mode, locked the browser and delayed the display of the ThickBox, even though the tb_show call preceded the ajax call! Setting the async value to true solved the locking problem, and worked fine in all browsers.

The jQuery Documentation states: “Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active,” which turns out to be true (at least for IE). What surprised me was , in this case, the ThickBox call was requested well before the jQuery AJAX call. This makes me think that maybe tb_show is triggered asynchronously in IE. In any case it is different here than in the other mainstream browsers, and it gets locked up by the synchronous Ajax.

I worked around the problem by setting the Ajax calls to be asynchronous, then keeping track to make sure both the shipping address and the billing address checks have returned before continuing.

The lessons here are:

(1) Be careful using synchronous mode with jQuery AJAX calls. Easier to leave them as default and ensure all your calls have returned before you take the next step.

(2) As always, don’t assume your solution will work as intended until you see it work in IE.

Full Screen Gallery with Supersized and video slides

Basic functionality

Customizing the toolbar

Customizing the screen image size

Introducing video (YouTube) slides

Final Result

Using jQuery Migrate plugin

jQuery Content Replacement with AJAX

More jQuery confusion: hidden, disabled fields

Unbalanced HTML considered harmful for jQuery

Using Google Maps and jQuery for Location Search

Google Maps API Key

Geocoder Object

Rendering a Map from the Results

Searching within a Radius

Figuring out which Locations are Visible

Adding Listeners

Advanced Elements

Conclusion

Pagination days are over? Infinite scrolling technique

IE7 “Enhances” href Attributes of Links Added via innerHTML

Links “Enhanced” By IE7

Digging Deeper

jQuery contents() method

jQuery contents()

Fixed Navigation Bar: HTML, CSS, and JavaScript Breakdown

HTML Markup

CSS Settings

Scroll Event Listener

Paper Source Case Study with Google Maps API

Basic Map Implementation

HTML

CSS

JavaScript

Building Search Functionality

Handling Zero Results

Calculate and Sort by Distance

Adjust Map Boundaries to Include Specific Markers

Disable Scroll and Zoom on Mobile-Sized Devices

Conclusion

Data binding in web applications

Evolution of UI programming for browsers

Data binding

Data binding on web

Backbone.js + Knockout.js

Other solutions

Ghost Table Cells in IE9

What’s this about ghosts?

Correct grid layout:

Broken layout in IE9:

The Stage

Debugging

Bugging Out

The Fix

jQuery Performance Tips: Slice, Filter, parentsUntil

JavaScript-driven Interactive Highlighting

How do we Highlight?

Highlighting Iteration 1

Highlighting Iteration 2

Highlighting Iteration 3

Conclusion

Lazy AJAX

Interactive Piggybak Demo Tour

AJAX Queuing in Piggybak

Three Things: Times Two

1. event.stopPropagation() and event.stopImmediatePropagation()

2. alias_attribute

3. Excel behavior in jQuery

4. Rack::SslEnforcer

5. Setting a viewport

6. Line Specific Substitution in vi

Interesting jQuery Modules

Keeping Your Apps Neat & Tidy With RequireJS

File Structure

Configuration

Creating a Module

The Template

Including the Module

Optimizing Your Code With The r.js Optimizer

Three Things: Startups, Rails news, jQuery index