CSS - Twitter Bootstrap custom file input styling

While using responsive frameworks like twitter bootstrap we came across a situation where we want to use file upload with consistent look and feel, but different browsers treat file input differently while displaying on browsers.

HTML:

<span class="btn btn-file">
  Upload  <input accept="image/*" type="file">
</span>

CSS:

body{
  margin: 20px;
}

/* Give custom look and feel to file upload*/
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;   
    cursor: inherit;
    display: block;
    
}
.btn-file {
    position: relative;
    overflow: hidden;
    color: #2A476B;
    font-weight: bold;
    background-color: #f1f1ef;
    box-shadow: 1px 10px 20px 0px rgba(218, 215, 206,0.8);
    width:200px;
    height:50px;
    line-height: 30px;
    border: 2px solid #2A476B;    
}
.btn-file:hover{
   background: #2A476B;
   color:#ffffff;
}

Preview:

See the Pen Twitter Bootstrap custom file input styling by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: CSS

CSS - Twitter Bootstrap custom file input styling

By yash → Tuesday, July 26, 2016

jQuery - blur or focusout event triggring twice solution

Problem: 

While working with one of the my project some input boxes needs to be validated on blur event. When i bind jQuery blur event with input, the blur event was calling twice.

Solution:

Use onblur event using input attribute. create a function and call it on blur

HTML:

<input type="text" onblur="validateInput(this.value)" />

JavaScript:

function validateInput(val){
  // Do whatever you want to do on blur event
  console.log(val);
}

Preview

See the Pen jAzEKr by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: Javascript → jQuery

jQuery - blur or focusout event triggring twice solution

By yash → Wednesday, July 20, 2016

JQuery dataTable plugin - remove search box, information bar and pagination length drop down

Sometimes it is not necessary to show extra features or functionality of dataTable which are available.
By default search box information bar and pagination length are shown with dataTable. We can remove/hide these elements from dataTable at the time of initializing.

jQuery

$(document).ready(function() {
    $('#dataTable').DataTable( {      
        "searching": false,
         "paging": true, 
         "info": false,         
         "lengthChange":false 
    } );
} );

Preview

See the Pen Bootstrap jquery dataTable Remove search box and pagination drop down by Yashwant Patel (@yashwant) on CodePen.

Download Souce


   

Tags: jQuery → jQuery DataTable

JQuery dataTable plugin - remove search box, information bar and pagination length drop down

By yash → Monday, July 4, 2016