Start Free Trial

asked on

CSS issues

Hello Experts,

I have an ASP.NET FileUpload Control that I'm trying to style. The style below works fine in IE8 and IE9 but not FF 14.01. Please see my current style below for this control.

    article .fileupload {
        width: 353px;
        height: 32px;
        font: inherit;
        font-size: 0.875em; /* 14px / 16px */
        color: #474747;
        background-color: #fff;
        border: 1px solid #dcdcdc;
    }

Open in new window

I have attached a screenshot for this control viewd in FF and IE. Like I said before it appears fine with IE8 and IE9 just not FF 14.01.
ff.gif
ie.gif

What does the rendered HTML look like in FF?

ASKER

Hi LZ1,

Is this what you mean below? When I run the page and view source this is what I get below for that control.

<input type="file" name="fuVerificationForm" id="fuVerificationForm" class="fileupload" />

You maybe able to use this hack, the File input has security considerations.
http://www.quirksmode.org/dom/inputfile.html

ASKER

All,

I also just tested in Google Chrome and below is how Chrome renders the FileUpload Control. Any idea how I can change this in Chrome to look like IE8 and IE9? I can get by with FF displaying it the way it does but I really would like to have it fixed in Chrome. This site will only be viewed for employees who mostly use IE8+ and Chrome, a few FF users.

Please see the attched screen shot to see how chrome handles this.
chrome.gif

Did you check the link I posted? It is not as simple as a bit of css.

I was just going to say that Gary. :)

It looks like your going to have to use Javascript to style it.

http://www.quirksmode.org/dom/inputfile.html#link9

ASKER

Ok, but what about Chrome? Do I still need to use Javascript? If so, can you help assist using Javascript with FF and Chrome or at least just chrome?

I'd say that Javascript would be the best way to do it all the way around. It's probably going to give you the best shot at looking the same cross-browser

ASKER

@LZ1,

Ok, is there any way you can help me implement that using Javascript?

How about something a little easier:
http://www.divology.com/wp-content/themes/divology/tutorials/custom-file-input/index.html

Since there is no direct way, even with jquery we have to go around and on top of what we're trying to do.

Check out the demo above and let me know your questions.

ASKER

Hi LZ1,

Ok, is there a way to make it look like the FileUpload Control when viewed using IE8 and IE9? If so, then will you be able to help? Also, if we where to make it look like that just for FF then how would it look for IE8 and 9.

ASKER

Hi LZ1,

Are you still able to assist?

Did you try my link above? Was that able to get you close?

ASKER

Hi lz1,

I did not understand what I had to do with your last post.

If you look at the source of the link I gave you, you'll notice there is no absolute 100% way in just CSS you'll get the file input to look the same cross-browser. We have to use a little jquery love to achieve what your looking for.

The demo above is pretty basic and should provide you with a starting point for your input. Obviously you'll have to tweak classes and other things to make it match your design.

Here's the source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Custom Input File Field</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
/* function to display file name when selected */
$.fn.fileName = function() {
	var $this = $(this),
	$val = $this.val(),
	valArray = $val.split('\\'),
	newVal = valArray[valArray.length-1],
	$button = $this.siblings('.button');
	if(newVal !== '') {
		$button.text(newVal);
  	}
};

$().ready(function() {
	/* on change, focus or click call function fileName */
	$('input[type=file]').bind('change focus click', function() {$(this).fileName()});
});
</script>
<style>
/* container of the file upload elements and look of the field */
.file {
	display: inline-block;
	width:250px;
	position: relative;
	background: #eee;
	border-bottom:solid 1px #e0e0e0;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	margin-bottom:10px;
}
/* style text of the upload field and add an attachment icon */
.file .button {
	background:url(ico_clip.png) no-repeat 97% 50%;
	text-indent:10px;
	font-family:Arial, sans-serif;
	font-size:12px;
	color:#555;
	height:40px;
	line-height:40px;
	display: block;
}
/* hide the real file upload input field */
.file input {
	cursor: pointer;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	filter: alpha(opacity=1);
	-moz-opacity: 0.01;
	opacity: 0.01;
	font-size: 100px;
}
</style>
</head>
<body>
	<div class="file">
		<input type="file" id="fileUpload" name="fileUpload" />
		<span class="button">Choose File to Upload</span>
	</div>
