tag (html5)

archive

html5 django form fields Jul
06 1
2

If you're ever developing for mobile it's really handy to use the HTML5 form inputs for things like email and url to bring up the contextual keyboard layouts.

An easy way to create the HTML5 input elements is to extend the Input widget input_type.

from django import forms
from django.widgets import Input


class Html5EmailInput(Input):
    input_type = 'email'


class Html5URLInput(Input):
    input_type = 'url'


class CustomForm(forms.Form):
    email = forms.CharField(widget=Html5EmailInput())
    url = forms.CharField(widget=Html5URLInput())

comments

create xhtml strict external links with jquery Mar
15 1
0

If you're anything like me when coding to the XHTML strict doctype, you get annoyed when things break your validation (Youtube, I'm looking at you). I've seen many a flame war over whether or not to let external links open a new window. It's not my intention to rekindle the flames, so lets just say this: Sometimes you just have to do what the client wants. Besides, who am I to argue? After all it's their site that they are paying me to build.

With that being said, now comes the question about how to allow links to open a new window without breaking your strict validation with the deprecated target="_blank" attribute. I've found that auto-detecting the link with jquery has been a fairly elegant and painless solution.

At this point it's worth noting that the target attribute will no longer be deprecated in HTML5, so our good friend target="_blank" will be back. But until HTML5 is better supported (cough Microsoft) we're going to be stuck with alternate solutions; so let us tarry forth.

The first thing I do is to organize my site so that all internal links are relative, and external links are absolute (starts with http://). With that in place I can then open a new window whenever I detect an href that contains http://.

$('a[href^="http://"]').click(function(event) {
    return !window.open(this.href);
});

That's a nice start, but there are rare occasions where I'd like to open a new window for an internal link, and keep an external link in the same window. For these outliers I override the script by adding a rel="internal" or rel="external" into the <a> tag and handle it with the javascript. So the complete script looks like this:

$(document).ready( function() {
    $('a[href^="http://"]').click(function(event) {
        if($(this).attr('rel') != 'internal') {
            return !window.open(this.href);
        }
    });

    $("a[rel='external']").click(function() { 
        return !window.open(this.href);
    });
});



<a href="/page">stays in the same window</a>

<a href="http://example.com">opens a new window</a>

<a href="/page" rel="external">opens a new window</a>

<a href="http://example.com" rel="internal">stays in the same window</a>

And this will cover 99% of my needs.

comments