Feature Detect Placeholder to Adjust jQuery Mobile Layout

If you take a look at most of the jQuery Mobile Documentation you will see heavy use of labels and input elements inside of a fieldcontain data-role. The great thing about this technique is that it looks good on portrait layouts (labels on top & input on bottom) and also adjusts for landscape layouts (labels on the left & input on the right).


<div></div>
The HTML to generate the above screenshots can be found in the following markup.

<pre>
<div data-role="page" id="login">

<div data-role="header">
<h1>Acme Corporation</h1>
</div>

<div data-role="content">
<form id="frmLogin" class="validate">
<div data-role="fieldcontain">

<input type=”text” id=”email”
name=”email” class=”required email” />
</div>

<div data-role="fieldcontain">

<input type=”password” id=”password”
name=”password” class=”required” />
</div>

<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button id=”btnCancel” data-theme=”d”
data-icon=”delete”>Cancel</button>
</div>
<div class="ui-block-b">
<button id=”btnLogin” type=”submit”
data-theme=”a” data-icon=”check”>
Log In
</button>
</div>
</fieldset>
</div>
</form>

</div>

</div>
</pre>
I recently did a mock-up for a client using this technique, but they wanted to use the HTML5 form placeholder technique instead. I told the client that this was possible, but mentioned that not all browsers support this technique.

So, I decided to use a Progressive Enhancement approach to this problem using the Modernizer JavaScript library. I wrote some JavaScript to detect if the browser supports the placeholder HTML5 attribute and if it does, then I hide and take the text from the label element and then push the value into the input element’s placeholder attribute.

<pre>
// if placeholder is supported
if ( Modernizr.input.placeholder ) {

$( “input” ).each( function(index, element) {

var placeholder =
$(“label[for=” + element.id + “]”)
.hide().text();

$(element)
.addClass(“ui-input-text-placeholder”)
.attr(“placeholder”, placeholder);

});

}
</pre>
You can view a running example of the above code from this jsFiddle. If you are running Google Chrome, then you’ll notice the label’s are embedded as placeholder’s within the input elements, but if you are using Firefox or Internet Explorer 6/7/8 then you’ll notice the default label and input technique that is default in most of the jQuery Mobile documentation.



I’ve added some screenshots of the placeholder technique in case you are reading this blog entry in a browser that doesn’t support the HTML5 form placeholder attribute.


<div></div>

Read More »

jQuery Mobile Form Validation

Note: I've updated the following post to work with jQuery Mobile 1.0+. After the beta version they deprecated the Orientation Classes that this post originally used to handle the layout of the error messages. jQuery Mobile recommends using CSS3 Media Queries instead. If you need support for older browsers then respond.js is a nice polyfill for this.
Read More »

jQuery Conference Boston 2010 Video: Intro to jQuery UI


The presentations from last year’s jQuery Conference Boston 2010 are now online for you to view. You can click the above picture to watch my introduction to jQuery UI. The material is targeted to someone who hasn’t seen jQuery UI at all or knows very little about it.

Slides

I have hosted my slides from the presentation if you are interested.

Other Presentations

In addition you can check out most of the other sessions from the jQuery Conference Videos page.

Some of talks the talks that I found particularly interesting were…

<ul><li>Mobile UI by Filament Group</li><li>OOCSS for JavaScript Pirates by John Hann & Brian Cavalier</li><li>Inaugural State of HTML 5 by Paul Irish</li><li>Beyond the DOM: Functionality-Focused Code Organization by Rebecca Murphey</li><li>Contextual jQuery by Doug Neiner</li><li>jQuery’s Best Friends by Alex Sexton</li><li>jQuery Effects: Beyond the basics by Karl Swedberg</li><li>Theming jQuery UI like an Aristocrat by Chris Bannon</li><li>Building Extensible Widgets by Scott González</li><li>Getting Involved by Ralph Whitbeck</li></ul><div>
</div>

Read More »

Video: Good C# Habits Can Encourage Bad JavaScript Habits

Today I recorded a Webinar with DevExpress entitled “Good C# Habits Can Encourage Bad JavaScript Habits”. The webinar is embedded below.

The talk was spurred by a recent Fornt-end Architecture Review I performed where the background of the developers was primarily C#. The project was almost entirely written in JavaScript and I noticed a common set of bad JavaScript practices that appeared to have their influence in good C# techniques.

<div><div>These thoughts turned into a series of articles that I posted several months ago on Enterprise jQuery and I have recently pooled the articles into the following presentation.</div></div>
I hope that this presentation will help you prevent some of these mistakes in your projects and to let you know, I’ve made all these mistakes myself :)



<h3> Resources</h3><div>
</div>At the end of the presentation I list several resources that you might want to dig into and research for yourself.

Slides and Articles
<ul><li>I have hosted the slides from the video. I utilized an HTML5 Presentation tool and the slides are best viewed using either Google Chrome or Firefox. </li><li>The article series this video was based on can be found on Enterprise jQuery</li></ul>Tools
<ul><li>JSLint.com by Douglas Crockford</li></ul>Books
<ul><li>JavaScript: The Good Parts by Douglas Crockford</li><li>JavaScript Patterns by Stoyan Stefanov</li></ul>Articles
<ul><li>Prototypes and Inheritance in JavaScript by Scott Allen</li><li>Use Cases for JavaScript Closures by Juriy Zaytsev</li><li>JavaScript for C# Programmers series by Julian Bucknall</li></ul>Video
<ul><li>Crockford on JavaScript video series on Yahoo!</li></ul>
Mix 11 Conference

If you like this topic, then please consider voting for it to be included in the Microsoft Mix 11 conference by clicking the following tweet. Voting ends on Feb 4th. Thanks!

Read More »

Bedroom Closet to Work Office Transformation

As many of you are aware late last year the company I worked for went belly up over some shady business they were doing. My job ended the day the FBI and IRS raided our building.

That was my last day working in an office building for me. Since then, I’ve joined the fine team at appendTo as a Senior Architect doing Front-end Architecture Reviews, JavaScript and jQuery consulting, writing for Enterprise jQuery, etc… The funny thing about appendTo is that we are all spread across the United States, which means that there is no real office!

<div></div>
The fact that I have 3 kids makes finding a quiet place around the house a tad difficult. I didn’t really want to pay for an office space somewhere, so I tried to be creative in where I worked. First I tried family or neighbors close by that worked during the day. Then one day my wife suggested converting half of our Master Bedroom Closet into an office…  and that is where I am right now :)

Thankfully the closet already had an air vent otherwise I’d probably suffocate. I did need electricity and an internet connection so, my Father-in-Law wired the electricity and DSL through the Bedroom wall.

The beginnings of my Closet Office were uncomfortable and cumbersome as you can see in this first photo. The computer I had worked on previously was owned by my work and… well, the FBI confiscated that ;) So, I was left with my netbook until I could order my next computer. I bought a picnic table from Wal-Mart as a stop gap solution, but it proved to be too tall and wasted a lot of precious desk space. Also, the fold up chain didn’t cut it. I was drooping in my seat by the end of the day.

<div></div>
My Father-in-Law saw my working conditions and took me to Staples to buy me an appropriate office chair. It is amazing how much a comfortable chain can change your whole day! Ohh and and you can see, my MacBook Pro arrived :)

<div></div>
Next my Father-in-Law said that he could build me a custom desk to fit the small space. He had a bunch of wood left over from a desk he built himself a year or two ago. We took out the bottom clothes rack in half of the closet to install the desk. He used a ledger and a couple of braces to keep it strong without having table legs in the way.

<div></div>
The next step of my Closet Office was to build huge cabinets that stretched to the ceiling with lights underneath. This project took the longest and was a chore to install, but now I have tons of room to store books, pictures, coffee, bills, etc. At this stage of the project we removed the top clothes rack in half the closet.

Note: The MacBook you see below wasn’t mine. A client I worked for was really particular about security and I had to use one of their computers and work over VPN. Thankfully the project is over and I’m able to use my MacBook Pro again.

<div></div>
So, there you have it! As you can tell I own a HUGE thanks to my Father-in-Law for all his hard work.

And if you were wondering…
<ul><li>My office space takes up 5’ 2’’ x 4’ 5’’ of our total 11’ 11’’ x 4’ 5’’ closet space. We keep our clothes in the remaining part. </li><li>I like to call my working space as the “Man Cave” </li><li>And yes, I do come out of the closet every day LOL. As you could probably guess, I get that joke a lot :)</li></ul>

Read More »