Wednesday, April 5, 2023

How to close browser window or tab once click on button / link using jquery and Javascript

Hi, Today I will explain about how to close a browser winow when click on a button or link using Javascript or Jquery, Below piece of snippet work for only CHROME and IE 11 onwards browsers only. The browser does not allow this behavior. Javascript can only close a tab that it opened. Scripts may close only the windows that were opened by it. 

This solution will only work if the window was opened by window.open(...)





<!DOCTYPE html>
<html>
<body>
<a href="#" onclick="close_window();return false;">If you click on this the window will be closed after 1000ms</a>
<script>
function close_window() {
if (confirm("Close Window?")) {
var ww = window.open(window.location, '_self');
ww.close();
//setTimeout(function(){var ww = window.open(window.location, '_self'); ww.close(); }, 1000);
}
}
</script>
</body>
</html>

You return false here to prevent the default behavior for the event. Otherwise the browser will attempt to go to that URL (which it obviously isn't).

You can't close any tab via JavaScript. "This method is only allowed to be called for windows that were opened by a script using the window.open method." In other words, you can only use JavaScript to close a window/tab that was spawned via JavaScript.




Continue Reading →

Wednesday, November 30, 2022

Beginner's guide to Search Engine Optimization (SEO) - SEO Technics and Technical Recommendations

SEO stands for "Search Engine Optimization",  SEO is the process of taking steps to help a website or content rank higher on search engines. It means the process of improving your website to increase its visibility/interaction when people search for products, articles or services related to your requested in Google, Bing, Yahoo and other search engines. The better visibility your pages have in search results.




Search engines provide results for any user requested content or query when enters. So they check and understand the vast network of websites that make up the web. They run a sophisticated algorithm that determines what results to display for each search query.

Below are the SEO Recommendations and start working on Technical SEO

  • Find and Fix Broken Images
  • Find and Fix Broken Links
  • Find and Fix Duplicate H1 Heading
  • Find and Fix CSS Error
  • Find and Fix JavaScript Error
  • Find and Fix HTML Error
  • Find and Fix Theme UI/UX
  • Find and Fix Mobile Friendly Error
  • Use Schema
  • Set Sitemap
  • Set Robots.txt
  • Set Analytics
  • Set Google Search Console
  • Set Canonical Tag
  • Index Issue
  • Find and Fix 404 Pages
  • Set Redirect Pages
  • Set Metadata Box
  • Set Site Menu
  • Set Site Structure
  • Set Permalinks
  • Find and Fix Orphan Pages
  • Find and Fix thin Content Pages
  • Speed Up Your Website
  • Use Twitter Card
  • Use OG Tag
  • Images ALT tags

Onpage SEO

  • Use Keywords In The Right Places
  • Keep Users On Your Site Longer
  • Find "Suggest" Keywords
  • Delete Zombie Pages
  • Do An Industry Study
  • Add Related Keywords to Your Content
  • Add Text to Infographics, Podcasts, and Videos
  • Update Old Pages
  • Keep Users On Your Site Longer
  • Create Content Around Shoulder Niches
  • Rank In The Featured Snippets
  • Improve Your Organic CTR
  • Focus on Onpage Content
  • Find Long Till Keywords
  • Use LSI Keywords
  • Create Branded Keywords
  • Writing Clickable Post Title
  • Writing Readable Meta Title
  • Writing compelling Meta descriptions
  • Use Internal Link and External Link
  • Find Rank Pages for Internal link
  • Add “What is X” Definitions to Blog Content
  • Use FAQs at the end of Content
  • Create a Strategy That Supports Your Business Goals
  • Competitor analysis
  • Write Content for Home Page, Category Pages, Sub Category Pages, City Pages, Sub City pages, Areas Pages
  • If you needed then Write Products Details Descriptions

Off-page SEO

  • Get Backlinks From Your Visual Assets
  • Find More Outreach Websites
  • Getting Content backlinks and inbound links
  • Use Sponsor Guest Post
  • Social Bookmarking
  • Business Profile Links
  • Blog Comments
  • Question and Ans Websites
  • Web 2.o
  • Niche Editing
  • Create Social Media Profiles
  • Update Social Platform
  • Slide Share
  • Infographic
  • Press Release

Local SEO

  • Verify Google My Business
  • Optimize Google My Business
  • Up-to-date Google My Business
  • Post content on Google my Business
  • Post Products on Google Business
  • Post on Business Directory
  • Post Images
  • Update Events
  • Update Offers
  • Update Videos

Hope this article is useful for you. If you like please share. If still you have any queries please comment below.

Thankyou


Continue Reading →

Monday, March 19, 2018

How to create simple vertical timeline using HTML and CSS

In this post, we will learn how to build a simple vertical timeline using HTML and CSS from scratch. First, we will create the basic structure with minimal markup and the power of CSS pseudo-elements. We implemented this example without using Javascript and jQuery etc. Please follow the steps to create a basic vertical timeline

Following are the steps to creating HTML and CSS code.



Step 1 : ( Create HTML )

<div class="timeline-wrapper"> 
<ul class="StepProgress">
        <li class="StepProgress-item is-done">
            <div class="bold time">10:00 Am</div> 
            <div class="bold">Step 1</div>
        </li>
        <li class="StepProgress-item is-done">
            <div class="bold time">11:00 Am</div> 
            <div class="bold">Step 2</div>
            <div>Post a contest</div>
        </li>
        <li class="StepProgress-item current">
            <div class="bold time">12:00 Pm</div> 
            <div class="bold">Step 3</div>
        </li>
        <li class="StepProgress-item">
            <div class="bold time">01:00 Pm</div> 
            <div class="bold">Step 4</div>
        </li>
        <li class="StepProgress-item">
            <div class="bold time">02:00 Pm</div> 
            <div class="bold">Step 5</div>
        </li>
    </ul>
</div>

Step 2 : ( Apply CSS Styles to HTML )

<style> 
.bold{font-weight:bold;}
.time{position:absolute; left:-110px;}
.timeline-wrapper {
padding-left:80px;
min-width: 400px;
font-family: 'Helvetica';
font-size: 14px;
/*border: 1px solid #CCC;*/
}
.StepProgress {
position: relative;
padding-left: 45px;
list-style: none;
}
.StepProgress::before {
display: inline-block;
content: '';
position: absolute;
top: 0;
left: 15px;
width: 10px;
height: 100%;
border-left: 2px solid #CCC;
}
.StepProgress-item {
position: relative;
counter-increment: list;
}
.StepProgress-item:not(:last-child) {
padding-bottom: 20px;
}
.StepProgress-item::before {
display: inline-block;
content: '';
position: absolute;
left: -30px;
height: 100%;
width: 10px;
}
.StepProgress-item::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: -37px;
width: 12px;
height: 12px;
border: 2px solid #CCC;
border-radius: 50%;
background-color: #FFF;
}
.StepProgress-item.is-done::before {
border-left: 2px solid green;
}
.StepProgress-item.is-done::after {
/*content: "?";*/
font-size: 10px;
color: #FFF;
text-align: center;
border: 2px solid green;
background-color: green;
}
/*.StepProgress-item.current::before { 
border-left: 2px solid green;
}
.StepProgress-item.current::after {
content: counter(list);
padding-top: 1px;
width: 19px;
height: 18px;
top: -4px;
left: -40px;
font-size: 14px;
text-align: center;
color: green;
border: 2px solid green;
background-color: white;
}*/
.StepProgress strong {
display: block;
}
</style>

