UI, javascript, jQuery, Bootstrap, PHP, Responsive design solutions.

Browsing "Older 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

CSS - Twitter Bootstrap custom file input styling

By yash → Tuesday, July 26, 2016

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

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

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 → jQuery DataTable → Twitter Bootstrap

JQuery DataTable - give fixed width to one or more columns

By yash → Monday, June 27, 2016

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: DataTable → Fixed DataTable → jQuery → Twitter Bootstrap

JQuery responsive dataTable with fixed columns

By yash → Wednesday, June 22, 2016

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

JavaScript - Check if string contains given substring

By yash → Wednesday, May 11, 2016

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

JavaScript - Spilit string by single or multiple white space

By yash →

Javascript:

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

if(is_chrome){  
//You are browsing on chrome browser"
}else {
//You are browsing on other than chrome browser;
}

Tags:

Detect google chrome using javascript

By yash → Friday, May 6, 2016

Problem statement

Consider a scenario where you have DOM like following..

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A [TEXT]
        </div>
        <div class="col-md-6">
            B [IMAGE]
        </div>
    </div>
</div>

But on many occasions you need to display bottom column i.e "B[IMAGE]" at the top of "A[TEXT]" section on mobile devices.

Solution:

If you are using twitter bootstrap, you can make it without writing any extra javascript or CSS. So here comes the solution. Twitter bootstrap provide 2 classes

1. pull-left (float:left )
2. pull-right (float:right )

Step 1:
Add first column as image container (B [IMAGE]) and add class pull-right to it. (it will show image on right side of the page on desktop.)

Step 2:
Add second column as text container ( A [TEXT] ) and add class pull-left to it. (it will show texts on left side of the page on desktop.)

Your DOM structure should look like below.

<div class="container">
    <div class="row">
        <div class="col-md-6 pull-right">
              B [IMAGE] 
        </div>
        <div class="col-md-6 pull-left">
              A [TEXT]
        </div>
    </div>
</div>

Preview

See the Pen Twitter bootstrap place right column image on top of text on mobile devices by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: CSS → HTML5 → Twitter Bootstrap

Twitter bootstrap place right Column on top on mobile view

By yash → Friday, April 29, 2016

HTML5 introduces new input type called "number". We can use this to take number input from user. It's a nice addition to the webpages and make things simpler, but design point of view it is not going to make things simpler.
Chrome and Mozilla Firefox browsers by default adds up and down arrows. UI can look ugly due to this if arrow is not required.

HTML:

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
    -webkit-appearance: none;    
    appearance: none;
    margin: 0;  
}
input[type='number'], 
input[type='number']:hover,
input[type='number']:focus {
  -moz-appearance: textfield;
}

CSS:

<input type="number" name="number-demo" >

See the Pen Cross platform hide input type number arrows by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: CSS → HTML5

CSS - hide input type number on chrome and mozilla firefox browsers

By yash → Wednesday, April 13, 2016

While printing page of any website many browsers print all the href links, which is sometimes not necessary or look ugly.
To avoid printing href link you just need to add following code into your css file.

CSS

 @media print { 
   a[href]:after {
    content: none !important;
  }
 }

Tags: CSS

CSS - While printing website page hide all anchor href link

By yash → Thursday, April 7, 2016

While developing website most of the time we face the issue to align particular section or element vertically and horizontally center to it's parent element. There are many ways to achieve this requirement but what if the child content is dynamic and unknown ?

There is a solution for that. Make two CSS classes. one for parent element and one for child element. Make parent element Position relative and child element position absolute to it's parent element and play with child element's top,left and transform properties to make child element horizontally and vertically center.

The best part of following code is that you can use only two CSS classes to align element vertically and horizontally center and middle of the section.

Following example can give much clear idea.

HTML:

<div class="container">
  <div class="row">
    <!-- parent container add .parent-center class -->
      <div class="col-md-12 parent-center">
        <!-- child container add .child-center class -->
        <div class="child-center">        
          <h1>Vertically and horizontally center </h1> 
          <h1>Vertically and horizontally center </h1> 
          <h2>Add as main as element you want. </h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>  
    </div>    
  </div> 
