Microsoft’s AjaxToolKit is a very handy thing to have for any ASP.NET developer.  However, one of my biggest problems with it is that I have encountered problems in IE6.  The position of the modal appears way off center.  After doing a little research, I’ve found the best way to solve this is to wrap the panel that you’re using for the modal in a div with a style of “position:relative;_z-index:1” (it’s important to note the underscore in front of z-index. This targets IE6 specifically).  You can also give the div a class and set the z-index in a separate IE6 stylesheet if you want to still keep your CSS valid.  Here is an example of this fix in action:

<asp:HyperLink ID="lnkModalTrigger" runat="server" NavigateUrl="#" Text="Click Me!" />

<div style="position:relative;_z-index:1;">
<asp:Panel ID="pnlModalContent" runat="server">
     <asp:HyperLink ID="lnkModalClose" runat="server" NavigateUrl="#" Text="Close" />
     <p>Here is some text that will appear inside the modal window</p>
</asp:Panel>
</div>
<ajaxToolKit:ModalPopupExtender ID="Modal" runat="server" PopupControlID="pnlModalContent" TargetControlID="lnkModalTrigger" CancelControlID="lnkModalClose" BackgroundCssClass="act-modal-blackout" />

This should fix any positioning problems that you may be having in IE6.


Part of what makes jQuery so great is not only does the core functionality make life easier, but the extensibility of the library has opened the door to countless plugins that also make life easier. I use jQuery at my job just about on a daily basis (I’ll admit, I’m a bit of a jQuery junkie) and have used many different plugins. The following is a list of my top five favorites that I keep coming back to again and again.

Superfish

Odds are, if you’re building a web site, that site is going to have some sort of navigation. While there are many plugins for jQuery that are specific to menu functionality, I find Superfish to be my favorite for a number of reasons. First, the actual jQuery code that goes into implementing it is extremely minimal (as is the case with many plugins):

$(document).ready( function() {
$('#menu').superfish();
});

Where “menu” is the id of the unordered list of menu options. The markup for Superfish is also very unobtrusive. The only markup that needs to be added is class=”sf-menu” to the ul tag. Markup for a Superfish menu would look like the following:

<ul id="menu" class="sf-menu">
  • Menu Item 1
  • Menu Item 2
  • Menu Item 3
    • Menu Item 3 - Sub 1
    • Menu Item 3 - Sub 2
    • 
      
      
      
    • Menu Item 4
    • 
      

      Superfish is also pretty customizable if you choose to do that. The default alignment is horizontally, but it also offers options for both vertical alignment and a nav-bar alignment that displays sub-menu items in a small bar that spans the entire width of the menu, instead of a pre-defined area like the default styling does. To change the orientation of the menu, simply add a class of “sf-vertical” or “sf-navbar” to the ul tag along with the “sf-menu” class (class=”sf-menu sf-vertical”) and include an additional stylesheet.

      With its quick implementation and ease of customization, Superfish is an excellent choice for a menu plugin. For more documentation about how to further customize, and to download the source code along with examples,

      Visit the Superfish site

      jqModal

      There are a ton of modal window plugins for jQuery and I have yet to find one that is bad by any means, but I happen to prefer jqModal over the rest. I’m not going to rip on any other modal plugins or scold you for using a particular one over another. This is simply why I like this particular plugin, and I do not care to wax intellectual with anyone over which is the best one out there.

      I like jqModal because it is very bare-bones. All it gives you is a grayed-out window with a blank canvas and leaves the rest up to you, which I think makes it quite an all-purpose plugin. The code for it is very simple as well. To initialize a particular element as a jqModal window, use the following code:

      $(document).ready( function() {
      $('#modal-window').jqm();
      });

      Then in the markup, have something like this:

      The next step is to add a trigger for the modal. This is also really easy. While jqModal offers a few ways to add a trigger, I find the best way is to add it inside of a click function bound to the element you want to trigger the modal. For example:

      $(' #modal-open').click( function() {
      $('#modal-window').jqmShow();
      });

      Then in your markup have an element like this:

      View Lightbox Window

      By default, clicking the gray area outside the modal window will trigger the close event. However, it’s probably not a bad idea to have an element inside your modal window to close it. To do that, the jQuery code and HTML markup look very much like the code to open the window:

      $(‘#modal-close’).click( function() {

      $(“#modal-window’).jqmHide();

      });

      And the markup looks like:

      Close this window

      That is about all you need to know to get started with jqModal. It’s very customizable. The accompanying stylesheet is very small and is easy to build upon, and the jQuery code allows you to use it in a number of different ways. To learn more about jqModal and download the source code,

      Visit the jqModal website

      jQuery Bookmark

      Social bookmarking is creeping on to more and more sites. The company I work for deals primarily with online marketing for consumer brands, and I have found myself more and more coding “Add to Facebook” or “Tweet This” functionality. As with just about anything I find myself doing over and over, the need for a stable, reusable module soon became high priority. However, I recently discovered and had a chance to play around with the Bookmark plugin, and I will definitely implement it in the next project that calls for any sort of social bookmarking. Not only is the code fairly simple (like most of my favorite plugins), but it comes with built-in functionality for a ton of sites (many of which I haven’t even heard of). The most basic implementation looks like this:

      $(document).ready( function() {
      $('#bookmarks').bookmark();
      });

      This will display a bookmark box with every single site that is built in to the plugin. However, since you may not want that, there is also a way to specify the sites that should be included:

      $(‘#bookmarks’).bookmark({sites: “facebook”, “digg”, “delicious”});

      In addition, you can also add your own sites:

      //add a new site
      //parameters: (id, display name, icon url, site url)
      //id:  string that will be used to reference the site in the function ('digg', 'facebook', etc)
      //display name: text that will be displayed on the page
      //icon url: path to the icon to be used
      //site url: path to the site being added
      $.bookmark.addSite('myexamplesite', 'My Example Site', 'myexamplesite.png', 'http://www.myexamplesite.com?url={u}&title={t}');

      There is a ton of other stuff you can do with this plugin. If you’re interested,

      Visit the site and download the source code

      DataTables

      This is by far the coolest jQuery plugin I have come across. The sheer amount of stuff this bad boy can do is mind-blowing. Simply by calling the initialization function with the default settings like so:

      $(document).ready( function() {
      $('#tabular-data').dataTable();
      });

      you will be amazed by how much you can now do with that table of data. The only requrements for the markup in order for this to work are that the table must include the

      and

      tags. By simply doing this, you table will include functionality to search your entries, display a given number of entries, pagination, and will also add classes to alternating rows to allow you to add zebra styles to your table. Keep in mind this is all with the default configuration. Pretty cool, huh? If you add class=”sorting” to particular

      element, you can also sort the table by that particular column. There is an unbelievable amount of customization that can occur with this plugin. Rather than explain it all, I suggest you visit the official site and read the documentation yourself. Again, this is definitely my favorite out of this list.

      DataTables.net

      jQuery UI

      Ok, so I admit, this last one may be a bit of a cop-out, but I really felt it necessary to put on here. jQuery UI provides built-in functionality for so many things that so many people have wasted so much time building themselves. Custom dialog boxes, draggable elements, date pickers, tabs, and progress bars just to name a few. Adding jQuery UI elements to your page can really make it function like a desktop application. Like the previous plugin, there is simply way too much stuff that it can do to explain here. I would definitely recommend checking out the documentation though and using it.

      jQuery UI

      So there you have it, a list of my five favorite plugins that have saved me a lot of time and headaches, and continue to do so. Hopefully you find these as useful as I do. I encourage you to check out the repository of jQuery plugins on the official jQuery site, as you may find that what you are trying to do may already be built and ready to go.


      I had an issue with an application I was writing recently that positions a lightbox based on the height and with of the image inside it. I was using Javascript to get the height and width of the image, then adjust the CSS on the lightbox accordingly before displaying it. However, Internet Explorer kept returning 0 for the height and width image, causing the lightbox to display improperly.

      The Problem:
      Part of the application I was writing involved displaying a table with a list of image information. When a row of the table was clicked, the image itself is displayed in a lightbox positioned in the center of the screen based on the height and width of the image. I was using jQuery and the jqModal plugin to do this. I set the click event of the table row to change the ‘src’ attribute on the image tag inside the lightbox, and binded a load event to the image tag inside the lightbox that repositioned the lightbox then displayed it. That way, I was sure that the code to grab the dimensions of the image wouldn’t execute until the image was loaded. At least, that’s what I thought. For some reason, Internet Explorer was not getting the dimensions of the image, causing the upper-left corner of the lightbox to always be in the middle of the screen, despite the size of the image.

      I discovered that the source of the problem was that because the lightbox was set to “display: none” when the src attribute was changed, the image wasn’t actually being loaded despite triggering the load event. Internet Explorer does not load images unless they are actually being displayed. Because of this, I kept getting 0 as the height and width of the image.

      The Solution:
      It turns out that the images will load properly if the containing element is set to “visibility: hidden”. However, since jQuery and the plugin I was using hides elements by setting them to “display: none” by default, I merely implemented a workaround for IE which looks something like this:


      if ( navigator.appName == "Microsoft Internet Explorer" ) {

      $('#lightbox-image-container').css('visibility', 'hidden');

      $('#lightbox-image-container').css('display', 'block');

      }

      var image = document.getElementById("lightbox-image");

      var imgWidth = image.width;

      var imgHeight = image.height;

      if ( navigator.appname == "Microsoft Internet Explorer" ) {

      $('#lightbox-image-container').css('display', 'none');

      $('#lightbox-image-container').css('visibility', 'visible');

      }

      Note I used document.getElememtById to reference the image rather than using the jQuery width and height methods because the former is more compatible cross-browser.

      Coding HTML Emails

      April 29, 2009


      Any developer who’s ever put together an HTML email, felt good about it, then looked at it in an email client such as Outlook (or Outlook, Outlook, and even Outlook) knows exactly why I feel compelled to write this post.  The way HTML renders in web browser and the way it renders in an email client are 2 completely different animals, and having done my fair share of emails I think I can provide some insight.

       

      If you don’t feel like reading this entire post, then remember what I think is the golden rule of HTML email coding:  Use the oldest possible techniques when creating an email.  That’s right, pretend you’re a developer in the early 90’s and you’ve never heard of background images, floating divs, z-indicies and all that good stuff that makes the internet fun.

       

      To be a little more specific, here’s a list of some do’s and dont’s for creating HTML emails:

      DON’T:

      • Use div tags.  Ever. (The only time I think I’ll ever say that in my life)
      • Use IDs or classes on any element.
      • Use relative or absolute positioning.
      • Use margins or padding for spacing.
      • Use background images on anything.
      • Even think about using Javascript under any circumstances.

       

      DO:

      • Use tables and nothing but tables to layout your email.
      • Keep use of rowspan and colspan to a minimum.
      • Use HTML attributes in lieu of inline styles whenever possible (for example, width=”50″ instead of style=”width: 50px;”)
      • Use spacer gifs in their own cell for dead space (in lieu of margins and padding)
      • Apply all text styles inline.
      • Specify line-height on all text.
      • Keep use of CSS as basic as possible (just stuff like color, font-family, font-size, line-height, nothing too fancy)

       

      If you’re in doubt about what CSS styles are supported in what browser, here’s a really good resource:
       Guide to CSS Support in Email Clients (2008)

       

      Also, I would recommend checking out the Email Standards Project.  It’s definitely a worthwhile cause.