</body>
</html>

Open in new window

ASKER

Hi lz1,

Ok, not sure how to implement that with my currect markup / css. But I tried to post what you provided into my current markup and recieved the following error belwo.

Error Message:
Unhandled exception at line 20, column 9 in http://localhost:2488/ShapeUpReporting_12-13/application/secure/annualphysical.aspx

0x800a1391 - Microsoft JScript runtime error: '$' is undefined

Error found on this line:
$.fn.fileName = function () {
var $this = $(this),
$val = $this.val(),
valArray = $val.split('\\'),
newVal = valArray[valArray.length - 1],
$button = $this.siblings('.button');
if (newVal !== '') {
$button.text(newVal);
}
};

Are you using Jquery?

If not add this just above where you added the other JS:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Open in new window

ASKER

Yes, I'm using jQuery 1.8.1.

Can you post the rendered HTML for that page?

ASKER

Yes, thank you LZ1. I'm attaching the rendered HTML for that page.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>
	2012-13 Shape-Up Reporting System - Annual Physical
</title><meta name="description" /><meta name="viewport" content="width=device-width" />

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" href="../../css/main.css" /><link rel="stylesheet" href="../../css/jquery-ui-1.8.22.custom.css" />
    <script src="../../Scripts/modernizr-2.6.1.min.js"></script>
</head>
<body>
    <form method="post" action="annualphysical.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1" enctype="multipart/form-data">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="pZywSVA1IDCM7Wah4aOeWJmLhXLDDLNhts6HIMQNirbkZiBYoSVW1eBXVdlMa5dLvjVo6NaAvK3m6s9wJpdNOEjv2Z6z5NbIh3IUgWpV3KsTUT8e/noVxR+7z36log0EXREc24JV4kUllSVjmYJDbl/+djfxiLCbKUEoqdUNZ4MZT9HAVYH3BGa4M8aa5W4oHqpii1jNPpzgqbuGqoe6j2kwQ2hEvd0xtE14kWCkceM6Zb4Ker14Ce+Lf4ozgC6YqF7CoWKzW6T30kW89OJ3A/my+qluAGwoPuJAJZzgXHWnz+DVuvB7tNrMIYMtlvIRRw3GmNizY0CNB04cQElWrJcCuoLiXd+6ZevWD1vh0qk9v9wfQQxeFBqw66GuPDRag3/xts02CYHdg8wJN1tTemZSB9G1eVti93dNOtwlAGvXnnRgAEtsAheIvOSBtf5WJL/tsVJso6FwezWsO+AZd4hoo4bp/3t9zTf7IdIM5yDrusEaYqou8+e0NVyzYSOdki5bbdhQPab/WXOWr6lG7HVdiLhep+/tXHsS0gEBpSN933VCbTMjmAZj4udC432iu0XJSCYPcuqqERaDB3MCgi/cYWSA69QaFC7TSB2+ZPZaaVtLgTeKaS00LMzb0eFbkEwgTkwSoirBQlJcvbEqYLLmGzSt/qkA29EYLiSn/rM8yxvS2D1hpWFqIxVaftGlHPJUshSVbqotADUzkuTOl0SiawaMS0JBZ5qEwpP1hRHgyF3Rl28tgow3G87lbFFDLfSoj6FxDf0wepcdwMmY61KkTi06tPv2ewh5H8ND5NPsim6YVIFEuBafAOyCYUBx" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/ShapeUpReporting_12-13/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZFPiWbodwbKVVemmfoSzZDfbaIQFfhid-eXNi9DxvE--M815Sn3Zj_oaH2FyqVmAmw2&amp;t=634773918900000000" type="text/javascript"></script>