</div>

CSS :

.col-md-12 {
   min-height:400px;  
    background: linear-gradient(270deg, #003366, #b27000, #06617d, #067370);
  background-size: 800% 800%;
}
/* parent container css */
.parent-center {
  position: relative;
}
/* child container css */
.child-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; 
    text-align: center;
}

See the Pen css - Horizontally and vertically center element to it's container by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: CSS → HTML

CSS - vertically and horizontally center align any element with its parent element

By yash → Friday, March 18, 2016

Yes this is what you seen in chrome browser if your website has broken images. This will look very ugly if you have image with no accurate source.

Always write "alt" attribute for images. This will help search bots to understand about images. also if image is broken than browsers will show this alternative text. As shown in above image, the alternative text for image is "Broken image".

Now the question is how to style these broken images ?

The answer is : We can use <img> tags after and before css pseudo elements to style broken image.

Example:

HTML:

<body>
    <div class="row center-block">
        <div class="col-xs-6 col-md-6">
            <img src="https://website/boken-image.png"  alt="your image placeholder " />
        </div>
        <div class="col-xs-6 col-md-6">
            <img src="https://unsplash.it/250/300/?random" alt="awesome image" />
        </div>
    </div>
</body>

CSS:

body {
  background: #e9e9e9;
  padding: 25px;
  font-size: 12px;
  color: #777;
}

.row {
  max-width: 600px;
  margin: 0 auto;
}

img {
  display: block;
  position: relative;
  max-width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #ddd;
  max-width: 250px;
  max-height: 300px;
}

img:before {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 35px 5px 20px 5px;
  font-family: Helvetica, Arial, sans-serif;
  content: "Broken image of " attr(alt) " (" attr(src) ")";
  color: red;
  text-align: center;
}

img:after {
  display: block;
  position: relative;
  top: -35px;
  width: 100%;
  height: auto;
  padding: 20px 5px;
  background: #fff;
  font-family: 'Glyphicons Halflings';
  content: "\e060";
  text-align: center;
}

Preview :

See the Pen Style broken images by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: CSS → HTML

CSS - Style broken images to look better on browsers

By yash → Saturday, March 12, 2016

Getting any YouTube videos thumbnail image is quite easy. you just need a ID of particular youtube video to get it's thumbnail image in different resolutions. Use following URLs in your image tag to show required youtube thumbnail.

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg -   default
http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg - medium 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg - high
http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg - standard
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg  - maximum resolution

Following is a actual implementation to show how it works.

<div class="container">
  <div class="row">
    <div class="col-md-12">
       <iframe width="560" height="315" src="https://www.youtube.com/embed/RGzKJCOE5rw" frameborder="0" allowfullscreen></iframe> 
      <h1>Get different resolution of thumbnail images of Youtube video using youtube video id </h1> 
    <h1>Default image </h1>
    <img src="http://img.youtube.com/vi/RGzKJCOE5rw/default.jpg" >
    <h1>full size image </h1>
    <img src="http://img.youtube.com/vi/RGzKJCOE5rw/0.jpg" >
      <h1>Medium quality image </h1>
    <img src="http://img.youtube.com/vi/RGzKJCOE5rw/mqdefault.jpg" >
    <h1>Standard definition image </h1>
    <img src="http://img.youtube.com/vi/RGzKJCOE5rw/sddefault.jpg" >      
    <h1>High quality image </h1>
    <img src="http://img.youtube.com/vi/RGzKJCOE5rw/hqdefault.jpg" >    
    <h1>Maximum resolution image </h1>
    <img src="http://img.youtube.com/vi/RGzKJCOE5rw/maxresdefault.jpg" >
    </div>
  </div>
</div>

Downlaod Source

See the Pen Youtube - get thumbnail images of videos by Yashwant Patel (@yashwant) on CodePen.

Tags: HTML → PHP → Youtube

Youtube - Get different resolution of thumbnail images of Youtube video using youtube video id

By yash → Friday, March 4, 2016

