Popover / Tooltip using Jquey plugin

Popover implementation using Webui-popover

Webui-popover is a jquery plugin which is used for creating popover UI component.

Step 1:
Include webui-popover CSS in head section.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.css" />

Step 2:
Include Jquery library and webui-popover js files in head section.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js "></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>

Step 3:
Call the webuipopover method to trigger the popover on the selected element.

                constrains: 'horizontal', 
                multi: true,
                content: 'tooltip contents placed here...'


  • When click the corresponding selector (id or class name), script will trigger the webui-Popover on that target element.
  • Placement attribute specifies the tool-tip direction display. Different direction are there such as left, right, top, bottom, right-top, right-bottom, top-left, top-right.. etc.
  • We can put the tool-tip content within “content” attribute.
Continue Reading

Custom scroll using Jquery

Custom scroll implementation using mcustomscrollbar

Mcustomscrollbar is a jquery plugin. We will see the implementation steps below.

Step 1:
Include mcustomscrollbar CSS file in head section as below.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" />

Step 2:

Inlcude Jquery library and mcustomscrollbar JS files in head section.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

Step 3:

Call the following function with proper selector name.


Note: “.scroll-section” is the class name of content section which we have to trigger the custom scroll.

Continue Reading

Show one popover at a time and hide other popovers

Show one popover at a time

We have implemented popovers on a web page by using webuipopover jquery pluign. When use clicked the first popover after that he wanted to click another popover without closing the first popover at that time both the popovers will open.

To overcome this issue we have to use following script.


$('.triggerpopover').on('click', function (e) {
Continue Reading

Load more items when clicked show link using jquery

Loading more items using Jquery

When the page loads I am displaying 5 items Initially. When I clicked show link which is placed on the bottom, it will show next 5 items. When all the items are displayed, I have to hide the show link further.


Load more items when clicked show link using jquery


var itemsCount = 0;
 var itemsMax = 30;
 //var itemsMax = $("#totalcount").val();
 $('.product-section .item').hide();
function loadNextItems() {
 var pagination = 5;
 //var pagination = $("#initialcount").val(); 
 //var pagination = parseInt($("#initialcount").val()); 
 for (var i = itemsCount; i < (itemsCount + pagination) ; i++) { $('.product-section .item:eq(' + i + ')').show(); //load 5 more items in every iteration } itemsCount += pagination; if (itemsCount > itemsMax) {
//hiding load more link after loaded the maximum count
$('#showmore').on('click', function (e) {
/* end load more items*/
Continue Reading

How to limit the number of characters using Jquery

Limit the characters count (Characters count) using Jquery

In some cases we have to limit the number of characters in text contents(heading, paragraph). Additionally We can add […] which tells the user corresponding word/sentence is not completed.

//Limit the characters count to 55.
$(this).text($(this).text().substr(0, 55));

//adding [...] at then end of word

Continue Reading

Adding Drag and Drop feature in the webpage by using JqueryUI


1) Include Jquery library file in head section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

2) Include Jquery UI library file in head section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

3) Create your html structure as what you want with unique class name or ID name.


<div id="draggablearea">
<span>Drag Me</span>

4) Call the draggable function and pointing the div ID or class name by using below method.


function init() {
containment: "window"

That’s it. Cool 🙂

Note: Usually Drag and drop feature is not working in mobile view. For achieving this feature in mobile platform we have to use touch support Jquery script.

Continue Reading

Enabling Drag and Drop feature in Touch Devices (Mobile View)

Drag and Drop feature in Mobile Devices

Usually some of JQuery UI doesn’t support touch devices. Drag and drop is one of popular feature we have been implementing using Jquery UI. But the problem is Jquery UI Drag and Drop feature is not supported in touch devices.

To overcome this issue we have to add touch support jquery script in our code. Please find below for the required script for enabling drag and drop feature in touch devices.


// scripts for enabling drag and drop feature in mobile view
(function ($) {
// Detect touch support
$.support.touch = 'ontouchend' in document;
// Ignore browsers without touch support
if (!$.support.touch) {
var mouseProto = $.ui.mouse.prototype,
_mouseInit = mouseProto._mouseInit,
function simulateMouseEvent (event, simulatedType) { //use this function to simulate mouse event
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
event.preventDefault(); //use this to prevent scrolling during ui use
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
// Initialize the simulated mouse event using the touch event's coordinates
simulatedType, // type
true, // bubbles 
true, // cancelable 
window, // view 
1, // detail 
touch.screenX, // screenX 
touch.screenY, // screenY 
touch.clientX, // clientX 
touch.clientY, // clientY 
false, // ctrlKey 
false, // altKey 
false, // shiftKey 
false, // metaKey 
0, // button 
null // relatedTarget 
// Dispatch the simulated event to the target element
mouseProto._touchStart = function (event) {
var self = this;
// Ignore the event if another widget is already being handled
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
// Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;
// Track movement to determine if interaction was a click
self._touchMoved = false;
// Simulate the mouseover event
simulateMouseEvent(event, 'mouseover');
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
// Simulate the mousedown event
simulateMouseEvent(event, 'mousedown');
mouseProto._touchMove = function (event) {
// Ignore event if not handled
if (!touchHandled) {
// Interaction was not a click
this._touchMoved = true;
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
mouseProto._touchEnd = function (event) {
// Ignore event if not handled
if (!touchHandled) {
// Simulate the mouseup event
simulateMouseEvent(event, 'mouseup');
// Simulate the mouseout event
simulateMouseEvent(event, 'mouseout');
// If the touch interaction did not move, it should trigger a click
if (!this._touchMoved) {
// Simulate the click event
simulateMouseEvent(event, 'click');
// Unset the flag to allow other widgets to inherit the touch event
touchHandled = false;
mouseProto._mouseInit = function () {
var self = this;
// Delegate the touch handlers to the widget's element
.on('touchstart', $.proxy(self, '_touchStart'))
.on('touchmove', $.proxy(self, '_touchMove'))
.on('touchend', $.proxy(self, '_touchEnd'));
// Call the original $.ui.mouse init method

Continue Reading

Hide html element if no activity on the web page

Hide html element if no user activity on the web page

Hide the DIV, If there is no activity on the web page for more than 10 seconds. Then show the Hid DIV when user clicked the document. We can implement this scenario by using jquery as shown below.

var showinterval = 1;
if(showinterval == 10){

/* if interval reaches 10 the user is inactive and then hide element/s */

showinterval = 1;
showinterval = showinterval+1;

//again show div when user clicked the document

$(document).bind('mousemove keypress', function() {
showinterval = 1;
Continue Reading