Subscribe

Close

Thank you for visiting!

Please consider subscribing to the RSS feed or following me on Twitter.

Archive for HTML:

Foolproof Custom File Input

So you wan't a custom file upload button.

It's easy. Just hide it, add a button, a couple of click events and you're fine. Except, you're not. IE is quite strict when it comes to file inputs. Browser backward compatibility issues will make life harder for you.

Here's a working solution tested in IE9 and later, and modern browsers.

  1. Place your input file field in a hidden div.
  2. Wrap a label around the hidden div.
  3. Make the label look like a button.
  4. When the label is clicked, trigger the hidden input field.
  5. When a file is chosen, use the change event to display the file name.
The HTML:

<form action="http://localhost/upload" method="post" enctype="multipart/form-data">
<label class="button upload">Upload file
<div class="hidden">
<input class="uploadfile" type="file" />
</div>
</label>
<input type="submit" class="button" value="Submit">
<span></span>
<form>
The JavaScript:

$('.button.upload').click(function () {
var uploadFile = $(this).find('.uploadfile');
uploadFile.trigger('click');
});

$('.uploadfile').change(function() {
var elm = $(this);
var file = elm.val().split('\\');
var fileName = file[file.length - 1];
$(this).closest('form').find('span').html(fileName);
});

And the basic CSS looks like this:

.hidden { display: none }
.button { border: solid 2px #333 }

Automatic Iframe Height The Right Way

Unfortunately there still are times when you need to embed an iframe. Most of the time you would want to assign an automatic height to the iframe. It's not very easy, but it's definitely doable if you meet a couple of requirements.

Requirements needed for auto iframe height

The page calling the iframe and the iframed page should have the:

  • Same host
  • Same protocol
  • Same port

This means:

  • a page at www.domain1.com can't call a page on www.domain2.com
  • a page at domain1.com can call a page on domain1.com or on a sub domain, xx.domain1.com

For this to work, you also need to add this code snippet (in <script>) to both pages, preferably in the <head> section:

document.domain = /(\w+)(.\w+)?$/.exec(location.hostname)[0];

This code snippet tells the browser the default domain (host), which need to be the same according to the requirements above.

Common error code

This is the error you get in Chrome if you make an illegal iframe call:

Unsafe JavaScript attempt to access frame with URL http://domain1.com
from frame with URL http://otherdomain.com.
Domains, protocols and ports must match.

Now you know the solution.

Auto iframe script

Here's a working auto iframe height script you can use.

It's even non jQuery (even though it says it's jQuery).

Regarding style sheets and the title attribute

When linking to external style sheets and using the title attribute, you have to be a bit careful. I'll explain to you how to correctly link to external style sheets.

Normally, you link to an external style sheet like this:

<link rel="stylesheet" type="text/css" href="/css/main.css"
	media="screen,projection" />

Perfectly fine!

However, you'd like to add a print stylesheet to, using media="print":

<link rel="stylesheet" type="text/css" href="/css/print.css"
	media="print" />

Now, this too works fine. However - when you want to use the title attribute with your style sheets, you have to be careful.

The title attribute is great to use if you want simple style switching and alternative style sheets. But you need to know what you do to get it to work!

In this code, the print style sheet will not work, it won't be triggered in different browsers:

<link rel="stylesheet" type="text/css" href="/css/main.css"
	media="screen,projection" title="Default stylesheet" />
<link rel="stylesheet" type="text/css" href="/css/print.css"
	media="print" title="Print stylesheet" /> 

It's because the print style sheet's title attribute has a value. If the value is removed, or the whole title attribute, the print style sheet will work.

This happens because there are three different types of style sheets - and if an external style sheet is of the wrong kind - this style sheet will simply be ignored.

Three different types of style sheets

The three types of style sheets are:

  1. Persistent, which is a kind of default style sheet. No title attribute is needed.
  2. Preferred, which is the style sheet web browsers apply. Title attribute is needed.
  3. Alternate, which is alternatives to already existing style sheets. Title attribute is needed.

If these are mixed up, things might not be working as expected. Here's more on specifying external style sheets.

Conclusion

If you want your style sheets to work, make sure they're of the correct style sheet type. This final example works very well:

<link rel="stylesheet" type="text/css" href="/css/main.css"
	media="screen,projection" title="Default stylesheet" />
<link rel="stylesheet" type="text/css" href="/css/print.css"
	media="print" />

To the top