Some specific CSS uses

Removing dotted outline when link is selected

Below CSS lines used to removing default dotted outline when link is selected.


a, a:hover, a:active, a:focus {
outline:0;
}

Draw Diamond shape using CSS3

After creating square shape using HTML elements like div or span then apply CSS3 transform property.


.square-shape{
  transform: rotate(45deg);
}

Changing Cursor Selection color

The below CSS codes are used to change the cursor selection background color in different browsers.


/* Mozilla based browsers */
selector::-moz-selection {
background-color: #FF68B0;
color: #000;
}
/* Works in Safari */
selector::selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Opera */
selector::-o-selection {
background-color: #FF68B0;
color: #FFF;
}
selector::-ms-selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Internet Explorer */
selector::-webkit-selection {
background-color: #FF68B0;
color: #FFF;
}

Note: Selector would be any class name, ID name or element name.

How to style the placeholder text?


/* placeholder css */
::-webkit-input-placeholder {  
  color: #BBBDBF; /* chrome, safari */
}
::-moz-placeholder { /* Firefox 19+ */
  color: #BBBDBF;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #BBBDBF;
}
:-moz-placeholder { /* Firefox 18- */
  color: #BBBDBF;
}
Continue Reading

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

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