<script src="/ShapeUpReporting_12-13/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/ShapeUpReporting_12-13/WebResource.axd?d=x2nkrMJGXkMELz33nwnakCf547vp18CF0tw92qteGQcCa6jdLNoQo5oRchDBxkMh-Aqb4fFk6Te33LRyptOCKqE9KcBq2ChkudZ4BLNnHg41&amp;t=634773918900000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="KkkKjpXgxjbjQcmlZMaaOdSvDC+34tWU6RJZDdzEKhDyW2tWck4RTyH2jDBb8zwNtUlezdN42iLQR2SmlTkH6ufTLgx8XlB6aPnGuHBbBNDzj/PWJznXBKXWE1pF/nGGok/GZ+XaLCo7+At9nLjuvjbg35qhJDmevW8TM9Ik10CVFEWEIzzH5tlCJMYCtjUgFTGriOTMboFiocsjd68qkSqIi9PnoET2pRo1D4X+YLY=" />
</div>
        <div id="page">
            <header>
                <img src="../../img/logo-orange.png" alt="Shape-Up Logo" />
                <nav>
                    <ul>
                        
                        <li class="lftlogin"><span id="lblFullNameSession" class="lftlabel">Welcome Brian Loedding</span><a href="employeeprofile.aspx" class="rgtprofile">Manage Account Settings</a></li><a id="lb_logout" class="rgtlogin" href="javascript:__doPostBack(&#39;lb_logout&#39;,&#39;&#39;)">Logout</a>
                    </ul>
                </nav>
            </header>
  
            <article>
                <h1>Annual Physical</h1>
                <p class="warning">All fields are required.</p>
                <span id="lblDateCompleted" class="label">Date Completed</span><br />
                <input name="txtDateCompleted" type="text" id="txtDateCompleted" class="textbox" />&nbsp;&nbsp;<span data-val-controltovalidate="txtDateCompleted" data-val-errormessage="required" id="rfv_DateCompleted" class="warning" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">required</span><br /><br />
                <span id="lblVerificationForm" class="label">Verification Form (PDF)</span><br />
                <input type="file" name="fuVerificationForm" id="fuVerificationForm" class="fileupload" size="42" />&nbsp;&nbsp;<span data-val-controltovalidate="fuVerificationForm" data-val-errormessage="required" id="rfv_FileUpload" class="warning" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">required</span>&nbsp;&nbsp;<br /><br />
                
                
                <br />
                <br />
                <span class="checkboxtext"><input id="cb_AnnualPhysical" type="checkbox" name="cb_AnnualPhysical" /><label for="cb_AnnualPhysical"> I agree - that all information has been completed to the best of my knowledge.</label></span>
                <br />
                <br />
                <input type="hidden" name="hf_emp_id" id="hf_emp_id" value="1100" />
                <input type="hidden" name="hf_ap_id" id="hf_ap_id" />
                <input type="submit" name="btn_AnnualPhysical" value="Submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;btn_AnnualPhysical&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="btn_AnnualPhysical" class="button" />
                <br />
                <br />
                
            </article>

            <section>
                <h2>Your Progress</h2>
                <ul>
                    <li><img id="img_WellnessProfile_X" src="../../img/RedXOnly.png" />&nbsp;&nbsp;&nbsp;<a id="hl_WellnessProfile" class="hyperlink" href="wellnessprofile.aspx">Wellness Profile</a></li>
                    <li><img id="img_AnnualPhysical_X" src="../../img/RedXOnly.png" />&nbsp;&nbsp;&nbsp;<a id="hl_AnnualPhysical" class="hyperlink" href="annualphysical.aspx">Annual Physical Exam</a></li>
                    <li><img id="img_PreventiveScreenings_X" src="../../img/RedXOnly.png" />&nbsp;&nbsp;&nbsp;<a id="hl_PreventiveScreenings" class="hyperlink" href="preventivescreenings.aspx">Preventive Screenings</a></li>
                    <li><img id="img_GeneralHealthOne_X" src="../../img/RedXOnly.png" />&nbsp;&nbsp;&nbsp;<a id="hl_GeneralHealthOne" class="hyperlink" href="ghapone.aspx">GHA Program One</a></li>
                    <li><img id="img_GeneralHealthTwo_X" src="../../img/RedXOnly.png" />&nbsp;&nbsp;&nbsp;<a id="hl_GeneralHealthTwo" class="hyperlink" href="ghaptwo.aspx">GHA Program Two</a></li>
                    <li><img id="img_GeneralHealthThree_X" src="../../img/RedXOnly.png" />&nbsp;&nbsp;&nbsp;<a id="hl_GeneralHealthThree" class="hyperlink" href="ghapthree.aspx">GHA Program Three</a></li>
                    <li><img id="img_SpecificHealth_X" src="../../img/RedXOnly.png" />&nbsp;&nbsp;&nbsp;<a id="hl_SpecificHealth" class="hyperlink" href="specifichealth.aspx">Specific Health Awareness</a></li>
                    <li><img id="img_PhysicalActivity_X" src="../../img/RedXOnly.png" />&nbsp;&nbsp;&nbsp;<a id="hl_PhysicalActivity" class="hyperlink" href="physicalactivity.aspx">Physical Activity</a></li>
                </ul>
            </section>

            <footer>
                
            </footer>
        </div>
    </form>

  <!-- JavaScript at the bottom for fast page loading -->
  <script src="../../Scripts/jquery-1.7.2.js"></script>
  <script src="../../Scripts/jquery-ui-1.8.22.custom.min.js"></script>

  <script>
      $(document).ready(function () {
          var pickerOpts = {
              showAnim: "slideDown",
          };
          $("#txtDateCompleted").datepicker(pickerOpts);
      });
  </script> 

  <script type="text/javascript">
      $('#form1').submit(function () { $('btn_AnnualPhysical.ClientID[type=submit]', this).attr('disabled', 'disabled'); });
  </script>

  <!-- scripts concatenated and minified via build script -->
  <script src="../../Scripts/plugins.js"></script>
  <script src="../../Scripts/main.js"></script>
  <!-- end scripts -->