I hope you like this article very much & Please don't forget to share.

Thank you.
Continue Reading →

Thursday, July 6, 2017

How to Create Text Animation Using CSS

In this post I will explain how to create text animation using css. To achieving this we need to use css @keyframes property for animating the text.  so we need to add -webkit, -moz, -ms, -o in front of keyframes property to avoiding browser related issues. 

For Example see bolow:
@-webkit-keyframes NAME-YOUR-ANIMATION {} @-moz-keyframes NAME-YOUR-ANIMATION {} @-o-keyframes NAME-YOUR-ANIMATION {} @keyframes NAME-YOUR-ANIMATION {}

#box { -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ }

Following are the steps to creating HTML and CSS  text animations. 


Step 1 : ( Create HTML )

    <p>I'm a</p>

    <b>
      <span>
        web developer<br /> 
        css cowboy<br />
        self-facilitating media node<br />
        box inside a box<br />
        part of the problem
        </span>
    </b>

Step 2 : ( Apply CSS Styles to HTML )

        body {
          padding: 2em 5em;
          font: normal 40px/50px Arial, sans-serif;
          color: #999;
        }
        p {
          height: 50px;
          float: left;
          margin-right: 0.3em;
        }
        b {
          float: left;
          overflow: hidden;
          position: relative;
          height: 50px;
        }
        span {
          display: inline-block;
          color: #FF6633;
          position: relative;
          white-space: nowrap;
          top: 0;
          left: 0;
          -webkit-animation: move 5s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-delay: 1s;
        }
        
        @keyframes move {
            0%  { top: 0px; }
           20% { top: -50px; }
           40% { top: -100px; }
           60% { top: -150px; }
           80% { top: -200px; }

        }

