Multiple Meta-Viewports for iPad/iPhone

It’s not ideal, as you’re manually targeting the iPad, but …

Default Viewport Code (change as needed for default mobile devices)

JavaScript code (play with as you like for your own purposes)

if( navigator.userAgent.match(/iPad/i) != null ){
	viewport = document.querySelector("meta[name=viewport]");
	viewport.setAttribute('content', 'width=1000px, user-scalable=0');

I used this in my submission for the CSS-Off, to ensure that the viewport specified for mobile devices didn’t also restrict the iPad’s version of the site.

Toggle All Checkboxes with jQuery

Just a little snippet I worked up that may be useful to someone …

$('div#checkall-wrapper input[type=checkbox]').click(function(){
	if( $(this).attr('checked') ){
		$('tdiv#wraparound-targets input[type=checkbox]').attr('checked','checked');
		$('div#wraparound-targets input[type=checkbox]').removeAttr('checked');

Make sense?

Convert User Input to Number

Handy little snippet I just kicked together:


Just put it on any input element (or textarea if you really wanted to) and when a user is finished entering data, it will strip it down to a number, formatted to two decimal places.

Not that I typically advocate for writing javascript inline like this, but occasionally it’s the quick fix that the client wants!

Give it a demo here: