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*/    
/*for IE10*/
select::-ms-expand {   
  display: none;

Continue Reading

Adding Drag and Drop feature in the webpage by using JqueryUI


1) Include Jquery library file in head section.

<script src=""></script>

2) Include Jquery UI library file in head section.

<script src=""></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