It's a common need in web apps: you click something and the text of the thing you just clicked changes. Perhaps something simple like a "Show" button that swaps to "Hide", or "Expand Description" to "Collapse Description." This is a fairly simple thing to do, but there are various considerations to make. Let's cover a bunch of ways.

jQuery Way (Less Markup / More JavaScript)

You need to store the "swap" text somewhere. I'd say in most cases it is a design/view concern so storing it in the markup is a good idea. We'll use the example of a button who's text swaps between "Hide" and "Show". A data-* attribute is a perfectly good place to store the swap text. So that becomes:

<button data-text-swap="Show">Hide</button>

It's easy to swap out the text, like:

var button = $("button");
    button.text(button.data("text-swap");

But, if we did that we'd lose the orignal text forever. We need to store the original text first. Another data-* attribute will do.

var button = $("button");
    button.data("text-original", button.text());
    button.text(button.data("text-swap"));

To do that on a click event, you'd do:

var button = $("button");
    button.on("click", function() {
      button.data("text-original", button.text());
      button.text(button.data("text-swap"));
    });

But that only goes one direction. To complete the "swap", we'll need to compare the current text value of the button to see if it matches the swap text or not. If it does, change it back to the original. If not, to the swap text. This is what it looks like all done:

$("button").on("click", function() {
      var el = $(this);
      if (el.text() == el.data("text-swap")) {
        el.text(el.data("text-original"));
      } else {
        el.data("text-original", el.text());
        el.text(el.data("text-swap"));
      }
    });

jQuery Way (More Markup / Less JavaScript)

If we're willing to set that data-text-original value in the original markup, we can simplify the JavaScript a bit. We can use a single ternary operator to check if the swap matches the orignal and perform the right action based on the truthiness.

$("button").on("click", function() {
      var el = $(this);
      el.text() == el.data("text-swap") 
        ? el.text(el.data("text-original")) 
        : el.text(el.data("text-swap"));
    });

Vanilla JavaScript Way

I'm guilty of using too much jQuery around here for things that can be done without it. This is what the first "less markup" version would look like in "raw" JavaScript:

var button = document.querySelectorAll("button")[0];
    button.addEventListener('click', function() {
      if (button.getAttribute("data-text-swap") == button.innerHTML) {
        button.innerHTML = button.getAttribute("data-text-original");
      } else {
        button.setAttribute("data-text-original", button.innerHTML);
        button.innerHTML = button.getAttribute("data-text-swap");
      }
    }, false);

CSS Way (with jQuery changing class names)

Since this is a view concern and could be considered a "state," a popular idea is to use JavaScript only to change classes which represent states and let CSS define what the visual change actually is.

We could use the class "on" to represent the swap state. Then that class would apply a pseudo element covering the old word and replacing it with the swap word. I don't think actual button elements with default browser styling take well to pseudo element so let's use an anchor here.

a {
      position: relative;
    }
    a.on:after {
      content: "Hide";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: white;
    }

This is a bit funky, to be fair. I think this is almost worse that putting the swap word in the JavaScript. CSS isn't really meant for this kind of thing and likely has some accessibility concerns.

This also happens to work because the word "Hide" is smaller than "Show" a little bit. If the swap word was bigger, the original would stick out underneath the white cover. You might be able to get around that by inline-blocking the original, hiding the overflow, and kicking the original out of the box with text-indent. But the fact that the replacement word is absolutely positioned removes it from the flow, which could be an issue, not to mention real world design isn't always a simple as flat-color-on-flat-color.

CSS-Only Way

But hey as long as we're getting funky, we could use The Checkbox Hack here to make the text swap entirely CSS. The replacement happens the exact same way, it just happens when an invisible checkbox right before the word is either :checked or not. This means the word needs to be in a label as well, which is able to toggle that checkbox's state through the for attribute.

<input id="example-checkbox" type="checkbox">
    <label for="example" id="example">Show</label>

#example {
      position: relative;
    }
    #example-checkbox {
      display: none;
    }
    #example-checkbox:checked + #example:after {
      content: "Hide";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: white;
    }

Demo of All Five Ways

Check out this Pen!

More?

How have you done this kind of thing in the past? We didn't cover just putting the swap word right in the JavaScript... how do you feel about that?

