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

Browsing "Older Posts"

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