How does it work?

Plug-in wraps vanilla file input with div. This div has button as background image. Image button is aligned with file inputs browse button. File input is then hidden by setting opacity to zero. Chosen file is shown in normal text input which mimics file input. This text input also inherits file inputs class. Use this class to style the text input.

How to use?

Insert the jquery and filestyle js files to the header section of html

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.filestyle.js" type="text/javascript"></script>

The button image used in the code is here.

The java script code for styling the file input is as follows.

$("input[type=file]").filestyle({
     image: "choose-file.gif",
     imageheight : 22,
     imagewidth : 82,
     width : 250
 });

You can view the demo of the plug-in from here
Download the javascript file from here.

Step 1:

Include the jQuery JavaScript file on header section of web page.

Step 2:

Include the Fixed Header jQuery file on header section of web page.
Download jquery.fixedheader.js

Step 3:

Copy and paste this CSS code in stylesheet or header section of web page.

<style type="text/css">
.dataTable {
font-family:Verdana, Arial, Helvetica, sans-serif;
border-collapse: collapse;
border:1px solid #999999;
width: 750px;
font-size:12px;
}
.dataTable td, .dataTable th {
border: 1px solid #999999;
padding: 3px 5px;
margin:0px;
}
.dataTable thead th {
background-color:#cccccc;
color:#444444;
font-weight:bold;
text-align:left;
}
.dataTable thead a {
text-decoration:none;
color:#444444;
}
.dataTable thead a:hover { text-decoration: underline;}
/* Firefox has missing border bug! https://bugzilla.mozilla.org/show_bug.cgi?id=410621 */
/* Firefox 2 */
html</**/body .dataTable, x:-moz-any-link {margin:1px;}
/* Firefox 3 */
html</**/body .dataTable, x:-moz-any-link, x:default {margin:1px}
</style>

Step 4:

Add this JavaScript code in header section of web page.

<script type="text/javascript">
$(document).ready(function(){
$("#data").fixedHeader({width: 500,height: 300});
})
</script>

Step 5:

Create an HTML table on the page, including THEAD and TBODY sections.

<table id="data" class="dataTable">
<thead>
<tr>
<th> ….. <\th>
<th> ….. <\th>
</tr>
</thead>
<tbody>
<tr>
<td> ….. <\td>
<td> ….. <\td>
</tr>
</tbody>
</table>

Compatibility

IE6/7, Firefox 3.0/3.1, Opera 9.5, Chrome 0.2, Safari 3.1.2

Click here to visit DD_belatedPNG plugin site

Use the script only for IE6 with conditional comments.

The Sticky Footer Layout posted here is from css sticky footer, A List Apart, Cameron Adams and, lwis.net.

Here is the basic structure of HTML code.

You’ll notice how the footer div is outside of the wrap div and header is placed inside the wrap but above the main. If you wanted to place any elements outside wrap or footer then we have to use absolute positioning for particular element else it messes up the 100% height calculations.

Here is the CSS code

we are not done just yet.

We need to add the clearfix properties to the main div to get the footer to stick in Chrome. It also solves issues that come up when using a 2-column layout where you float your content to one side and sidebar to the other.

Here is the clearfix code

When coding sites for ASP.net where each page is inside a form tag, make sure to add the form tag to the height:100% statement.

• Download and install Internet Explorer 6 and Older Version of IE from MultipleIE.
• Download Internet Explorer 7 standalone Installer to install IE7.
• Download and install Internet Explorer 8

Now your are ready to use IE6 IE7 and IE8 in same time, in same windows system. Enjoy..