Swapping Out Text, Five Different Ways is a post from CSS-Tricks

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about Responsive Images and HTML5 Form Inputs.

Here are the links for the week:

Midway.js | Automatically center responsive elements! | A project by Shipp Co.
http://shipp.co/midway/

Say Goodbye to Painful Image Loads on Small Devices. Say Hello to Interchange. by ZURB
http://zurb.com/article/1211/say-goodbye-to-painful-image-loads-on-sma

A Guide to the New HTML5 Form Input Types
http://sixrevisions.com/html5/new-html5-form-input-types/

Prinzhorn/skrollr
http://github.com/Prinzhorn/skrollr

Flippant.js
http://mintchaos.github.io/flippant.js/

Yes, you really can make complex webapps responsive
http://adioso.com/blog/2013/06/responsifying-adioso/

Progression.js
http://git.aaronlumsden.com/progression/#demo

Ughck. Images. – daverupert.com
http://daverupert.com/2013/06/ughck-images/

The post Responsive Images and HTML5 Form Inputs – Treehouse Show Ep 46 appeared first on Treehouse Blog.

Webfonts have been revolutionary on the web; they’ve changed the appearance of websites in a way that arguably no other web technology has.

Yes, it’s true that many webfonts aren’t hinted correctly for Windows; yes, it’s also true that many haven’t been drawn for the screen; yes, it’s also true that matching available webfonts to fonts used for print work can be difficult, if not impossible. At least, that used to be the case.

Those designer headaches may now become a thing of the past with the launch of Cloud.typography from the Hoefler & Frere-Jones type foundry.

H&FJ have been one of the most prolific type foundries of the last quarter-century, but until now most of their fonts haven’t been available for the web. Their new service, Cloud.typography, is a long awaited solution to that issue.

Each H&FJ typeface is presented with a rich biography.

Fonts are more than an author’s handwriting, they’re tools for articulating information. Cloud.typography gives designers the tools they need to communicate in the ways that readers deserve. Its webfonts have rich style palettes and deep character sets, to help designers present content with clarity, subtlety, and distinction.

Like Google fonts, Cloud.typography is a CSS solution with no JavaScript required — presumably the fonts are encoded as base64 strings. Far more importantly Cloud.typography carries the complete H&FJ collection, over 900 fonts, which means some of the very best typefaces are now available for web use.

A huge range of character options are available in fonts like Hoefler Text.

Cloud.typography also introduces H&FJ’s ScreenSmart collection, which is a set of 250 workhorse fonts that have been redesigned and engineered for use on screens. This enables clarity and character that you often don’t see in lesser-quality webfonts; with ScreenSmart fonts you can actually see the difference between bold and semi-bold, even at body text size. You can select from a variety of styles, include extra characters like ligatures and small caps, or remove them to keep file size low.

Comparing Hoefler Text with Times.

The biggest news is that the typographers’ favorite, Gotham, is now available as a webfont. For web use only, the classic typeface is free for use by subscribers. What’s more, Gotham has been redesigned for use at small screen sizes as part of the ScreenSmart fonts collection.

The new ScreenSmart Gotham.

Comparing Gotham ScreenSmart with Helvetica at 14pt.

Inevitably this comes at a cost. However, the price is surprisingly reasonable: subscriptions start from $99 per year for up to 250,000 pageviews, and that $99 includes your first 5 webfont packages. You can build as many projects as you like, but only 10 can be active at once (adding another 5 costs $1 per month).

Cloud.typography is not as cheap as Google Webfonts, or (for those with a CC subscription) Adobe’s Typekit. However, for the discerning type professional with a love for quality typography, H&FJ’s webfont offering is like manna from heaven.

Have you subscribed to Cloud.typography? Will you be overusing Gotham in the near future? Let us know in the comments.

WordPress Form Builder Plugin – only $11!

W3C has published a new edition of Standards for Web Applications on Mobile, an overview of the various technologies developed in W3C that increase the power of Web applications, particularly in the mobile context.

A deliverable of the webinos project, this edition highlights some of the HTML 5.1 features that are most relevant on mobile, integrates more specs from the SysApps Working Group. It also features a printer-friendly PDF version, and makes it easier to contribute to test suites via github.

Learn more about the Web and Mobile Devices.

Intel announces the re-release of the XDK HTML development tool following the original launch of the tool back in April.