Jaimon's Blog

Making Scrollable Tables with fixed headers – Updated

This post is an update to my previous post on making scrollable tables with fixed headers. I’ve had a few requests for adding additional functionalities, and I thought instead of cluttering the old post, I’ll do a new one for the updated script.

What’s new?

  • Multiple tables on a single page
  • Multiple header freezing
  • Column freezing
To see it in action, please click here.

Implementation

  • Download the file fxHeader_0.6.min.js and copy to your folder (An uncompressed fxHeader_0.6.js is also available)
  • Include the above file in your HTML page
      <script src="fxHeader_0.6.min.js" type="text/javascript"></script>
  • Just before body end tag (</body>), add these lines,
<script type=”text/javascript”>
fxheaderInit(‘dataTable1’,200,2,2);
fxheaderInit(‘dataTable2’,200,2,0);
fxheader();
</script>
Call fxheaderInit for every table you want to add scrolling. fxheader() is only required to call once.
Attributes for fxheaderInit function
  • Table id
  • Height (in pixels)
  • No. of rows to freeze
  • No. of columns to freeze

Width will be taken from the table’s width attribute, so make sure the table you’re passing in has got a width attribute. If width is specified in percentage, it will be calculated in regards to width of the document body, and not of the containing element (ie parentNode). Since width will be changed on window resize, fxheader() function will be attached to window.onresize, if any of the table’s width is specified in percentage. If your existing code has reliance on window.onresize event, please amend the fxHeader.js file.

If your table is generated by a framework like JSF or ASP.net, you’ll need to avoid any possible ID collision as discussed on my previous post.

Cheers,

Jaimon

Advertisements

March 19, 2010 Posted by | Uncategorized | , , , , , | 148 Comments

Managing Vimeo video player via Javascript using Moogaloop API

Vimeo Moogaloop JavaScript Integration

Vimeo is a great web site for sharing videos. It doesn’t have any 10 minute video length restriction as in YouTube. It also has some developer tools to assist in integrating vimeo with your own site. My interest was in the Moogaloop API, and using JavaScript to load a list of files and control the player.

The Moogaloop JavaScript example you can download from vimeo wasn’t working for us (As of Dec 2009).  As it turns out, we weren’t the only people having this problem as this forum post shows. In that forum, one user posted a working example at this blog. His example was working for the first time, but not able to reload another movie. The issue was that the DOM element for the container was getting replaced the first time a movie loads, so the next call to embedSWF will fail due to non-existence of a named element. My minor fix was to check for element existence before calling embedSWF and if not found, create it with a document.createElement call.

In this post we are going to extend on that, and showing a sample where we get a list of movies for a particular user and display it in a list with thumbnail images. Clicking on each link will load the movie in the player area, and will start playing (if auto play is enabled).

To  demonstrate Moogaloop’s event system, I’m displaying a “Please wait” message at the top when somebody clicks on Play, and when we are past the first second of playing, we are  hiding this message. Please see Moogaloop’s API documentation for more details. Although I’ve added two event listeners to show the capabilities, onProgress event should only be used with some caution, as it fires a lot of events every second. If you are using it, make sure the code doesn’t run for more than a few milliseconds.

I’ve also included some wrapper methods to call Moogaloop’s API like play, stop, pause and seek at the end of the JavaScript file. One thing to remember is seek will only work with already buffered data. For example, if the movie is just loaded, and there is only 5 seconds worth data in the buffer, then seekTo(10) won’t work at all.

Using it with other JavaScript libraries

If you are including this script with any other JavaScript code, make sure the global variables I’ve used here don’t create a variable name conflict. Normally I tend to use private JavaScript variables as much as possible. But this post is not intended to be used as a library, but as a starting point to get Vimeo integrated, I haven’t isolated the code as I’ve done in my other blogs here and here.

See it in action

For a live demo, please click here.

Download code

You can download all the required  files as a zip from here.

Cheers,

Jaimon

February 2, 2010 Posted by | Uncategorized | , , , , | 5 Comments