To administer your WestHost account, please enter your
Domain Name or Server Manager Username.

More jQuery (BlockUI plug-in)

“The page at www.yoursite.com says…”

Does that look familiar? If you use alert() or confirm() from JavaScript in your web page, some browsers display a standard, boring window with that title, and your message in it.

A few weeks ago, I introduced jQuery, a powerful tool for writing dynamic and engaging websites quickly. Today I’d like to take a brief moment of your time to introduce BlockUI, a plug-in for jQuery. Beyond the power of jQuery itself, you can accomplish much using jQuery plug-ins. Many common tasks are taken care of and abstracted into easy to use, feature-rich plug-ins – a full list can be found at http://plugins.jquery.com/.

BlockUI (http://malsup.com/jquery/block/) is a small plug-in that will allow you to change a boring prompt into a nice-looking one.

Turn this: http://cmichaelis.whsites.net/whblog/jquery-blockui/boring.html

…into this: http://cmichaelis.whsites.net/whblog/jquery-blockui/better.html

The BlockUI plug-in allows you to place the message over the whole page, or over just a particular block element (like a “div” tag). You can specify a message to display, or you can even have a complex piece of your page hidden (with style=”display: none”) and display it in this fashion.

Visit http://malsup.com/jquery/block/ to download it, and to view more examples – and bring your website’s messages up to the next level.

This entry was posted in Web site Development and tagged , . Bookmark the permalink. Both comments and trackbacks are currently closed.

4 Comments

  1. Posted March 5, 2009 at 12:17 am | Permalink

    That really is a powerful tool. The examples on the download page are indicative of this plugins versatility. It reminds me of slimbox, which is also a jQuery plugin.

    jQuery is a lightweight script that can increase productivity so much that it is mind-boggling!

  2. Sajid Wasim
    Posted August 20, 2009 at 4:52 am | Permalink

    I am unable to use this plugin. Does it required a ajax enabled website? How do I use it in Asp.net 2.0? I tried to use it in a simple html page but getting as http://cmichaelis.whsites.net/whblog/jquery-blockui/better.html did but getting “jQuery is undefined” error! What I should do?

  3. Sajid Wasim
    Posted August 20, 2009 at 4:56 am | Permalink

    Also I download the http://cmichaelis.whsites.net/whblog/jquery-blockui/better.html page with js files jquery.blockUI.1.33.js and jquery.blockUI.js now it says “Invalid Charecter” :(

  4. Posted August 20, 2009 at 9:27 am | Permalink

    Hi Sajid,

    If you’re using ASP.Net, then you have some special benefits due to Microsoft shipping JQuery along with Visual Studio (e.g., you can use IntelliSense with JQuery, etc). Here is a link explaining how it all works with ASP.Net:

    http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

    There is another page that’s not quite as organized but which gives a better “from the ground up” tutorial:

    http://www.dotnetcurry.com/ShowArticle.aspx?ID=231&AspxAutoDetectCookieSupport=1

    Good luck!
    –Chris

Copyright © 1998–2014, WestHost. All rights reserved.  |  WestHost / Believe in Better Hosting. Privacy Policy