Smart technique to make placeholder to work in all the browsers

The placeholder attribute specifies a short hint that describes the expected value of an input field, the short hint is displayed in the input field before the user enters a value. The placeholder attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari. Its a pain for developers to make it work for browsers which doesn’t support placeholder. We do have lots of plugins, which will enable us to fix this issue, however most of them are complicated solutions.

Well, I have a simple solution to make it work for browsers which does not support placeholder.

1. Please add the latest jquery reference to the page  [I have used jquery.1.11.1 ]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Design the page with placeholder attribute


<input type="text" name="firstName" placeholder="First name">
eg: 

3. Just add the magic script to the page.


$.support.placeholder = ('placeholder' in document.createElement('input'));
if (!$.support.placeholder) {
      $('[placeholder]').each(function () {
            if ($(this).val() === "") {
                  $(this).val($(this).attr("placeholder"));
                  $(this).addClass("placeholderstyle");
            }
      });
      $("[placeholder]").focus(function() {
            if ($(this).val() === $(this).attr("placeholder")) {
                  $(this).val("");
                  $(this).removeClass("placeholderstyle");
            }
      }).blur(function() {
            if ($(this).val() === "") {
                  $(this).val($(this).attr("placeholder"));
                  $(this).addClass("placeholderstyle");
            }
      });
}

Basically we are checking the browser supports place holder attribute or not. If it returns false, we inject our piece of code. On load we move the place holder data to value attribute, so when the page loads place holders are already in place. Two basic placeholder events are blur and focus, on focus we remove the value and on blur we put the value back. To look like placeholder we can add simple css styling, in this case I use ‘placeholderstyle’ with color #B1A9B1.

Simple Solution … 🙂

Smart java script to handle query string using Regex

Handling query strings using java script is quite tough. If we Google it, we find lots of solutions, however most of the solutions are complicated or not generic. Years back I got one solution, but I have no idea who came up with this idea. The piece of code is totally generic and can be reused anywhere.


var uri = window.location.href; // Takes the current page Url
var queryString = {};           // array of querystring
uri.replace(
	new RegExp("([^?=&]+)(=([^&]*))?", "g"),
	function($0, $1, $2, $3) { queryString[$1] = $3; }
);                              //regex logic
// Alerts the firstName value from the query string
alert('First Name: ' + queryString['firstName']);
// Alerts the lastName value from the query string
alert('First Name: ' + queryString['lastName']);
 

Now imagine that the current page URL is
'http://www.geekphilip.com/add.php?firstName=philip&lastName=tiju&email=info@geekphilip.com'
Now by using queryString[ ‘tag Name’ ] you can read the value.
ie. queryString[‘firstName’] returns philip and queryString[‘lastName’] returns tiju.

I really would like to appreciate the guy, who came up with this idea.

Anyway Hats off to you boss.

Simple and stylish Drop down using CSS

We have found a simple and decent way to achieve stylish select dropdown using CSS. It works across all browsers, simple to implement and moreover stylish.

1. Create a normal select dropdown as follows:

<select id="ddlCountry">
   <option value=""> --- Choose ---</option>
   <option value="India">India</option>
   <option value="China">China</option>
   <option value="Pakistan">Pakistan</option>
   <option value="Sri Lanka">Sri Lanka</option>
</select>

2. Now wrap the select with a div tag

<div class="ddlWrap">
   <select id="ddlCountry">
      <option value=""> --- Choose ---</option>
      <option value="India">India</option>
      <option value="China">China</option>
      <option value="Pakistan">Pakistan</option>
      <option value="Sri Lanka">Sri Lanka</option>
   </select>
</div>

3. Basically we are going to make the opacity 0 and add a background image for that

.ddlWrap select {
   opacity: 0;
   width: 215px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   background: url("arrow_select.png") no-repeat 100% 0 #2D2D2D; //for IE
   -webkit-appearance: none; //for Google Chrome
   color: #fff;
   height: 32px;
}
.ddlWrap {
   width: 215px;
   overflow: hidden;
   background: url("arrow_select.png") no-repeat 100% 0 #2D2D2D;
   border: solid 1px #333333;
   border-radius: 5px;
   position: relative;
}

4. Now you will find a drop down with an arrow and no text to display, thats because the opacity is 0. Here we need to do a small tweak. We add addional span tag above the select and display the selected content.

<div class="ddlWrap">
   <span> --- Choose ---</span>
   <select id="ddlCountry">
      <option value=""> --- Choose ---</option>
      <option value="India">India</option>
      <option value="China">China</option>
      <option value="Pakistan">Pakistan</option>
      <option value="Sri Lanka">Sri Lanka</option>
   </select>
</div>

5. And update the style for span

.ddlWrap span {
   position: absolute;
   left: 10px;
   top: 5px;
}

6. Now with the help of jQuery we update the span with the selected dropdown text

$('select').click(function () {
   $(this).prev('span').text($(this).find('option:selected').text());
});

That’s it, we have done it. You can trigger a  ready event and update the selected content, if you do not wish to hard code ‘— Choose —‘.

Select drop down using CSS
Select drop down using CSS

 

Click here to download the full source code.

 

Courtesy: Biswanath Dey (BD)

Visual Image loader using jQuery

There is a excellent jQuery script which creates visual image loading effect, while the image actually loads. When the page is initialized, an animated preloader will take it’s place creating the “image loading” effect. Once the image is ready to be displayed, a script will kick in and image loads with a fade effect.

Step 1. Create a visual image loader image. I prefer www.ajaxLoad.info, once created name it as ‘loader.gif’

Step 2. Create a Div area for the image

  <div id="showloader"
       style="background: transparent url(loader.gif) no-repeat center  center;
              width: 500px;
              height: 500px;
              overflow: hidden;">
  </div>

Step 3. Create an image loading kick-in function.

  function putLoading(imageLink)
  {
     var img = new Image();
     $(img).load(function ()
     {
         $(this).css('display', 'none');
         $(this).hide();
         $('#showloader').removeClass('showloading').append(this);
         $(this).fadeIn();
     }).error(function ()
     {
         // some error message
     }).attr('src', imageLink);
  }

Step 4: Now just call the function putLoading() with Image path.


Full Code:

  <div id="showloader"
       style="background: transparent url(loader.gif) no-repeat center  center;
              width: 500px;
              height: 500px;
              overflow: hidden;">
  </div>
  <script src="js/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
  function putLoading(imageLink)
  {
    var img = new Image();
    $(img).load(function ()
    {
       $(this).css('display', 'none');
       $(this).hide();
       $('#showloader').removeClass('showloading').append(this);
       $(this).fadeIn();
    }).error(function ()
    {
       // some error message
    }).attr('src', imageLink);
  }
  </script>
  <script type="text/javascript">
     putLoading('http://farm1.static.flickr.com/3167/5796343598_3e94a146cc.jpg');
  </script>

Demo: http://worldofmagicians.com/photogallery/photogallery.php?user=MagicianPhilip