Submit a file input using the jQuery File Upload plugin

Recently, I found out that ASP.NET MVC’s Ajax.BeginForm helper doesn’t support AJAX file uploads out of the box. After some Googling, it turned out that one of the most popular solutions to this conundrum is Sebastian Tschan’s jQuery File Upload plugin.

The upload demos are easy to follow, and can be pretty much copied onto a page (with the necessary scripts of course!) and then you’re good to go. The files selected will automatically get uploaded. Neato! (One more thing…the plugin provides a fallback for non-AJAX submissions.)

basic-upload

But what if, as in my case, you already have an existing form and just need the upload functionality when the form is submitted? There are several ways to configure the plugin for your needs, and I’ve posted mine as a GitHub fork.

basic-upload-submit

Web Design Applied: Giving Your Users Some Space

How well do you manage the white space on your web pages?

If your source code is littered with things like

A line of text<br><br>
Some more text

or

<td>&nbsp;</td>

then the answer is probably: “Not too well.”

I don’t care that it works, or that it’s the way your team has always done it. To borrow a book title from Kim Golombisky, white space is not your enemy. There are several CSS properties which are related to controlling spacing, and knowing when and how to use them just might save you a code-related headache or two. Continue reading

One of these things is not like the other

I’ve been reading Steve Krug‘s “Don’t Make Me Think: A Common Sense Approach to Web Usability”, and though this book was printed in 2006, which in Internet time is a looong time ago, the topics are still very applicable to web design today.

For instance, in the chapter about navigation, Steve has these suggestions about marking the current location:

skrug_dontmakemethink

Essentially, the point is to make things that are the same look the same, and the thing which is different from the rest must visually stick out. So this takes us back to Gestalt Theory, in particular, the Law of Similarity.

While we’re on the topic, can you identify what Elements of Web Design you would use to create the menus that Steve suggested?

HTML5: Fun with Drag and Drop

If you search for “HTML5 drag and drop” on the Web, you’ll probably get a whole bunch of pages which demonstrate this interactive feature, but few with in-depth explanations. The best-documented article I’ve come across on drag-and-drop (or DnD as some bloggers refer to it…but that makes it sound too much like Dungeons and Dragons IMO) is by a person whose real name is Zoltan. I strongly suggest that you read through the whole article before heading to the download section where you can grab the code for the full drag and drop example which looks like this:

Image

Now I’m a firm believer in learning through experience, so I downloaded Zoltan’s code, and after some tinkering, and a lot of Googling, came up with my own infinite dessert buffet (which, in hindsight, is similar to this HTML5 demo, only more appetizing):

Image

For this drag-and-drop activity, I set two rules:

  1. You can only get one dessert item at a time.
  2. You can’t return the dessert item once you’ve put it on the plate.

Continue reading

On datepicker scripts

Your calendar widget search may be over

I used the Unobtrusive Javascript datepicker from frequency-decoder.com on a recent project, and I recommend it to those who are searching for a simple date picker or calendar widget to put on their web pages. It’s very forgiving when it comes to date parsing, and I found it much simpler to style than a jQuery UI Date picker.

Continue reading