Jul
27
2012

GreyBox & HTML5 Validation

By Gabriel Harper Posted in

If you’re using GreyBox in an HTML5 document you are likely to receive an error validating your HTML document.

The error looks something like this:

1
Bad value gb_page_center[500, 500] for attribute rel on element a: Keyword gb_page_center[500, 500] is not registered

The problem is, as the HTML5 validation error message explains, "gb_page_center[500, 500]" is an invalid value for the rel attribute. Chances are, this will have little to no impact on how the page actually renders – your code should still work fine and GreyBox will still function. But if you’re trying to adhere to valid HTML5 markup it doesn’t suffice.

Fortunately, I discovered a dead simple fix for the problem. Although it does involve hacking up GreyBox JavaScript (just a tiny bit though, I promise).

The HTML 5 spec allows for custom data attributes that are easily defined by prefixing the attribute name with “data-“. So, instead of using the rel attribute, we can define a custom attribute named data-rel.

So, instead of adding the rel attribute to your link, use data-rel:

1
<a data-rel="gb_page_center[500, 500]">Gabriel Harper</a>

The only problem is GreyBox is still looking for the rel attribute for its data. So, we need to change that.

We need to edit the file gb_script.js to use the new attribute name. Around line 163-164, find the following code:

1
2
if(a.getAttribute("href")&&a.getAttribute("rel")){
var rel=a.getAttribute("rel");

Now, just change rel to data-rel:

1
2
if(a.getAttribute("href")&&a.getAttribute("data-rel")){
var rel=a.getAttribute("data-rel");

That’s it! Just two lines of code. GreyBox still works, the document validates as HTML5 and we can go on feeling special for validating to a spec that’s still only loosely supported. :)

About The Author

Gabriel Harper

Gabriel Harper

Gabe is the owner and founder of Intavant, and contributes to Intavant Blog regularly with his expertise in design, development & business.

Read more articles by Gabriel Harper

Did you find this article helpful? Please subscribe!