Recent Posts

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 - Twitter Bootstrap custom file input styling

By yash → Tuesday, July 26, 2016
Posted by yash at 5:28 AM 0 comments
Labels:

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: →

jQuery - blur or focusout event triggring twice solution

By yash → Wednesday, July 20, 2016
Posted by yash at 4:00 AM 0 comments
Labels: ,
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 dataTable plugin - remove search box, information bar and pagination length drop down

By yash → Monday, July 4, 2016
Posted by yash at 9:12 PM 0 comments
Labels: ,
We have seen how to create/initialize and use dataTable with fixed column(s).  

How to initialize dataTable columns with fixed width ?

Solution:

jQuery DataTable can be initialized with fixed width column. Sometimes it is necessary to give fixed width to particular or all columns of the table. To initialize dataTable with fixed columns , we can use it's "columnDefs" option while initializing.

How to use it ?

Let's create a table and give fixed width to it. As we already seen earlier

ADD CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.bootstrap.min.css">

ADD necessary Js libraries for dataTable 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript" ></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript" ></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js" type="text/javascript" ></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js" type="text/javascript" ></script>

ADD Your Table markup to your HTML Page 
<div class="container-fluid">
  <div class="col-md-12">
    <table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>t.nixon@datatables.net</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>8422</td>
                <td>g.winters@datatables.net</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>1562</td>
                <td>a.cox@datatables.net</td>
            </tr>
            <tr>
                <td>Cedric</td>
                <td>Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
                <td>6224</td>
                <td>c.kelly@datatables.net</td>
            </tr>
            <tr>
                <td>Airi</td>
                <td>Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
                <td>5407</td>
                <td>a.satou@datatables.net</td>
            </tr>
           
       
        </tbody>
    </table>
  </div>
</div>

Now Time to initialize DataTable: 

$(document).ready(function() {
    var table = $('#example').DataTable( {       
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,       
        columnDefs: [
        { "width": "150px", "targets": [0, 1,2] },       
        { "width": "40px", "targets": [4] }
      ]
    } );
} );

Preview:

See the Pen Bootstrap jquery dataTable fixed columns Width by Yashwant Patel (@yashwant) on CodePen.


Download Source
Tags: → →

JQuery DataTable - give fixed width to one or more columns

By yash → Monday, June 27, 2016
Posted by yash at 10:05 PM 0 comments
Labels: , ,

What is JQuery DataTable ?

Answer: DataTables is a plug-in for the jQuery which can provide lots of functionalities.
Some of them are as follows:

  • Pagination
  • Instant search
  • Column Sorting
  • Fixed Table columns on lower resolution
  • Fixed Table header
  • Selecting particular row and lot more..
Sometime there is a requirement that we have to use fixed columns for table with search and pagination features. Custom pagination with fixed column for table can be tricky to implement, specially for responsive website. In this case JQuery DataTable can be a very good solution.

In this chapter we will see how to create responsive table with fixed columns. We will be using Twitter Bootstrap to make responsive table.
First Let's add all necessary CSS and JavaScript libraries.

Add following CSS files in head tag of your HTML file
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.bootstrap.min.css">

Then add following JS files
<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript" ></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript" ></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js" type="text/javascript" ></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js" type="text/javascript" ></script>

Now you can add your HTML Table like below snippet

<div class="container-fluid">
  <div class="col-md-12">
    <table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>t.nixon@datatables.net</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>8422</td>
                <td>g.winters@datatables.net</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>1562</td>
                <td>a.cox@datatables.net</td>
            </tr>
            <tr>
                <td>Cedric</td>
                <td>Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
                <td>6224</td>
                <td>c.kelly@datatables.net</td>
            </tr>
            <tr>
                <td>Airi</td>
                <td>Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
                <td>5407</td>
                <td>a.satou@datatables.net</td>
            </tr>
           
       
        </tbody>
    </table>
  </div>
</div>

Your HTML Table is ready by now and we can initialize this table using dataTable.
We have already added JQuery, so when DOM gets ready, we can initialize out dataTable. Add following Script below all your JS files or create an external JS and add at the bottom of HTML. 

$(document).ready(function() {
    var table = $('#example').DataTable( {       
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        autoWidth: false,
        fixedColumns: {
            leftColumns: 2                  
        }
    } );
} );

Here we initialized our table with 2 left fixed columns. DataTable can be initialize with lot more options. For all other options please refer to DataTable Options link

Preview
See the Pen Bootstrap jquery dataTable fixed columns by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: → → →

JQuery responsive dataTable with fixed columns

By yash → Wednesday, June 22, 2016
Posted by yash at 3:14 AM 0 comments
Labels: , , ,
Use indexOf() method of JavaScript string to  check if string contains particular given sub string or not.  String.prototype.indexOf returns the position of the string in the other string. If not found, it will return -1:

var string = "some string",
    substring = "some";
if(string.indexOf(substring) > -1) {
   // String contains given substring
   // do your stuff here
}else {
  // String haven't containg given substing
}
Tags:

JavaScript - Check if string contains given substring

By yash → Wednesday, May 11, 2016
Posted by yash at 4:36 AM 0 comments
Labels:
Problem:

Many of the time we require to get particular portion of the string for further modification. At this time we need to split particular sting.

Solution:

In JavaScript  we can use split() method with regular expression to split  sting and get desired results. Let's take a look at following given string.

first second third fourth fifth     sixth            Seventh

"\s" is a regular expression which matches spaces, tabs and new line etc. "\s+" regular expression will match multiple occurrence of the white space and tabs.

var input = "first second third fourth fifth     sixth            Seventh ";
var output = input.split(/\s+/);
console.log(output);

Output: 

 Output will be a array and it will look something like following image.


Tags:

JavaScript - Spilit string by single or multiple white space

By yash →
Posted by yash at 3:38 AM 0 comments
Labels:
Subscribe to: Posts ( Atom )