[RESOLVED] Input file styling

Hi,

I have been trying to get this tutorial blog to work all day. So far I cannot get it to work and look as planned. Could someone show me a working example please.
http://www.quirksmode.org/dom/inputfile.html

I am using in in VS2010 in a aspx page

so far I have a cees file with this in it

Code:

form.example input:focus { background-color: transparent; } form.example div.fileinputs { position: relative; height: 30px; width: 280px; } form.example input.file { width: 300px; margin: 0; } form.example input.file.hidden { position: relative; text-align: right; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 2; } form.example div.fakefile { position: absolute; top: 0px; left: 0px; width: 350px; padding: 0; margin: 0; z-index: 1; line-height: 90%; } And the aspx like this but it renders wrong HTML Code: form.example div.fakefile input { margin-bottom: 5px; margin-left: 0; }

HTML Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="example.aspx.cs" Inherits="example" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="css/2010.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var W3CDOM = (document.createElement && document.getElementsByTagName); function initFileUploads() { if (!W3CDOM) return; var fakeFileUpload = document.createElement('div'); fakeFileUpload.className = 'fakefile'; fakeFileUpload.appendChild(document.createElement('input')); var image = document.createElement('img'); image.src = '/images/buttons/browse.png'; fakeFileUpload.appendChild(image); 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].className = 'file hidden'; var clone = fakeFileUpload.cloneNode(true); x[i].parentNode.appendChild(clone); x[i].relatedElement = clone.getElementsByTagName('input')[0]; x[i].onchange = x[i].onmouseout = function () { this.relatedElement.value = this.value; } } } </script> </head> <body> <form action="#" class="example"> <div class="fileinputs"> <input type="file" class="file hidden" noscript="true" /> <div class="fakefile"> <input /> <img src="images/buttons/browse.png" alt="Browse" /> </div> </div> </form> </body> </html>

Re: Input file styling

Well, the tutorial sets up a function, but the function is never called. You'll need to add something like:

Code:

window.onload = function(){ initFileUploads(); }

Also, your markup shouldn't contain div.fakefile and its contents to begin with: those get generated automatically by the Javascript. All you should have is:

Code:

<div class="fileinputs"> <input type="file" name="whatever"/> </div>

1 Attachment(s)

Re: Input file styling

Thanks, I have now got the javascript working but the formatting is not right, I have attached a pic of the items with the opacity only set to 60 so they are viewable. How do I get them to line up?

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> form.example div.fileinputs { position: relative; height: 30px; width: 280px; } form.example input.file { width: 300px; margin: 0; } form.example input.file.hidden { position: relative; text-align: right; -moz-opacity:0 ; filter:alpha(opacity: 60); opacity: 0; z-index: 2; } form.example div.fakefile { position: absolute; top: 0px; left: 0px; width: 350px; padding: 0; margin: 0; z-index: 1; line-height: 90%; } </style> <script type="text/javascript"> window.onload = function () { initFileUploads(); } var W3CDOM = (document.createElement && document.getElementsByTagName); function initFileUploads() { if (!W3CDOM) return; var fakeFileUpload = document.createElement('div'); fakeFileUpload.className = 'fakefile'; fakeFileUpload.appendChild(document.createElement('input')); var image = document.createElement('img'); image.src = '/images/buttons/browse.png'; fakeFileUpload.appendChild(image); 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].className = 'file hidden'; var clone = fakeFileUpload.cloneNode(true); x[i].parentNode.appendChild(clone); x[i].relatedElement = clone.getElementsByTagName('input')[0]; x[i].onchange = x[i].onmouseout = function () { this.relatedElement.value = this.value; } } } </script> </head> <body> <form action="#" class="example"> <div class="fileinputs"> <input type="file" name="whatever"/> </div> </form> </body> </html>

Re: Input file styling

You can adjust properties (such as height, width, font-size) on form.example input.file.hidden until it's looking right. It doesn't need to line up precisely; if you make it big enough to cover your fake control, you could add "overflow: hidden" to form.example div.fileinputs to keep the click-area contained.

Re: Input file styling

I can get the button and image to line up but not the image and the text box.

Re: Input file styling

OK I figured it after using border to see what was what and adding absolute positioning to the img

HTML Code:

/*Big container*/ #manualupload-fileupload-container div.fileinputs { position: relative; height: 50px; width: 500px; margin: 0px 0px 0px 0px; } /* #manualupload-fileupload-container fileinputs.file { width: 350px; border-color:green; border:5px; border-style:solid; } */ /*wraps hidden input control button and text components individually */ #manualupload-fileupload-container input.hidden { position: relative; text-align: right; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0.0; z-index: 2; width:290px; padding:5px; } /*wraps fake input box and image button*/ #manualupload-fileupload-container div.fakefile { position: absolute; top:0px; padding: 5; margin: 0; z-index: 1; line-height: 90%; } /*is fake input box*/ #manualupload-fileupload-container div.fakefile input{ position: absolute; top:0px; width: 200px; padding: 5; margin: 0; z-index: 1; line-height: 90%; } #manualupload-fileupload-container div.fakefile img{ position: absolute; top:0px; left:210px; padding: 5; margin: 0; z-index: 1; line-height: 90%; } #manualupload-fileupload-container div.horizontal-panel container { width:500px; border-color:Red; border:1px; border-style:solid; }