</body>
</html>

Open in new window

Where is the initialization from the above JS?

ASKER

Ok, sorry, I'm proving the following code below before it's rendered. Perhaps you can tell me what I'm doing wrong from here. I ran it in FF and Chrome and the FileUpload Control is the same as before. Works fine in IE8 and IE9. You will notice that I added your js and styles to my page but not sure how to tie in your javascript to my ASP.NET FileUpload Control.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="annualphysical.aspx.cs" Inherits="application_secure_annualphysical" %>

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>2012-13 Shape-Up Reporting System - Annual Physical</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/jquery-ui-1.8.22.custom.css">
    <script src="../../Scripts/modernizr-2.6.1.min.js"></script>


    <style>
/* container of the file upload elements and look of the field */
.file {
	display: inline-block;
	width:250px;
	position: relative;
	background: #eee;
	border-bottom:solid 1px #e0e0e0;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	margin-bottom:10px;
}
/* style text of the upload field and add an attachment icon */
.file .button {
	background:url(ico_clip.png) no-repeat 97% 50%;
	text-indent:10px;
	font-family:Arial, sans-serif;
	font-size:12px;
	color:#555;
	height:40px;
	line-height:40px;
	display: block;
}
/* hide the real file upload input field */
.file input {
	cursor: pointer;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	filter: alpha(opacity=1);
	-moz-opacity: 0.01;
	opacity: 0.01;
	font-size: 100px;
}
</style>


</head>
<body>
    <form id="form1" runat="server">
        <div id="page">
            <header>
                <img src="../../img/logo-orange.png" alt="Shape-Up Logo" />
                <nav>
                    <ul>
                        <%--<li class="rgt"><asp:Label ID="Label1" runat="server" CssClass="rgtlabel"></asp:Label>&nbsp;&nbsp;<asp:LinkButton ID="lb_logout" OnClick="lb_logout_Click" CausesValidation="false" runat="server">logout</asp:LinkButton></li>--%>
                        <li class="lftlogin"><asp:Label ID="lblFullNameSession" runat="server" CssClass="lftlabel"></asp:Label><a href="employeeprofile.aspx" class="rgtprofile">Manage Account Settings</a></li><asp:LinkButton ID="lb_logout" OnClick="lb_logout_Click" CausesValidation="false" CssClass="rgtlogin" runat="server">Logout</asp:LinkButton>
                    </ul>
                </nav>
            </header>
  
            <article>
                <h1>Annual Physical</h1>
                <p class="warning">All fields are required.</p>
                <asp:Label ID="lblDateCompleted" runat="server" CssClass="label" Text="Date Completed"></asp:Label><br />
                <asp:TextBox ID="txtDateCompleted" runat="server" CssClass="textbox"></asp:TextBox>&nbsp;&nbsp;<asp:RequiredFieldValidator ID="rfv_DateCompleted" runat="server" ControlToValidate="txtDateCompleted" ErrorMessage="required" CssClass="warning"></asp:RequiredFieldValidator><br /><br />
                <asp:Label ID="lblVerificationForm" runat="server" Text="Verification Form (PDF)" CssClass="label"></asp:Label><br />
                <asp:FileUpload ID="fuVerificationForm" runat="server" CssClass="fileupload" size="42" />&nbsp;&nbsp;<asp:RequiredFieldValidator ID="rfv_FileUpload" runat="server" ControlToValidate="fuVerificationForm" ErrorMessage="required" CssClass="warning"></asp:RequiredFieldValidator>&nbsp;&nbsp;<asp:Label ID="lblVerificationFormTypeError" CssClass="info" runat="server"></asp:Label><br /><br />
                <asp:Label ID="lblVerificationFormFileName" CssClass="success" runat="server"></asp:Label>
                <asp:Label ID="lblFileSize" CssClass="error" runat="server"></asp:Label>
                <br />
                <br />
                <asp:CheckBox ID="cb_AnnualPhysical" runat="server" CssClass="checkboxtext" Text=" I agree - that all information has been completed to the best of my knowledge." />
                <br />
                <br />
                <asp:HiddenField ID="hf_emp_id" runat="server" />
                <asp:HiddenField ID="hf_ap_id" runat="server" />
                <asp:Button ID="btn_AnnualPhysical" runat="server" Text="Submit" CssClass="button" OnClick="btn_AnnualPhysical_Click" />
                <br />
                <br />
                <asp:Label ID="lblInsertError" runat="server" CssClass="error"></asp:Label>
            </article>

            <section>
                <h2>Your Progress</h2>
                <ul>
                    <li><asp:Image ID="img_WellnessProfile_Check" runat="server" /><asp:Image ID="img_WellnessProfile_X" runat="server" />&nbsp;&nbsp;&nbsp;<asp:HyperLink ID="hl_WellnessProfile" CssClass="hyperlink" runat="server" NavigateUrl="~/application/secure/wellnessprofile.aspx">Wellness Profile</asp:HyperLink></li>
                    <li><asp:Image ID="img_AnnualPhysical_Check" runat="server" /><asp:Image ID="img_AnnualPhysical_X" runat="server" />&nbsp;&nbsp;&nbsp;<asp:HyperLink ID="hl_AnnualPhysical" CssClass="hyperlink" runat="server" NavigateUrl="~/application/secure/annualphysical.aspx">Annual Physical Exam</asp:HyperLink></li>
                    <li><asp:Image ID="img_PreventiveScreenings_Check" runat="server" /><asp:Image ID="img_PreventiveScreenings_X" runat="server" />&nbsp;&nbsp;&nbsp;<asp:HyperLink ID="hl_PreventiveScreenings" CssClass="hyperlink" runat="server" NavigateUrl="~/application/secure/preventivescreenings.aspx">Preventive Screenings</asp:HyperLink></li>
                    <li><asp:Image ID="img_GeneralHealthOne_Check" runat="server" /><asp:Image ID="img_GeneralHealthOne_X" runat="server" />&nbsp;&nbsp;&nbsp;<asp:HyperLink ID="hl_GeneralHealthOne" CssClass="hyperlink" runat="server" NavigateUrl="~/application/secure/ghapone.aspx">GHA Program One</asp:HyperLink></li>
                    <li><asp:Image ID="img_GeneralHealthTwo_Check" runat="server" /><asp:Image ID="img_GeneralHealthTwo_X" runat="server" />&nbsp;&nbsp;&nbsp;<asp:HyperLink ID="hl_GeneralHealthTwo" CssClass="hyperlink" runat="server" NavigateUrl="~/application/secure/ghaptwo.aspx">GHA Program Two</asp:HyperLink></li>
                    <li><asp:Image ID="img_GeneralHealthThree_Check" runat="server" /><asp:Image ID="img_GeneralHealthThree_X" runat="server" />&nbsp;&nbsp;&nbsp;<asp:HyperLink ID="hl_GeneralHealthThree" CssClass="hyperlink" runat="server" NavigateUrl="~/application/secure/ghapthree.aspx">GHA Program Three</asp:HyperLink></li>
                    <li><asp:Image ID="img_SpecificHealth_Check" runat="server" /><asp:Image ID="img_SpecificHealth_X" runat="server" />&nbsp;&nbsp;&nbsp;<asp:HyperLink ID="hl_SpecificHealth" CssClass="hyperlink" runat="server" NavigateUrl="~/application/secure/specifichealth.aspx">Specific Health Awareness</asp:HyperLink></li>
                    <li><asp:Image ID="img_PhysicalActivity_Check" runat="server" /><asp:Image ID="img_PhysicalActivity_X" runat="server" />&nbsp;&nbsp;&nbsp;<asp:HyperLink ID="hl_PhysicalActivity" CssClass="hyperlink" runat="server" NavigateUrl="~/application/secure/physicalactivity.aspx">Physical Activity</asp:HyperLink></li>
                </ul>
            </section>

            <footer>
                <%--<p><a href="#">Privacy Policy</a></p>--%>
            </footer>
        </div>
    </form>

  <!-- JavaScript at the bottom for fast page loading -->
  <script src="../../Scripts/jquery-1.7.2.js"></script>
  <script src="../../Scripts/jquery-ui-1.8.22.custom.min.js"></script>

  <script>
      $(document).ready(function () {
          var pickerOpts = {
              showAnim: "slideDown",
          };
          $("#txtDateCompleted").datepicker(pickerOpts);
      });
  </script>
     



    <script type="text/javascript">
        /* function to display file name when selected */
        $.fn.fileName = function () {
            var $this = $(this),
            $val = $this.val(),
            valArray = $val.split('\\'),
            newVal = valArray[valArray.length - 1],
            $button = $this.siblings('.button');
            if (newVal !== '') {
                $button.text(newVal);
            }
        };

        $().ready(function () {
            /* on change, focus or click call function fileName */
            $('input[type=file]').bind('change focus click', function () { $(this).fileName() });
        });
</script>




  <script type="text/javascript">
      $('#form1').submit(function () { $('btn_AnnualPhysical.ClientID[type=submit]', this).attr('disabled', 'disabled'); });
  </script>

  <!-- scripts concatenated and minified via build script -->
  <script src="../../Scripts/plugins.js"></script>
  <script src="../../Scripts/main.js"></script>
  <!-- end scripts -->

</body>
</html>

Open in new window

ASKER

Hi LZ1,

Any idea what I'm doing wrong with the attached code I posted yesterday?

Unfortunately I can't run your unrendered code. Is it possible for you to get a live URL for us to look at?

ASKER

I really wish I had a live URL to supply. But I don't at the moment :(

I pasted your js code in the head and used my own FileUpload control instead of using the input control. I need to use the one that I have and will need to add any css that I need to. I think the problem that I'm facing is that I'm not sure what class in the css that you supplied needs to be added to my FileUpload control. Also, I'm also not sure what I need to add to my current style that I'm using now for the FileUpload control. I can supply my css that I'm using now for the FileUpload control below.

    article .fileupload {
        width: 353px;
        height: 32px;
        font: inherit;
        font-size: 0.875em; /* 14px / 16px */
        color: #474747;
        background-color: #fff;
    }

Open in new window

<asp:FileUpload ID="fuVerificationForm" runat="server" CssClass="fileupload" size="42" />

