Blogger Widgets
  • Sharing Photos using SignalR
  • TFS Extenstion - allows copy work items between projects
  • Displaying jquery progressbar with ajax call on a modal dialog
  • Managing windows services of a server via a website
  • Exploring technologies available to date. TechCipher is one place that any professional would like to visit, either to get an overview or to have better understanding.

Search This Blog

Monday 28 November 2011

Apply JQueryUI for html element browse or input type=file

Jquery UI provides very best features that can be applied to html controls, one such feature is applying JQuery UI styling for buttons. Applying button style as such is very easy, but how can this be applied for a html element input(type=file). Now that looks little tricky. Ok first consider following html :



            


Now bind events
$(document).ready(function () {
        $('#btnBrowseAttachment').button();
        $('#btnBrowseAttachment2').button();

        $('#btnUpdateAttachment').button();

    });
So far we have added controls and have assigned JQuery UI buttons feature but we have too many controls. Apply following CSS styles
#btnBrowseAttachment2{
 position:absolute;
 /* start of transparency styles */
 opacity:0;
 -moz-opacity:0;
 filter:alpha(opacity:0);
 /* end of transparency styles */
 z-index:2; /* bring the real upload interactivity up front */
 width:270px;
}


Run the app and you should be able to see only one browse button (btnBrowseAttachment), ie.. btnBrowseAttachment2 button has been applied transparent style so that the click event binded to btnBrowseAttachment2 will fire when clicked btnBrowseAttachment.

For a list of all the ways technology has failed to improve the quality of life, please press three. ~Alice Kahn
Copyright © 2013 Template Doctor . Designed by Malith Madushanka - Cool Blogger Tutorials | Code by CBT | Images by by HQ Wallpapers