I Am Not Myself

Bills.Pay(Developer.Skills).ShouldBeTrue()

Category Archives: JQuery

Useful jQuery Plugin of the Day: Waypoints

At Cheezburger, my team is currently working on a sharing widget for our recently released list post type. If you take a look at this list, you will see our MVP of the idea. You will notice a share box in the left gutter that appears to float in a fixed position while you scroll through the items in the list giving you the opportunity to share at any point.

We are using an awesome little jQuery plugin called Waypoints to accomplish this. Waypoints makes it easy to execute a function whenever you scroll to an element. Our implementation looks like this.

define(['jquery', 'mods/device', 'libs/waypoints'], function($, device) {
    var f = {};

    f.listen = function () {
        if (device.is.desktop) {
            $('.js-footer').waypoint(f.affix, { offset: '75%' });
        }
        return this;
    };

    f.affix = function (event, direction) {
        event.stopPropagation();
        $('#js-share-menu-wrap').toggleClass('is-fixed');
        return this;
    };

    return f;
});

In this code we are attaching our waypoint to the footer of of the page. When the footer scrolls into the window viewport the affix method gets called. The affix method simply toggles the is fixed class on the share widget. We are also passing in an options object that tells the waypoint to trigger when the footer scrolls passed the point 75% from the top of the viewport.

In our next iteration, we are planning to change the way the share button behaves as you scroll through the list. The idea being when you click the button while it is within the area of the third list item, the image and title used to share the list on Facebook will be the third list items information. So while you scroll though the list we are updating the share buttons shared information.

We have not implemented this functionality yet, but yesterday I did a spike to figure out how we could accomplish it. And once again, Waypoints made the task easy.

define(['jquery', 'mods/device', 'libs/waypoints'], function($, device) {
    var f = {};

    f.listen = function () {
        if (device.is.desktop) {
            $('.actions').waypoint(f.affix, { offset: '75%' });
            $('.list-asset-item').waypoint(f.onSwitch, { offset: $('#js-share-menu-wrap').offset().top });
        }

        return this;
    };

    f.affix = function (event, direction) {
        event.stopPropagation();
        $('#js-share-menu-wrap').toggleClass('is-fixed');
        return this;
    };

    f.onSwitch = function(event, direction) {
        var item = $(this);
        console.log(direction);
        console.log(item.index());
        console.log($('h2.title', item).text());
        console.log($('div.post-description', item).text());
    };

    return f;
});

In this code I am attaching a waypoint to each list asset item. But this time I am setting the offset to the fixed pixel position of the top of the share widget. This allows me to trigger the onSwitch function as the top of the list asset item crosses the top of the share widget. The handler is scoped correctly for the list asset item so I can easily grab it’s index, title and description. Waypoints will even tell me which direction the user is scrolling.

Here is a quick video showing this code in action.

Using the jQuery Template Plugin for Consistent User Notifications

I recently started playing around with the new jQuery template plugin after seeing Stephen Walther present at my local .NET Users Group. I wanted to share this simple user notification template that I have been using.

<html>
<head>
	<meta charset="utf-8" />
	<title>@ViewBag.Title</title>
	<script src="@Url.Content("~/Content/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
	<script src="@Url.Content("~/Content/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
	<script src="@Url.Content("~/Content/Scripts/jquery.tmpl.min.js")" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$('.ajax-busy').ajaxStart(function () { $(this).show(); });
			$('.ajax-busy').ajaxStop(function () { $(this).hide(); });
			$('.ajax-busy').ajaxError(function (e, xhr, settings, error) {
				$('#error-message-template').tmpl({ Message: error })
											.appendTo('body');
				$("#dialog-message").dialog({
					modal: true,
					width: 480,
					buttons: {
						Ok: function () {
							$(this).dialog("close");
							$(this).remove();
						}
					}
				});
			});
		});
	</script>
</head>
<body>
<div id="main-content">@RenderBody()</div>
<div class='ajax-busy'><img src="@Url.Content("~/Content/Images/ajax-loader.gif")" /></div>
<script id="error-message-template" type="text/html">
	<div id="dialog-message" title="Something Went Horribly Wrong!">
		<p>Despite our best efforts, something went wrong trying to process this request. 
		   I have <a href='@Url.Content("~/elmah.axd")'>logged the error</a>, and dispatched 
		   the ninja fixer monkeys.</p>
		<p>Error: ${Message}</p>
	</div>
</script>
</body>
</html>

It is amazing how little code is needed create a very nice and consistent ajax error notification.

Update: I wanted to pop back into this post seeing as how it is getting some circulation on the internets and go into a little detail on what all is going on here. To start this code sample is a Razor based layout in an ASP.NET MVC 3 application. So, it is the equivalent of a Master Page in ASP.NET. The elements that being with ‘@’ are Razor syntax for rendering server side information into the final markup sent to the browser.

The basic html page structure is created and three javascript libraries are added in the head; jQuery, jQuery UI and jQuery Templates.

The page consists of a couple divs one of which is classed “ajax-busy” that contains a typical ajax spinner image. While not in the sample code, the ajax-buzy class is not visible by default using CSS rules. The main script block uses the jQuery ajax methods to display the spinner when there is an active ajax call being made.

Near the bottom of the page is a script block of type text/html, this is my client side template for my error notification. This block is ignored by browsers while rendering. To display a message, I add a handler to jQuery’s ajaxError method. This handler first locates the template element by id, then applies the template to a json object that I have created inline and finally appends the result to the body of the html document.

The element is now visible, but I take it a step farther by displaying it as a model dialog using jQuery UI’s dialog widget. With some simple set up of the dialog I handle removing the element from the page when the OK button is clicked.

This bit of functionality is now handled globally in the application by this one chunk of code. Here is what the end product looks like.

JQuery for Absolute Beginners Video Series

I have been working a lot with JQuery recently. It is rapidly becoming a core library for doing client side scripting in our primary application.

I discovered a great video series last night intended to introduce you to JQuery from the ground up. The first one is located here. They are a great way to learn the basics.