Results 1 to 6 of 6

Thread: [RESOLVED] Input file styling

  1. #1

    Thread Starter
    Frenzied Member FishGuy's Avatar
    Join Date
    Mar 2005
    Location
    Bradford UK
    Posts
    1,708

    Resolved [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>

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    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>

  3. #3

    Thread Starter
    Frenzied Member FishGuy's Avatar
    Join Date
    Mar 2005
    Location
    Bradford UK
    Posts
    1,708

    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>
    Attached Images Attached Images  
    Last edited by FishGuy; Mar 2nd, 2011 at 04:47 AM.

  4. #4
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    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.

  5. #5

    Thread Starter
    Frenzied Member FishGuy's Avatar
    Join Date
    Mar 2005
    Location
    Bradford UK
    Posts
    1,708

    Re: Input file styling

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

  6. #6

    Thread Starter
    Frenzied Member FishGuy's Avatar
    Join Date
    Mar 2005
    Location
    Bradford UK
    Posts
    1,708

    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;
    
        }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width