This weekend I sent a MMS message to a buddy and found a bit of a bug. Hopefully it is an isolated case, but maybe some others are having the same problem. After sending the MMS that contained multiple images, it looked like it sent the same one twice.

I didn’t send my buddy two pictures of the same bottle of tequila, nor did I send him three message. When I touch the suspect image, I see it is actually the correct one.

Hmm..Odd. It would be nice if they appeared in order too…since it apparently knows what I was trying to do, it broke up the message correctly, but just didn’t place them in the correct order. It would be better if they appeared like this.

That looks like what I sent.

Is anyone else having the same MMS problem I am seeing?

Update panels make it really easy to do pseudo ajaxish stuff with little or no extra effort. Wrap your controls in a an UpdatePanel, pay for the entire page to post back and go through its life-cycle and you’re pretty much there. I’ve already written a bit on the extra steps you’ll need if you’re doing some jQuery magic inside that UpdatePanel. It’s not difficult and easy enough to either delegate up the chain to something outside the UpdatePanel (e.g. event delegation) or rinse and repeat the jQuery after the partial post back is complete (e.g. add_endRequest).

What would be really slick-o-matic is if we could do some animation to transition the partial postback so it wouldn’t just explode with new content in our face. Now granted, that may be an overstatement. The content changes usually aren’t drastic or very distracting to but let’s add a bit of polish.

Keep in mind this is a first draft, done in about 30 minutes after an idea landed in my head at 3am. It still needs some polishing, but the major hurdles are taken care of.

For our example, we’ll have a simple Div that will be worked upon in a partial postback. Our goal will be to gently transition the display of that work to the user. Something like this.

Original Video – More videos at TinyPic

We’ll start off with some basic styles to help illustrate the change. We’ll change the content of the Div and also the class.

	#mydiv{ width:200px; border:solid 1px black; font-size:xx-large; }
	.myclass0 { height:200px; background-color:Blue; }
	.myclass1 { height:100px; background-color:Red; }
	.myclass2 { height:150px; background-color:Lime; }
	.myclass3 { height:50px; background-color:Purple; color:White; }

Nothing too exciting, but our partial postback will give us some new dimensions and style. It’ll get the point across.

Next we need some HTML.

<form id="form1" runat="server">
	<asp:ScriptManager ID="ScriptManager1" runat="server">
	</asp:ScriptManager>
	<div>
		Original time: <%= DateTime.Now.ToLongTimeString() %> 
		<asp:UpdatePanel ID="UpdatePanel1" runat="server">
			<ContentTemplate>
				<asp:Button runat="server" Text="Button" ID="MyButton"
						OnClick="MyButtonClick"
					OnClientClick="return ClientClick(this,'#mydiv'); " />
				<div id="mydiv" runat="server">
					<asp:Label runat="server" Text="Label"
                                           ID="MyLabel"></asp:Label>
				</div>
			</ContentTemplate>
		</asp:UpdatePanel>
	</div>
</form>

The magic is going to live in the ClientClick event handler, but forget about that for now. The server side OnClick event will do some trivial work.

 protected void MyButtonClick(object sender, EventArgs e)
 {
	 MyLabel.Text = DateTime.Now.ToLongTimeString();
	 var c = "myclass" + DateTime.Now.Millisecond % 4;
	 mydiv.Attributes.Add("class",c);
 }

This could just as easily toggled a view from edit mode to read-only, expanded a detailed area, etc. Here, we are just picking one of four css classese to use on the div and also giving a label the current time. Like I said this isn’t the cool part.

The final steps are to do the following:

• Get the jQuery animation to happen on the click of the button.
• Get the partial postback to wait until the animation is done.
• Get the DOM to appear in the pre-animation state when it comes back from the partial postback.
• Get the animation to happen once we have the new page ready to go.

The function needs to know what needs to be animated upon. I’ve been using slide transitions, but the animation is something I think can very easily be abstracted out. We make some quick tests to see if we are in the process of animating or if the animation has been completed. I struggled with how to delay the button click’s post back from happening until the animation is complete and finally decided to just let it happen a second time, but to flag the second click to allow it to continue posting back. I’m using the jQuery data feature to keep some state about the button.

If we are currently sliding, then there is nothing left to do, and if we are done sliding then we can skip the other steps and continue the postback.

if (d.data("isSliding")) return false;
if (d.data("doneSliding")) return true;

If we don’t meet those conditions, we need to slide. We set our flag, wire up the end request handler and the callback to the slide method and kick off the slide.

The slide method is the simplest.

