Creating Pop-up Windows with Custom Data Attributes in Html5

Creating Pop-up Windows with Custom Data Attributes

If we built any web application that uses JavaScript to grab infor- mation out of the document, you know that it can sometimes involve a bit of hackery and parsing to make things work. You ’ l l end up insert- ing extra information into event handlers or abusing the rel or class attributes to inject behavior. Those days are now over thanks to the introduction of custom data attributes.
Custom data attributes all start with the prefix data- and are ignored by the validator for HTML5 documents. You can attach a custom data attribute to any element you’d like, whether it be metadata about a photograph, latitude and longitude coordinates, or, as you’ll see in this tip, dimensions for a pop-up window. Best of all, you can use custom data attributes right now in nearly every web browser, since they can be easily grabbed with JavaScript.

Separating Behavior from Content, or Why onclick Is Bad Custom Data Attributes in Html5

Over the years, pop-up windows have gotten a bad reputation, and often rightly so. They’re often used to get you to look at an ad, to con- vince unsuspecting web surfers to install spyware or viruses, or, worse, to give away personal information that is then resold. It’s no wonder most browsers have some type of pop-up blocker available.Pop-ups aren’t all bad, though. W e b application developers often rely on pop-up windows to display online help, additional options, or other important user interface features. To make pop-ups less annoying, we need to implement them in an unobtrusive manner. When you look at AwesomeCo’s human resources page, you see several links that display policies in pop-up windows. Most of them look like this:

<a href='#'
onclick= "'holiday_pay.html',WinName,'width=300,height=300);" >
Holiday pay </a>

This is a pretty common way to build links that spawn pop-ups. In fact, this is the way JavaScript newbies often learn how to make pop up windows. There are a couple of problems that we should address with this approach before moving on, though.

Improve Accessibility Custom Data Attributes in Html5

The link destination isn’t set! If JavaScript is disabled, the link won’t take the user to the page. That’s a huge problem we need to address immediately. Do not ever omit the href attribute or give it a value like this under any circumstances. Give it the address of the resource that would normally pop up.

<a href='holiday_pay.html' 
onclick= ",WinName,'width=300,height=300);" >
 Holiday pay

Abolish the onclick  Custom Data Attributes in Html5

Keep the behavior separate from the content, just like you keep the presentation information separate by using linked style sheets. Using onclick is easy at first, but imagine a page with fifty links, and you’ll see how the onclick method gets out of hand. Y o u ’ l l be repeating that JavaScript over and over again. And if you generate this code from zome server-side code, you’re just increasing the number of JavaScript events and making the resulting HTML much bigger than it needs to be. Instead, give each of the anchors on the page a class that identifies them.

<a href="holiday_pay" class="popup">Holiday Pay</a>

Custom Data Attributes to the Rescue in Html5!

Situations like this are common when building any JavaScript-enabled application. As we’ve seen, storing the window’s desired height and width with the code is desirable, but the onclick approach has lots of drawbacks. What we can do instead is embed these attributes as attri- butes on the element. All we have to do is construct the link like this:

<a href=
   data-width= "600"
   data-height= "400" 
   title= "Holiday Pay" 
   class= "popup" >
Holiday pay</a>

Now we just modify the click event we wrote to grab the options from the custom data attributes of the link and pass them to the method.

Falling Back with Custom Data Attributes in Html5

These attributes work in older browsers right now as long as they sup- port JavaScript. The custom data attributes won’t trip up the browser, and your document will be valid since you’re using the HTML5 doctype, since the attributes that start with data- will all be ignored.

The Future

We can do some interesting things with these new tags and attributes once they’re widely supported. We can identify and disable navigation and article footers very easily using print style sheets.

nav, article>footer{display:none}

We can use scripting languages to quickly identify all of the articles on a page or on a site. But most important, we mark up content with appropriate tags that describe it so we can write better style sheets and better JavaScript.
Custom data attributes give developers the flexibility to embed all sorts of information in their markup.
We can also use them to display dates and times in a user’s time zone while still caching the page. Simply put the date on the HTML page as UTC, and convert it to the user’s local time on the client side. These attributes allow you to embed real, usable data in your pages, and you can expect to see more and more frameworks and libraries taking advantage of them. I’m sure you’ll find lots of great uses for them in our own work with Custom data attributes in Html5