Jump to content

Fake File Input Too Low


Jesdisciple

Recommended Posts

I'm tweaking http://www.quirksmode.org/dom/inputfile.html but the fake file input scoots away from its containing SPAN while the real file input and the Clear button are slightly higher. How can I align them neatly? Thanks! (I'm using the CSS provided because the JavaScript didn't 'cut it'.)EDIT: Woops, I missed my 'd' in the SCRIPT SRC value at first. Now my problem is that the fake doesn't even appear and the Clear button breaks the line (the reason I changed the DIV in the JavaScript to a SPAN).EDIT2: I had completely broken it for a bit, but I'm back to my original problem now: The fake is too low.

/* CSS Document */span.fileinputs {	text-align: right;	position: relative;}span.fakefile {	position: absolute;	top: 0px;	left: 0px;	z-index: 1;}input.file {	position: relative;	-moz-opacity:0 ;	filter:alpha(opacity: 0);	opacity: 0;	z-index: 2;}

styledFileInput.js

// JavaScript Documentvar W3CDOM = (document.createElement && document.getElementsByTagName);    function initFileUploads() {	if (!W3CDOM) return;    var fakeFileUpload = document.createElement('span');    fakeFileUpload.className = 'fakefile';    var text = document.createElement('input');    text.type = 'text';    text.readonly = 'readonly';    fakeFileUpload.appendChild(text);    var browse = document.createElement('input');    browse.type = "button";    browse.value = 'Browse...';    fakeFileUpload.appendChild(browse);    var clear = document.createElement('input');    clear.type = "button";    clear.value = 'Clear';	var x = document.getElementsByTagName('input');	for (var i=0;i<x.length;i++) {		if (x[i].type != 'file') continue;		if (x[i].parentNode.className != 'fileinputs') continue;        x[i] = fixFileUpload(x[i], fakeFileUpload.cloneNode(true), clear.cloneNode(true));        x[i].clear.onclick = function(){            var file = fixFileUpload(document.createElement('input'), this.file.fake, this.file.clear);            this.file = file;            this.file.onchange();        }	}}function fixFileUpload(file, fake, clear){    if(clear.file){        clear.file.parentNode.replaceChild(file, clear.file);    }    clear.file = file;    file.fake = fake;    file.clear = clear;    file.type = 'file';    file.className = 'file hidden';    file.relatedElement = fake.getElementsByTagName('input')[0];    file.onchange = file.onmouseout = function () {        this.relatedElement.value = this.value;    };    file.parentNode.appendChild(fake);    file.parentNode.appendChild(clear);    return file;}window.onload = function(){    initFileUploads();}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...