Technology: JQuery

Blogs

Adding image to select list with cross browser compatibility

Here we’re going to discuss how to add an image into HTML select tag. Select Tag is among the most commonly used features in websites, it allows you to create a drop-down list.

Now, many a time it’s required to add a specific image with respect to specific value in the drop down menu, default select tag does not allow you to add an image, here I have made a simple jQuery tweak with…

Read More
Disabling Dates in jQueryUI

There is the "beforeShowDay" option available for jQuery UI datepicker which makes a function call for each date and returns true/false based on value is allowed or not.

beforeShowDay: This function takes a date as a parameter and returns an array with 0th index as true/false indicating whether or not this date is selectable. It is called for each day in the datepicker before is it…

Read More
Detect Browser using jQuery

It is very easy to detect the browser & OS using jquery. This code snippet will give you the browser.

Let me provide you an example:  

Sometimes issues are generated in particular browsers like:

  1. OpenSans font face displayed extra bold in Mac OS.
  2. Default 'line-height' values are not same in all browsers all time.
  3. Box-shadow is not working…
Read More
 Hide Nav Arrows

We all are familiar with Owl Carousel, I hope! Now, default behavior of Owl carousel is: it always displays nav arrows irrespective of number of items. There is a possibility that carousel have less number(s) of item(s) on screen and there is no scroll behaviour, yet arrows are always displayed.

Follow below code to hide the arrows if there are less number of items in carousel:

Read More
Get value of transform property using jQuery

When we write code such as

var transform_val = jQuery('.animation').css('transform');

it returns all value of transform property like rotate, translate, matrix, scale, skew etc.

But if you want to get single value of rotate, translate, matrix, scale, skew etc follow below code:

HTML

Read More
Custom Design of On/Off Switch

This is the custom design of On/Off switch OR toggle button for checkbox and radio button. You can use below code for On/Off switch without using any jQuery code and JS libraries. You do not need any icons & images.

Features:

  • Support in all browsers, OS & devices (Android & iPhone)
  • Need not use any external js, script and libraries…
Read More
Autocomplete In Angularjs

The Autocomplete textbox is used for providing a suggestion…

Read More
Web Push Notification

As in android/iOS, in web app also we can have a push notification, in this blog you will learn step by step guide for creating a web notification for your website.

It is combination of Javascript and scripting language that your site uses, generally PHP.

=> Notification object properties are described below.

Methods, Properties, and Events: 

Read More
Better HTML for better Form Fields

Some form fields look different on certain browser as per its behaviour. Here I have managed same design for all fields in all the browsers.

In this blog, code is provided for all the form fields.

Feature:

  • Support in all browsers and OS & devices (Android & i Phone). I.e. Browser Compatible.
  • Easy to use.
  • SCSS & CSS…
Read More
Create sliders to move in opposite direction with each other

This is a custom animated slider with left & right offset slide effect. Animated effect like opening/closing door effects. This slider can be used in testimonial, display 2 items in a slide, simple content & image slider and more.

Feature

  • Support in responsive view, tablet & mobile views
  • Support fluid responsive width
Read More