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

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.

Script:


// 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) {
return;
}
var mouseProto = $.ui.mouse.prototype,
_mouseInit = mouseProto._mouseInit,
touchHandled;
function simulateMouseEvent (event, simulatedType) { //use this function to simulate mouse event
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
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
simulatedEvent.initMouseEvent(
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
event.target.dispatchEvent(simulatedEvent);
}
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])) {
return;
}
// 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) {
return;
}
// 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) {
return;
}
// 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
self.element
.on('touchstart', $.proxy(self, '_touchStart'))
.on('touchmove', $.proxy(self, '_touchMove'))
.on('touchend', $.proxy(self, '_touchEnd'));
// Call the original $.ui.mouse init method
_mouseInit.call(self);
};
})(jQuery);

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;
setInterval(function(){
if(showinterval == 10){

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

$('.main-menu').fadeOut("slow");
showinterval = 1;
}
showinterval = showinterval+1;
//console.log(showinterval);
},1000);

//again show div when user clicked the document

$(document).bind('mousemove keypress', function() {
$('.main-menu').fadeIn("slow");
showinterval = 1;
});
Continue Reading