Let's face it, if you are a .NET web developer then jQuery is quickly becoming a required skill. With that said, I am making it a point this year to learn as much as I can about jQuery. If this was some sort of support meeting then this would be the part where I would stand up and say "Hi, I am an MVC addict, and my New Year's resolution is to become a jQuery ninja." LOL Anyways, over the last couple of days I have spent time digging through the various jQuery tips and tricks that are scattered on the web. Here are a few tips and tricks that I found particularly interesting that I wanted to share with you: No conflict-mode (No, this is not a tip about dating or parenting) To avoid conflict when you are using multiple libraries in a website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign. Using jQuery with other libraries var $j = jQuery.noConflict(); $j('#myDiv').hide(); Using empty() vs html("") ... [More]

Last week a co-worker of mine sent me a link for the gRaphaël charting library. gRaphaël is a full fledged charting library written entirely in JavaScript. Normally when I need to do charting on a website I resort to using the Microsoft Chart Controls. Unfortunately the MS Chart Controls run on the server side, rely on IIS and tend to a require a slight learning curve before you can become efficient with them. Since the gRaphaël library is written in JavaScript it is lightweight, easy to use and it will run in almost any browser. Since seeing is believing, here is a walkthrough on how to create your first pie chart with gRaphaël:   Step One - add a script reference to the raphael.js and g.raphael.js. These two files are required no matter what type of chart you are trying to render. <script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script> <script src="http://g.raphaeljs.com/g.raphael.js&qu... [More]

While working on the WeBlog project I realized that I needed a star rating system for blog posts. A star rating allows your readings to rate content based on a 0-5 scale.   A fully lit star represents a full point on the rating scale. Therefore in order to give half point increments each star uses two images.  Left off: Left on: Right off: Right on: When you put a left and a right image together it forms a complete star. So If you have a rating a 3.5 you would have the following stars displayed: Star #1 left on, right on #2 left on, right on #3 left on, right on #4 left on, right off #5 left off, right off. Displaying the Current Rating In MVC, the logic to determine which stars (images) should be initially displayed is best accomplished with a HTML helper: public static string Ratings(this HtmlHelper helper, PostModel post) { StringBuilder sb = new StringBuilder(); sb.AppendFormat("<span class='rating' rating='{0}' post='{1}' title='Click to cast vote... [More]

I was watching a video named "Mastering jQuery" on Tekpub a few days ago and I heard the term "Unobtrusive JavaScript". Basically unobtrusive JavaScript is a technique that emphasizes the separation of your functional layer from your presentation layer. In layman's terms this means that your JavaScript is NOT placed directly in your HTML. Instead it is placed in a separate external file. Hopefully, you are already doing this with your cascading style sheets. Why? So you can change the look and feel of your website without having to modify each page. The same principal applies to Unobtrusive JavaScript. Here is an example... In the old days it was very common to add a control to your HTML and wire up the event directly on the controls. Although this works fine it does not give you flexibility in your design. If you have similar controls on other pages that call the same function you will have to modify each page if you change the method signature or rename the func... [More]

It seems like url shorteners have become very popular these days. Especially with applications like twitter who limit your messages to only 140 characters. The cool thing is that most of the URL shorteners have API's that you can use if you want to integrate them into your application. If you are interested in test driving the bit.ly engine then here are the steps: Go to the bit.ly website and create a free account. Once registered you will receive a username and an API key. You will need these later on when we write the code so make sure you keep these values handy. Since I am using jQuery for this project you will need to add a reference to the jQuery library. I like to use the Google CDN servers when possible but you can always download your own copy of jQuery. <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT> Now we can create the HTML that will allow the user to enter a long url, click the "Sh... [More]