Although jQuery isn’t known to be the best solution for 3-D and vector-based graphics, there are several other areas in which jQuery out-performs Flash.

Search Engine Friendly:
Your site’s content is not locked up in Flash file, thus making it accessible to search engine bots and screen readers. Freeing up your content can drastically increase your site rankings.

User-Friendly:
jQuery doesn’t require a plug-in like Flash does.  Your Web 1.0 user won’t need to download anything to view or interact with the functionality on your site. 

Browser-Friendly, Mobile-Browser-Friendly
jQuery is supported by most browsers (provided the user hasn’t disabled Javascript), including Safari on the iPhone.  To date, Flash is not supported by the iPhone.

Developer-Friendly:
jQuery is executed through Javascript, HTML and CSS.  No Flash developers are required.  Also, subject to debate, but the learning curve with jQuery isn’t nearly as steep as Flash.

Budget-Friendly:
jQuery is completely free.  Adobe Flash costs upwards of $700, and that’s before you’ve even begun to scope a designer to do the work.

Server-Friendly:
jQuery code is lightweight: no large Flash files, no large downloads.

As more and more plug-ins become available and gain support from the developer community, it’s important to keep in mind that there may already be a jQuery solution for your needs out there.  Depending on what you’re trying to achieve, it’s important to evaluate both technologies.  If there is a jQuery solution, it may provide a more cost-effective solution for you – and a better experience for your users.

The client, however, found this a bit confusing—once they had expanded the hidden list, it wasn’t obvious to them how to close it. They wanted to be able to click somewhere else on the page and have the list close so they could continue browsing. No problem, I figured, a few JavaScript tweaks and we’d be all set. Simply putting a click event on the body element to close the list would be pretty straightforward.

Lets take a look at the code we used:

function initFauxSelect() {
  $('a.showSelect').click( function(e) {
      e.preventDefault();
      var $theList = $(this).parent('.fauxSelect').next('.selectList');
      hideShow($theList);
  });
}
 
function hideShow(obj) {
  $theList = obj;
  if ($theList.is(':visible') ) {
    $theList.hide();
  } else {
    $theList.show();
  }
}

It’s a simple click event on a.showSelect that calls the hideShow() function. If the list is visible, hide it, otherwise show it.

I figured it would be as simple as binding a new click event to the body tag whenever we show the list. The new event would hide the list when someone clicked elsewhere on the page. Let’s look at the updated hideShow() code:

function hideShow(obj) {
  $theList = obj;
  if ($theList.is(':visible') ) {
    $theList.hide();
    $('body').unbind('click.fauxselect');
  } else {
    $theList.show();
    $('body').bind('click.fauxselect', function(e) {
      $theList.hide();
      $('body').unbind('click.fauxselect');
    });
  }
}

Now, whenever we’re showing the list, we’re creating a new click event on the body that hides the list. It also unbinds itself once its job is done. If someone closes the list by clicking a.showSelect again, we also unbind the event just to keep things clean.

However, I ran into a problem. The event I was binding to the body was being called right away, which stopped the list from ever appearing! It seemed a bit strange, as my assumption was that you’d never want your new event to fire as the same time as the current event.

Thankfully, there’s an easy way prevent this from happening. In our original click event on the .showSelect element, we need to stop that event from bubbling up the DOM.

function initShortcutsSelect() {
  $('a.showSelect').click( function(e) {
    e.preventDefault();
    e.stopPropagation();  // ----- ADDED THIS LINE
    var $theList = $(this).parent('.fauxSelect').next('.selectList');
    hideShow($theList);
  });
}

By telling the event to stopPropagation, it never bubbles up the DOM, never reaches the body and never calls the new click event you bound there until the user actually clicks the body.

Unfortunately, the height of the page being pulled in would vary wildly. This led to a fairly disappointing experience where the page was either far too long, or content in the iframe was cut off and the user had to scroll within the iframe to see everything.

We came up with what we thought might be an interesting solution. If the page loading inside of the iframe (the child page) could calculate its height, and somehow let the parent page know, the parent page should be able to reset the height of the iframe.

With a little inspiration, we came up with a pretty neat solution that we’d like to share. Our solution requires that you have the ability to edit the code of both the parent and child pages.

The child page being loaded into the iframe will simply reset the location of the parent page, and include a hash with the height of itself.

1
2
3
4
5
6
7

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script>
var parentUrl = "http://example/iframe-outside.html";
setHash = function() {
    parent.location = parentUrl + "#" + $('body').height();
}();
</script>

We’re using jQuery here to easily get the height of the <body> tag.

On the parent page that includes the iframe, we’ll again use jQuery and write a small function that gets the height from the hash in the URL, and uses that to reset the height of the iframe.

8
9
10
11

function setHeight() {
    var newHeight = parseInt(location.hash.substring(1)) + 50;
    $('#hashFrame').attr('height', newHeight);
}

We ran into a bit of an issue: the page we were loading was taking a few seconds to load, and we didn’t want to set our height on the iframe until the content within the iframe had finished loading (and it had a chance to set the proper height to the url hash).

More jQuery to the rescue! The jQuery .load() method allowed us to call our setHeight() function after the iframe had finished loading.

12
13
14

$('#hashFrame').load( function() {
    setHeight();
});

Putting it all together gave us a great way to use our new application inside our legacy application, and make it faily seamless to the end user.