Useful CSS hacks for specific browsers

browser specific CSS hack codes

IE-10

// eg: margin-top:10px\9;

CSS hack for IE-11

// eg: @media all and (-ms-high-contrast:none){ }

CSS hack for Chrome

// eg: @media screen and (-webkit-min-device-pixel-ratio:0) { }

CSS hack for Safari


@media screen and (-webkit-min-device-pixel-ratio:0) {
   ::i-block-chrome, .footIcon{
     width:25% !important;
} 
}

Adding browser specific prefix:

Prefix for Mozilla

// eg: -moz-transform: rotate(90deg);


@-moz-document url-prefix() {
  .logo {
     width:300px;
   }
}

CSS hack for Microsoft Edge browser


@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

Prefix for Chrome and Safari

// eg: -webkit-transform: rotate(90deg);

Prefix for IE

// eg: -ms-transform: rotate(90deg);

Prefix for Opera

// eg: -o-transform: rotate(90deg);

Continue Reading

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

Change the background color of table row when select a checkbox

Change the background color of table row by checking checkbox using Jquery

Script:


 $(function() {
    $('td:first-child input').change(function() {
        $(this).closest('tr').toggleClass("highlight", this.checked);
});

Explanation

  • Change method is used to identify the event change of checkbox.
  • We can set some CSS properties to class name ‘highclass’ for changing the background color.

Demo

See the Pen Change the background of table row when select a checkbox by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Continue Reading

How to do Form Validation using Jquery?

Form validation using Jquery

Include the Jquery library and jquery.validate file.

Include below JS files


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

Script


$(document).ready(function(){
  $(function() {
 $("form[name='register-form']").validate({  
rules: {
         firstname: "required",
		  password: {
			required: true,
			minlength: 6
		  },
         email: {               
             required: true,
             email: true
         },
     },
messages: {
			firstname: "Enter First Name",
			 password: "Enter Passowrd",
			 email: "Enter Valid Email ID"
		},
		 submitHandler: function(form) {
			 form.submit();
		 }
 });

  });
})

Explanation:

Validate method will apply to form. 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.

Output

See the Pen Form validation using Jquery by Vinothkumar (@fedtutorial) on CodePen.0

Continue Reading

How to change the background color of odd and even rows?

Change the background color for odd and event rows using Jquery

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

Script:


  $(function(){
   $('table tr:even').addClass('even');
    $('table tr:odd').addClass('odd');
});

Explanation:

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

Demo

See the Pen Change the background color of add and event table rows by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

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