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.


(function($){
        $(window).load(function(){
            $(".scroll-section").mCustomScrollbar();
        });
 })(jQuery);

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.

Script:


$('.triggerpopover').webuiPopover();
$('.triggerpopover').on('click', function (e) {
  $('.triggerpopover').not(this).webuiPopover('hide');
});
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.

Solution:

Load more items when clicked show link using jquery

Script:


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()); 
 //parseInt
 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) {
 $('#showmore').hide(); 
//hiding load more link after loaded the maximum count
 }
};
loadNextItems();
$('#showmore').on('click', function (e) {
 e.preventDefault();
 loadNextItems();
});
/* 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
$(this).append('...');

Continue Reading

Instantly turn any ttf font permission into installable

Turn any ttf font permission into installable

Online based tool to set truetype fonts permission into its least restrictive form “installable embedding allowed”. Solves most problems related to embedding fonts into web pages, free of charge. Based on the tool embed. Made because there just weren’t any quick fix tools available.

https://www.andrebacklund.com/fontfixer.html

Continue Reading

Font color is not changing on Iphone for Numbers

This happens as IOS detects Phone Numbers and change to links that people can click to call them.

To overcome this issue, we can follow two approaches such as CSS fix and adding meta data fix.

Sample HTML


<div class="number">01202-529-414</div>

1) CSS based Fix


.number a,
.number a[href^=tel]{
   color: inherit; //or color code
   text-decoration: none;
}

2) Meta data based Fix

<meta name="format-detection" content="telephone=no" />

Continue Reading

Removing dropdown arrow from select

Remove default dropdown arrow in select field

Removing dropdown arrow from select field in Chrome, Mozilla and IE browsers. To achieve this scenario, we have to use below prefix based CSS codes.


select {    
/*for firefox*/
-moz-appearance: none;
/*for chrome*/    
-webkit-appearance:none;
}
/*for IE10*/
select::-ms-expand {   
  display: none;
}

Continue Reading

Adding Drag and Drop feature in the webpage by using JqueryUI

Steps:

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.

HTML:


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

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

Script:


function init() {
$('#draggablearea').draggable(
{
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