I hope you like this article very much & Please don't forget to share.

Thank you.
Continue Reading →

Form Processing Steps Design Using HTML & CSS


In this post I will explain how to create form processing steps design using HTML and CSS. You can directly copy and paste the below code in your working code. And in this post I am not using any Javascript or Jquery related validations. Just giving an idea about design perspective. In next post I will provide validations too.  To implementing this design please follow the below steps.





Step 1 : ( Create HTML List )

<ul>
    <li class="flag">
      Item Details
    </li>
    <li class="flag">
      Shipping Address
    </li>
    <li class="flag">
      Payment
    </li>
    <li class="flag">
      Conformation
    </li>

</ul>

Step 2 : ( Apply CSS Styles to HTML List )

* {
  box-sizing: border-box;
}
ul{margin-top:100px;}

li{
  float:left;
}
.flag {
  width: 200px;
  height: 50px;
  margin: 0 auto;
  padding-top: 18px;
  position: relative; 
  background: #f36633;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  list-style:none;
}
.flag:before {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 25px solid white;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}
.flag:after {
  content: ' ';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 25px solid white;
  border-left: 25px solid transparent;
  border-bottom: 25px solid white;

}

I hope you like this article very much & Please don't forget to share.

Thank you.
Continue Reading →

Tuesday, January 24, 2017

Adding and Display data using AngularJS

Hi Folks,

In this article i am explaining a sample application for adding and displaying data using AngularJS and Bootstrap.

Below is the code, you can directly copy and paste and run in your application.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>

var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function ($scope) {

    $scope.student = {
        firstName: "",
        lastName: "",
        email: ""
    };

    $scope.reset = function () {

        $scope.student.firstName = "";
        $scope.student.lastName = "";
        $scope.student.email = "";
    };
    $scope.reset();
    $scope.users = [];
    $scope.addUser = function () {
        console.log($scope.student);
        $scope.users.push({
            firstName: $scope.student.firstName,
            lastName: $scope.student.lastName,
            email: $scope.student.email
        });
        $scope.reset();
    };
});
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>

<div ng-app="mainApp" ng-controller="studentController">

    <form name="studentForm" novalidate>
        <table border="0" class="table">
       
            <tr>
                <td>Enter first name:</td>
                <td>
                    <input name="student.firstname" type="text" ng-model="student.firstName" required> <span style="color:red" ng-show="studentForm.student.firstname.$dirty && studentForm.student.firstname.$invalid">
      <span ng-show="studentForm.student.firstname.$error.required">First Name is required.</span>
</span>
                </td>
            </tr>
            <tr>
                <td>Enter last name:</td>
                <td>
                    <input name="lastname" type="text" ng-model="student.lastName" required> <span style="color:red" ng-show="studentForm.student.lastname.$dirty && studentForm.lastname.$invalid">
      <span ng-show="studentForm.student.lastname.$error.required">Last Name is required.</span>
</span>
                </td>
            </tr>
            <tr>
                <td>Email:</td>
                <td>
                    <input name="email" type="email" ng-model="student.email" length="100" required>
<span style="color:red" ng-show="studentForm.student.email.$dirty && studentForm.student.email.$invalid">
      <span ng-show="studentForm.student.email.$error.required">Email is required.</span>
 <span ng-show="studentForm.student.email.$error.email">Invalid email address.</span>
</span>
                </td>
            </tr>
            <tr>
                <td>
                    
                </td>
                <td>
                <button class="btn btn-primary" ng-click="reset()">Reset</button>
                    <button class="btn btn-success" ng-disabled="studentForm.$invalid" ng-click="addUser()">Submit</button>
                </td>
            </tr>
        </table>
        <p>Total User: {{ users.length }}</p>
        <table class="table table-striped">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="usr in users track by $index">
                <td>{{ usr.firstName }}</td>
                <td>{{ usr.lastName }}</td>
                <td>{{ usr.email }}</td>
            </tr>
            </tbody>
        </table>