xampp - Error running apache server due to www.example.com:443:0 server certificate does NOT include an ID which matches the server name One day i was running xampp server and working on local site. server was on havy load and xampp server crashes every time i try to load websit. i was getting following error.

[Mon Jun 15 14:00:03.040068 2015] [ssl:warn] [pid 9460:tid 396] AH01909: www.example.com:443:0 server certificate does NOT include an ID which matches the server name
[Mon Jun 15 14:00:03.336948 2015] [ssl:warn] [pid 9460:tid 396] AH01909: www.example.com:443:0 server certificate does NOT include an ID which matches the server name
[Mon Jun 15 14:00:03.383826 2015] [mpm_winnt:notice] [pid 9460:tid 396] AH00455: Apache/2.4.9 (Win32) OpenSSL/1.0.1g PHP/5.5.11 configured -- resuming normal operations
[Mon Jun 15 14:00:03.383826 2015] [mpm_winnt:notice] [pid 9460:tid 396] AH00456: Apache Lounge VC11 Server built: Mar 16 2014 12:13:13
[Mon Jun 15 14:00:03.383826 2015] [core:notice] [pid 9460:tid 396] AH00094: Command line: 'd:\\xampp\\apache\\bin\\httpd.exe -d D:/xampp/apache'
[Mon Jun 15 14:00:03.399451 2015] [mpm_winnt:notice] [pid 9460:tid 396] AH00418: Parent: Created child process 3896
[Mon Jun 15 14:00:04.234796 2015] [ssl:warn] [pid 3896:tid 404] AH01909: www.example.com:443:0 server certificate does NOT include an ID which matches the server name
[Mon Jun 15 14:00:04.531678 2015] [ssl:warn] [pid 3896:tid 404] AH01909: www.example.com:443:0 server certificate does NOT include an ID which matches the server name
[Mon Jun 15 14:00:04.609803 2015] [mpm_winnt:notice] [pid 3896:tid 404] AH00354: Child: Starting 150 worker threads.

Quick fix to "www.example.com:443:0 server certificate does NOT include an ID which matches the server name" error

This problem happens more often on Windows platform, because of smaller Apache's default stack size. just find htttpd.conf file from Path_to_xampp/apache/httpd.conf and put following code

<IfModule mpm_winnt_module>
   ThreadStackSize 8888888
</IfModule>

Tags: Apache server → PHP → Xampp error

xampp - Error running apache server due server certificate does NOT include an ID which matches the server name

By yash → Thursday, March 3, 2016

Following code is useful when you came into scenario where you want to encrypt any data using PHP and want to decrypt it and use it via JavaScript. This can be achieved by just one line of code. It will be very basic level of encryption but very useful. Use following PHP code to encrypt any data.

<?php 
// You can encrypt any string using PHP's base64_encode function

$encryptedSting = base64_encode("your secure data");
// if you print encrypted string it will look like following sting 

echo $encryptedSting;
// Result - "eW91ciBzZWN1cmUgZGF0YQ=="
?>

In JavaScript there are two functions respectively for decoding and encoding base64 strings.

atob()
btoa()

Now once the String is encrypted, you can decrypt it by using atob() function.

<script type="text/javascript">
 // Let's say now you have encrypted sting.
 // just use atob()  function to decrypt previously encrypted data

var decryptedData  = atob("eW91ciBzZWN1cmUgZGF0YQ==");

// check you output in console
Console.log(decryptedData);

</script>

YEAH!! THAT's IT.

Tags: decrypt → encrypt → Javascript → PHP

How to encrypt string in PHP and decrypt it and get via javascript code in single line

By yash → Wednesday, March 2, 2016

No matter what you do, you can't prevent users from having full access to every bit of data on your website. If right click is disabled you can still view source code in chrome browser, for that you just have to place "view-source:" before URL. For example if you want to view source of https://www.google.co.in/ then just type "view-source:" i.e. view-source:https://www.google.co.in/ . Thats it. You can check every bit of code now. Try it yourself. :)

Tags:

How to get page source if right click is disabled on website

By yash → Wednesday, February 24, 2016

Subscribe to: Posts ( Atom )