Try following the structure in the demo from the URL above:

http://www.divology.com/wp-content/themes/divology/tutorials/custom-file-input/index.html

You would put your control into a div with the class name .fileupload.

<div class="fileupload">
<asp:FileUpload ID="fuVerificationForm" runat="server" CssClass="fileupload" size="42" /> 
</div>

Open in new window

ASKER

That only changed the look in IE9 but did not change anything in FF or Chrome. Also, do I still need to add your css.

Yes.

ASKER

Ok, I added your CSS to the head of that page but it did not change the look of the FileUpload control. You had me use my CSS style for that so how will it change if I'm not using yours?

This code has your file input with the surrounding div, CSS and JS and it works cross-browser for me.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>

</style>
<style>
/* container of the file upload elements and look of the field */
.file {
	display: inline-block;
	width:250px;
	position: relative;
	background: #eee;
	border-bottom:solid 1px #e0e0e0;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	margin-bottom:10px;
}
/* style text of the upload field and add an attachment icon */
.file .button {
	background:url(ico_clip.png) no-repeat 97% 50%;
	text-indent:10px;
	font-family:Arial, sans-serif;
	font-size:12px;
	color:#555;
	height:40px;
	line-height:40px;
	display: block;
}
/* hide the real file upload input field */
.file input {
	cursor: pointer;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	filter: alpha(opacity=1);
	-moz-opacity: 0.01;
	opacity: 0.01;
	font-size: 100px;
}
</style>
</head>

<body>
<div class="file">
    <input type="file" name="fuVerificationForm" id="fuVerificationForm" class="fileupload" size="42" />
    <span class="button">Choose File to Upload</span>
</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
/* function to display file name when selected */
$.fn.fileName = function() {
	var $this = $(this),
	$val = $this.val(),
	valArray = $val.split('\\'),
	newVal = valArray[valArray.length-1],
	$button = $this.siblings('.button');
	if(newVal !== '') {
		$button.text(newVal);
  	}
};

$().ready(function() {
	/* on change, focus or click call function fileName */
	$('#fuVerificationForm').bind('change focus click', function() {$(this).fileName()});
});
</script>

</body>
</html>

Open in new window

ASKER

Ok, so I added your code and below is the error that I'm getting. Based on the error I cannot put the FileUpload control into a <div> tag. Can this still be done without using a <dic> tag and how?

What's the error your getting?

I can try, give me a second

ASKER

Sorry, forgot to post.

Compiler Error Message: CS0103: The name 'fuVerificationForm' does not exist in the current context

Source Error:

