Fixed header position jumps down when keypad is opened in IOS IPhone device only.

Fixed header position jumps down when keypad is opened

We can overcome this issue by using below script. The logic is when we focus the input elements only, keypad will open.

isiPhone method is used to detect the Iphone device.


 $("input,textarea").focus(function () {
   if (isiPhone()) {
        //Set of conditions When keypad is opened
      }
      }).focusout(function () {
      if (isiPhone()) {
        //Set of conditions When keypad is closed
   }
});

Note:
navigator.userAgent.match method also used to detect the devices.

Continue Reading

When scroll down change the header position to be fixed.

When scroll down change the header position properties


 function init() {
    window.addEventListener('scroll', function(e) {
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
        shrinkOn = 100,
        header = document.querySelector("header");
        if (distanceY > shrinkOn) {
            classie.add(header,"smaller"); // add class name when page scrolls
        } else {
            if (classie.has(header,"smaller")) {
                classie.remove(header,"smaller");
            }
        }
    });
}
window.onload = init();

Explanation:
When we scroll down, class smaller will add in header element. So, we can set the position: fixed property to smaller class. Otherwise smaller class will be removed.

Continue Reading

How to do Form Validation using Jquery?

Form Validation using Jquery

<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> </head>

We will see the Jquery validation for below sample form.

form validation
HTML:
Required HTML codes for above form design.


<form>
<input name="firstname" type="text" value="firstname" />
<input name="lastname" type="text" value="lastname" />
<input name="email" type="email" value="email" />
<input type="button" value="submit" />
</form>
 

Add below CSS to differentiate the validation messages.

CSS:


.error { 
border: 1px solid #b94a48; 
background-color: #fee; 
}
 

Script:


$(document).ready(function(){
  $(function() {
  // Setup form validation on the #register-form element
 $("#register-form").validate({   //#register-form is form id
     // Specify the validation rules
rules: {
         firstname: "required", //firstname is corresponding input name
         lastname: "required",  //lastname:  is corresponding input name
         email: {               //email is corresponding input name
             required: true,
             email: true
         },
     },
     // Specify the validation error messages
messages: {
         firstname: "Enter First Name",
         lastname: "Enter Last Name",
         email: "Enter Valid Email ID",
         agree: "Please accept our policy"
     },
     submitHandler: function(form) {
         form.submit();
     }
 });

  });
})
 

Explanation:
By using validate method we can define two arrays like rules and messages. In the rules, we can set the validation conditions to accept the given input. In the messages part, we should define the validation messages to show when the user entered the detail wrongly.

Continue Reading

How to Add tooltip when hovering on html element?

Implement tooltip when hovering element

We can implement tooltip by using below script.

Script:


//append tooltip
          jQuery('li .helptext').hover(function(){
             // Hover over code
                   var title = $(this).attr('alt');           
                   jQuery('
').text(title).appendTo('body').fadeIn('slow');
          }, function() {
                   // alert('test');
// Hover out code
jQuery('.tooltip').remove();
          }).mousemove(function(e) {
                   var mousex = e.pageX + 20; //Get X coordinates
                   var mousey = e.pageY + 10; //Get Y coordinates
                   jQuery('.tooltip')
                   .css({ top: mousey, left: mousex })
          });           
          //tooltip end

Note:

Update the selector name based on your class name or id name.

CSS:


.tooltip {
          height:50px;
          color:#fff;
          position:absolute;
          border:1px solid #333;
          background:#333;
          border-radius:5px;
          padding:10px;
          font-size:12px;
          width: 250px;
          z-index: 999999;
          opacity: 1 !important;
}
.helptext {cursor:help;}
Continue Reading

How to Change the background color of odd and even row?

Change the background color for odd and event panel of accordion

‘Odd’ and ‘even’ pseudo classes are used to selecting the odd and even number of row.

Script:


  $(function(){
    $('.panel-group > .panel-default:even').addClass('even');
    $('.panel-group > .panel-default:odd').addClass('odd');
});

Explanation:
By using odd and even classes we can set the required background color using CSS.

Continue Reading

How to detect Browser feature using Modernizr?

Browser feature detection using Modernizr Plugin

Before discussing about runtime approach using modernizr, we will see couple of browser based approach.

  • Caniuse.com
  • Html5test.com

These websites are useful to identify the browser supports for HTML5 features and related specifications.

Modernizr

Modernizr is ajavascript library. It detects either user browser is supporting HTML and CSS3 features or not. It is very useful to detecting HTML5 and CSS3 features Using this feature detection support, developers can try some alternative approaches to implement the same kind of feature in that unsupported browsers.

First we should embed the Modernizr js file in head section.


<script src="modernizr.js"></script>

To check video feature support in different browsers, we can use the following script.


//Example 1:
if(Modernizr.video == false)
{
//alert("Browser doesn't support HTML5 Video");
}

//Example 2:
To check camvas feature support in different browsers, we can use the following script.
if("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    // show the location on a map by using the Google Maps API
  });
} else {
  // showing static map image
}


Continue Reading

How to do Drag and Drop feature using HTML5 API?

Drag and Drop feature implementation

We should use html event attributes like ondragover, ondrop and ondragstart to achieve drag and drop feature.

HTML5:


<div draggable = "false">
<!-- ondragover event: Specifies where the dragged data can be dropped -->
<!-- ondrop event: When the dragged data is dropped, a drop event occurs -->
<div id="div1" 
             style="width: 300px; height: 300px; padding: 10px; border: 1px solid #FF4500;"
             ondragover="allowDrop(event)" 
             ondrop="drop(event)"
             draggable = "false">
</div>
<!--ondragstart = Specify what should happen when the element is dragged -->
<img 
             id="drag1" src="HTML5.jpg" 
             draggable="true" 
             ondragstart="drag(event)" 
    width="204" height="204" />
</div>

Script:


        function drag(event){
         // set the target element
            event.dataTransfer.setData("ControlID", event.target.id); 
        }
        function allowDrop(event){
            //To allow a drop, we must prevent the default handling of the element
            event.preventDefault();
        }
        function drop(event){
            //To allow a drop, we must prevent the default handling of the element
        event.preventDefault();
         // append drag element in to drop area
            var controlId = event.dataTransfer.getData("ControlID");
            event.target.appendChild(document.getElementById(controlId));
        }

Explanation:

  • ondragover event: It specifies when an element is dragged over a drop target.
  • ondrop event: When the dragged data is dropped, a drop event occurs.
  • Ondragstart: It specify what should happen when the element is dragged.
  • event.preventDefault() – Prevent the default behavior of an element.
Continue Reading

How to create Custom select box using CSS?

Custom select box design using CSS

We can develop custom select box design using CSS and Script. Here we will see the CSS based implementation.

HTML


  <div class="select-style">
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

CSS:


.select-style {
 padding: 0;
 margin: 0;
 border: 1px solid #ccc;
 width: 197px;
 overflow: hidden;
 height: 30px;
 background: url("../images/dropdown.png") no-repeat right center #fff; //Set the image path of dropdown icon design
}
.select-style select {
 padding: 0 3px;
 width: 108% !important;
 border: none;
 box-shadow: none;
 background-color: transparent;
 background-image: none;
}
.select-style select:focus {
 outline: 0;
}

Note: Wrap a Div section with a class name “select-style”on the select field.

Continue Reading