</body>

</html>

  I hope you like this article very much & Please don't forget to share.

Thankyou.
Continue Reading →

Friday, January 20, 2017

Back to top page scroll using Jquery, CSS, HTML5

Hi, Today i will explain about how to scroll page to top from bottom.

This "Back to top" link allows users to smoothly scroll back to the top of the page. It's a little detail which enhances navigation experience on website with long pages.

This resource is suitable for website with lots of page content. The link fades in on the right-hand side of the content area, after the browser window has been scrolled beyond a certain point, and remains fixed during scrolling.

If users keeps on scrolling, the button nicely reduces its opacity to be less distracting during navigation.

Below is the working code you can directly copy and paste ,

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
      $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span> Back to Top</div>');
    $(window).scroll(function () {
if ($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
    $('#toTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>
  <style>
 #toTop{
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
display: none;
}
  </style>
</head>
<body>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</p>

</div>
</div>

</body>
</html>


I hope you like this article very much & Please don't forget to share.

Thankyou.
Continue Reading →

Thursday, January 19, 2017

Animated “x” icon for the Bootstrap navbar-toggle using CSS (Or) Hamburger icon animation using Bootstrap and CSS

There are lots of posts online about that trendy (and awesome) transition from the hamburger icon (when the menu is collapsed) to that “x” (when the mobile menu has been expanded). This should be pulled off by CSS3 animations, of course.
Below is the code , you can copy and paste ,run directly..

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}

  </style>
</head>
<body>

<div class="container">
  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li><a href="../navbar-fixed-top/">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Navbar example</h1>
    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
  </div>
</div> <!-- /container -->

</body>
</html>

I hope you like this article very much & Please don't forget to share.
Thankyou.
Continue Reading →

Javascript shorten string without cutting words (Or) Javascript trim multiline string without cutting words

In this article i will give Javascript code for trim multiline string without cutting words.
Here i am giving an example,

say i had the string text = "this is a long string i cant display" i want to trim it down to 10 characters but if it does't end with a space finish the word i don't want the string variable to look like this "this is a long string i cant dis" i want it to finish the word until a space occurs.

So here is the solution. You can directly copy and paste the code and run your code.

Solution One:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   // SHORTEN STRING TO WHOLE WORDS
function shorten(s,l) {
  return (s.match(new RegExp(".{"+l+"}\\S*"))||[s])[0];
}
alert( shorten("The quick brown fox jumps over the lazy dog", 5) );
});
</script>
</head>
<body>
</body>
</html>

Solution Two:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
infotext="this is a longish string of test.\n bla bla bla bla text here";
infotext = infotext.match(/^.*$/m)[0].replace(/^([\s\S]{10}\S*).*/, "$1");
alert(infotext);
</script>
</head>
<body>
</body>
</html>

Hope this article is useful for you. If you like please share. If still you have any queries please comment below.
Thankyou

Continue Reading →

Wednesday, July 13, 2016

How to apply styles on a HTML input type "file" in Pure CSS

Bootstrap doesn’t have a designated component for a file upload button. In IE you will face cross browser issues,  To avoiding cross browser issues  i have found a solution. A simple and elegant solution using only HTML and CSS can be achieved with the following sample code,

Before write your html code you need to add required jQuery and bootstrap files in your <head> section.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Here is your HTML Code,

For ( IE 9+ )
For  this you can use this Modern Approach. Let's start by keep a button inside a <label>, adding the appropriate button classes to style it as we need,

<label class="btn btn-default btn-choose-file">
      Choose file from your PC <input type="file" style="display: none;">
</label>


For ( IE 8 and its below)
For this you can use this legacy approach. If you need support for old IE (below 8), Instead of a <label>, Keep your button in a <span>:

<span class="btn btn-default btn-choose-file">
           Choose file from your PC <input type="file">
</span>


And then apply the following CSS. you can use this CSS code for both methods.

.btn-choose-file {
    position: relative;
    overflow: hidden;
}
.btn-choose-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 20px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: #DF474B
    color:#ffffff;
    cursor: inherit;
    display: block;
}

I hope you like this article very much & Please don't forget to share.

Thankyou.
Continue Reading →

Popular Posts