Line 264: if (Page.IsValid && cb_AnnualPhysical.Checked == true) // make sure all fields have data and cb_AnnualPhysical is Checked before Inserting to DB.
Line 265: {
Line 266: if (fuVerificationForm.HasFile) // a file has been uploaded
Line 267: {
Line 268: //Make sure we are dealing a .pdf file only

Source File: c:\inetpub\wwwroot\ShapeUpReporting_12-13\application\secure\annualphysical.aspx.cs Line: 266

And if you remove the <div> it's in, it works fine?

ASKER

actually I get the same error message when I remove the <div> tag so it must have to do with my using an ASP.NET Control such as the FileUpload Control compared to what I'm using now which is an input control acting as a FileUpload Control.

Unfortunately I don't know .NET very well. Everything else should be there though for you to be able to skin the input field.

ASKER

That's what I thought but no matter what I apply to that control I don't get any different results.

The last resort would be to try and get a live URL. I don't have the first clue about.NET, but I do know HTML/CSS and a decent amount of jQuery.

Otherwise you can request attention to get more experts to try and jump in.

ASKER

Hi LZ1,

Can you explain who you need a live URL? if it's because you want to see the rendered HTML then I already supplied that to you.

I need to see why the jquery isn't touching our elements. It maybe something to do with the DOM. Debugging Javascript is kind of difficult in these situations.

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Hi GaryC123,

Will this work if I only use the ASP.NET FileUpload Control rather than using the <input> control(s)?

Yes, just replace the file input in the code and add the class and onchange attributes to it, the rendered html will be the same
Replace the id in the js

ASKER

Hi GaryC123,

Well, I noticed changes in all three browssers ff, chrome, and ie9 but now I cannot see the textbox or the browse button in either of those browsers.

I noticed that you have a class for the textbox and button but the FileUpload control for ASP.NET has both included. So I don't need the other two inputs (textbox and button).

How do I style the FileUpload Control to display the button and style the border, height, and width for the FileUpload Control?

Uhh?
The textbox and button are needed.
Can you post your code as you have it now.
The css is needed.

ASKER

FileUpload Control

<asp:FileUpload ID="fuVerificationForm" runat="server" CssClass="file" size="32" onchange="getfilename()" />

CSS provided by you

<style>
.file {
opacity: 0;
filter: alpha(opacity=0);
z-index: 999;
width: 283px;
}

.file_text {
z-index: -4;
width: 210px;
height: 20px;
border: 1px solid gray;
position: absolute;
left: 0;
}

.file_button {
z-index: -4;
width: 73px;
height: 20px;
border: 1px solid gray;
position: absolute;
left: 210px;
}
</style>

Javascript provided by you

<script type="text/javascript">
function getfilename() {
strFile = document.getElementById('fuVerificationForm').value;
document.getElementById('file_text').value = strFile.replace(/^.*[\\\/]/, '')
}
</script>

Wheres the code for the textbox and button

ASKER

Ok, since the last post. I did include the textbox and button and it's displaying on ie9, ff, and chrome. But the problem now is that if I click inside of the textbox or even the button nothing happens. But if I click outside to the top of the new textbox then it allows me to select a file.

And are they surrounded by the div, it needs this to position the new textbox/button over (but under) the file input. If you already have a div around it then just amend the style like below.

<div style="position:relative">

...

</div>

ASKER

I tried both and I still have to click slightly above the new textbox and button controls to where the old ones where at in order for the box to popup. Same goes if I click the new button.

Can you amend the div to this
<div style="position:relative;border:1px solid gray">

and post a screen shot

Here's the fiddle, and it works in all browsers
There must be some positioning problems

ASKER

Ok, I added the following to the div tag as suggested and attaching screenshot now. Thank you GaryC123. This is annoying :)
ee.png

The textbox and button are not where they should be, they should be at the top.
Can you post/attach your code again and the css you're using for the elements.
(I won't be back here for an hour or so)

ASKER

Hi GaryC123,

Are you still able to assist?

ASKER

I did not get a resolution for this post. Give a half of a resolution.

I did ask you to attach your updated code.