How Did They Do This?

JavaScript
1

I saw a nice little pop up window and I’m trying to figure out if it’s from a library or something they coded themselves. It’s a small help button that you click on to get a pop up window with which you can interact. Here’s the code:

<script type="text/javascript">
       //<![CDATA[
       new Fly.HelpButton({display:'/help/bills-khakis-models',displayTop:24,displayLeft:-200});
       //]]>
</script>

Here’s the link if that’s not enough to go on: http://www.onthefly.com/product/bills-khakis/bills-khakis-vintage-twill-pants/23090

It’s the question mark button to the right of ‘model’. If it looks custom, are there any libraries that provide a similar function?

Thanks,
Curt

P.S. If you look at the page, isn’t that way too much code to download to the client?

2

Thanks for taking a look and the info.

As for the code, there is a 652 line if, else, if, else if, etc. statement. Are download time concerns not what they used to be in these high bandwidth times?

3

It’s a custom script made with Prototype. It would be fairly easy to do, as all it is really is an absolutely positioned DIV that is toggled on and off, with a bit of fading thrown in. jQuery would make this a piece of cake. At its simplest:

$('.help').click(function() {
  $('#helpbox').toggle('slow');
});

If you look at the documentation, you’ll see that you could also make the fadeout transition different.

As for the code, it doesn’t looks particularly more bloated than a lot of sites these days. What do you mean?