Jesdisciple Posted May 23, 2008 Share Posted May 23, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.