d.slideUp(500,
	function() {
		d.data("isSliding", false);
		d.data("doneSliding", true);
		$(sender).click();
	});

Slide our control up, and when we’re done, set some flags and kick off the click a second time. With the flags set, we’ll fire off the postback. Nothing really fancy here either. Notice we can still reference d here. We don’t need to find it again.

The endRequest handler looks a bit more involved.

var prm = Sys.WebForms.PageRequestManager.getInstance();

var f = function(s, e) {
	d = $(whatToSlideDown);
	d.css("display", "none");
	d.slideUp(0);
	d.slideDown(500);
	prm.remove_endRequest(f);
}

prm.add_endRequest(f);

Here, inside the function we do need to ask jQuery to find what we want again. The DOM has been changed and the old d we created from $(whatToSlideUp) probably isn’t there anymore. In addition, we need to set the element in the state we left the old element. In this case, we want the display to be set to “none”. This allows the slideDown to work just like we would expect following a slideUp.

This is part of the setup that I don’t like. I’ve tried quickly running a slideUp(0) on the the new elements, but I was seeing a flash of the default state before getting the slide up. This is something that I would like to factor out. The animation, including this default state should be a parameter to the function.

Here is a look at the function as a whole. It’s a stupid function name I know, but that is easily changed.

function ClientClick(sender,whatToSlideUp,whatToSlideDown) {

	if (!whatToSlideDown)
		whatToSlideDown = whatToSlideUp;

	var d = $(whatToSlideUp);

	if (d.data("isSliding")) return false;
	if (d.data("doneSliding")) return true;

	d.data("isSliding", true);

	var prm = Sys.WebForms.PageRequestManager.getInstance();

	var f = function(s, e) {
		d = $(whatToSlideDown);
		d.css("display", "none");
		d.slideUp(0);
		d.slideDown(500);
		prm.remove_endRequest(f);
	}

	prm.add_endRequest(f);

	d.slideUp(500,
		function() {
			d.data("isSliding", false);
			d.data("doneSliding", true);
			$(sender).click();
		});
	return false;
}

That’s it. There is definitely room to polish this up and make it more flexible. I’ll post back when I get it up and running in a real application so it looks more useful.

Today, I was amazed yet again by the flexibility of Mac OS X. I was transitioning the color scheme from my text editor to the syntax highlighter for the blog and needed to convert the RGB values to Hex. The first couple I did manually, but realized there must be a utility out there that would do that for me. I found this nice little Hex Color picker.

What really amazed me was how easily extensible the Mac system color was. I dropped the plugin file in a folder, restarted my text editor and it was there. No installer. No registry settings. Pretty amazing.

When was the last time you used one of these . Not the icon, but the actual physical media? I think it’s been at least three years since I owned a PC that could actually read them and a couple years before that since I’ve actually read something off of one.

Now everyone knows the Angry Monkey story right? To paraphrase it in a sentance:

Whenever you hear “…because we’ve always done it that way,” first shut off the alarm in your head and secondly, ask for another reason. 

It might be that the reason is valid, but it might be that no one knows.

Which brings me to the de facto save icon . I would be willing to bet the kids graduating college today have never in their years at university, or probably life, ever used a floppy disk, but every one of them knows it means to save their documents by clicking on it. Now, they know what one is, and might have seen a couple in their parents’ desk drawer, but as visual correlation to its function, it falls well short. 

Following the icons down the toolbar, the bold icon looks bold, the italics icon looks like it is read to fall over, but the save icon looks like a box, within a box.

But that’s always been the save icon

Yes it has, but why? Because I use to actually put something that looked like that into my computer, click that button, and then take my stuff floppy disk out and walk away. Surely since we don’t save to floppies anymore there has to be a better icon. Some progressive company like Google surely thought this up already and I’m sure they have a cooler save icon on Google Docs. Nope. They still use . That’s actually a different icon, even through they look identical.

So why is the blue floppy disk the de facto save icon? What would a better icon be? Will people in 10 years still be putting floppy disks on their Minority Report UI’s? How could you even change something that is already so installed into nearly every user’s brain of every software community.

There is probably no other visual clue that is so widely understood. Not even the X to close a window is shared across platforms as much as the save icon. So maybe that is the reason why it has never changed and Tom Hanks is going to punch his floppy disk floating in mid air. The cost of breaking those now decades of education is too expensive.

We’re all going to be angry monkeys because angry is the new content. We stop you from climbing the latter, not because we know the outcome, because if you climb it, we all have to climb it in order for it to work.