Responsive image link map

This is a Copy and Paste Quick fix solution for HTML Image Map linking for responsive design with Javascript and Jquery. Add this code before closing your body tag.

<img src="images/worldmap-world-map.jpg"   usemap="#image-map">
       
       
<map name="image-map">
    <area target="" alt="North America/Canada" title="North America/Canada" href="#" coords="373,217,393,255,405,272,405,312,391,373,354,368,352,415,371,443,344,473,290,496,213,446,168,395,155,354,137,312,114,293,87,291,45,315,41,276,30,240,18,216,27,185,35,156,59,146,116,153,128,177,155,161,169,152,178,108,260,110,283,70,313,66,344,76,336,143,323,175,376,233,404,277,369,262" shape="poly">
    <area target="" alt="Sri Lanka" title="Sri Lanka" href="#" coords="931,505,892,460" shape="rect">
    <area target="" alt="Europe" title="Europe" href="#" coords="606,362,633,369,654,385,670,371,679,395,707,404,747,364,777,354,776,269,756,270,753,229,732,224,726,205,707,205,706,158,684,158,624,224,617,248,575,225,536,226,534,244,574,255,601,254,584,265,565,279,574,306,564,327,543,335,546,370,575,384,611,379" shape="poly">
    <area target="" alt="Australia" title="Australia" href="#" coords="1011,611,1035,588,1056,575,1079,570,1088,550,1122,551,1134,574,1150,575,1149,532,1168,537,1180,574,1189,582,1197,598,1195,639,1175,650,1176,667,1156,671,1151,691,1111,696,1097,658,1075,650,1067,663,1048,675,1009,660" shape="poly">
    <area target="" alt="East Asia" title="East Asia" href="#" coords="948,405,966,399,975,358,1051,357,1067,335,1089,333,1102,340,1109,362,1125,383,1124,405,1068,407,1067,431,1058,451,1023,470,1034,487,1068,474,1088,493,1073,523,1050,549,1013,558,992,519,971,489,959,451,962,436" shape="poly">
</map>

!function(){"use strict";function a(){function a(){function a(a,d){function e(a){var d=1===(f=1-f)?"width":"height";return c[d]+Math.floor(Number(a)*b[d])}var f=0;j[d].coords=a.split(",").map(e).join(",")}var b={width:l.width/l.naturalWidth,height:l.height/l.naturalHeight},c={width:parseInt(window.getComputedStyle(l,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(l,null).getPropertyValue("padding-top"),10)};k.forEach(a)}function b(a){return a.coords.replace(/ *, */g,",").replace(/ +/g,",")}function c(){clearTimeout(m),m=setTimeout(a,250)}function d(){l.width===l.naturalWidth&&l.height===l.naturalHeight||a()}function e(){l.addEventListener("load",a,!1),window.addEventListener("focus",a,!1),window.addEventListener("resize",c,!1),window.addEventListener("readystatechange",a,!1),document.addEventListener("fullscreenchange",a,!1)}function f(){return"function"==typeof i._resize}function g(a){return document.querySelector('img[usemap="'+a+'"]')}function h(){j=i.getElementsByTagName("area"),k=Array.prototype.map.call(j,b),l=g("#"+i.name)||g(i.name),i._resize=a}var i=this,j=null,k=null,l=null,m=null;f()?i._resize():(h(),e(),d())}function b(){function b(a){if(!a.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==a.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+a.tagName+">.")}function c(c){c&&(b(c),a.call(c),d.push(c))}var d;return function(a){switch(d=[],typeof a){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(a||"map"),c);break;case"object":c(a);break;default:throw new TypeError("Unexpected data type ("+typeof a+").")}return d}}"function"==typeof define&&define.amd?define([],b):"object"==typeof module&&"object"==typeof module.exports?module.exports=b():window.imageMapResize=b(),"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a).end()})}();
//# sourceMappingURL=imageMapResizer.map
jQuery('map').imageMapResize();
//Calling with Jquery

Wordpress print something only for certain page

Wordpress print a short code or a HTML element in your files by hardcoding only for certain page in your wordpress blog

You can use the Page ID Post ID or the Slug

  <?php
  if (is_page('11')) {
    echo do_shortcode('[metaslider id="190"]'); 
  }
  ///
  if (is_page('about-us')) {
    echo do_shortcode('[metaslider id="190"]'); 
  }
  ?>

Converting uppercase url to lowercase letters and redirect

RewriteBase /

# If there are caps, set HASCAPS to true and skip next rule
RewriteRule [A-Z] - [E=HASCAPS:TRUE,S=1]

# Skip this entire section if no uppercase letters in requested URL
RewriteRule ![A-Z] - [S=28]
# Replace single occurance of CAP with cap, then process next Rule.
RewriteRule ^([^A]*)A(.*)$ $1a$2
RewriteRule ^([^B]*)B(.*)$ $1b$2
RewriteRule ^([^C]*)C(.*)$ $1c$2
RewriteRule ^([^D]*)D(.*)$ $1d$2
RewriteRule ^([^E]*)E(.*)$ $1e$2
RewriteRule ^([^F]*)F(.*)$ $1f$2
RewriteRule ^([^G]*)G(.*)$ $1g$2
RewriteRule ^([^H]*)H(.*)$ $1h$2
RewriteRule ^([^I]*)I(.*)$ $1i$2
RewriteRule ^([^J]*)J(.*)$ $1j$2
RewriteRule ^([^K]*)K(.*)$ $1k$2
RewriteRule ^([^L]*)L(.*)$ $1l$2
RewriteRule ^([^M]*)M(.*)$ $1m$2
RewriteRule ^([^N]*)N(.*)$ $1n$2
RewriteRule ^([^O]*)O(.*)$ $1o$2
RewriteRule ^([^P]*)P(.*)$ $1p$2
RewriteRule ^([^Q]*)Q(.*)$ $1q$2
RewriteRule ^([^R]*)R(.*)$ $1r$2
RewriteRule ^([^S]*)S(.*)$ $1s$2
RewriteRule ^([^T]*)T(.*)$ $1t$2
RewriteRule ^([^U]*)U(.*)$ $1u$2
RewriteRule ^([^V]*)V(.*)$ $1v$2
RewriteRule ^([^W]*)W(.*)$ $1w$2
RewriteRule ^([^X]*)X(.*)$ $1x$2
RewriteRule ^([^Y]*)Y(.*)$ $1y$2
RewriteRule ^([^Z]*)Z(.*)$ $1z$2

# If there are any uppercase letters, restart at very first RewriteRule in file.
RewriteRule [A-Z] - [N]

RewriteCond %{ENV:HASCAPS} TRUE
RewriteRule ^/?(.*) /$1 [R=301,L]

Custom HTML5 Validation Message 0 Javascript

Change HTML5 validation error message and add a customize validation. This is easy and no need to write java script separately. See the example for a select list highlighted area.

<select
 class="form-control" 
id="priceselect"
 required="" 
 oninvalid="this.setCustomValidity('Please select Portion Size')" 
oninput="setCustomValidity('')"
 title="Please select Portion Size">
<option value="">-- Please Select Portion Size --</option>
</select>

<select
 class="form-control" 
id="priceselect"
 required="" 
 oninvalid="this.setCustomValidity('Please select Portion Size')" 
oninput="setCustomValidity('')"
 title="Please select Portion Size">

<option value="">-- Please Select Portion Size --</option>

</select>

Link to send a text message in html - Cross Browser Solution

Cross-Browser Solution for Creating a sms link in html web page to click and send sms from your smart phone with a message and a number. This will work in web browsers for iOS 5,6,7,8,9,10 and Android versions.

function checkMobileOS() {
 
    var MobileUserAgent = navigator.userAgent || navigator.vendor || window.opera;
 
    if (MobileUserAgent.match(/iPad/i) || MobileUserAgent.match(/iPhone/i) || MobileUserAgent.match(/iPod/i)) {
 
        return 'iOS';
 
    } else if (MobileUserAgent.match(/Android/i)) {
 
        return 'Android';
 
    } else {
 
return 'unknown';
 
    }
 
}
 
var message_text = 'Some message goes here';
 
var href = '';
 
if (checkMobileOS() == 'iOS') {
 
    href = "sms:+123456789&body=" + encodeURI(message_text);
 
}
 
if (checkMobileOS() == 'Android') {
 
    href = "sms:+123456789?body=" + encodeURI(message_text);
 
}
 
document.getElementById("sms_link").setAttribute('href', href);

<a id="sms_link" href="#">Tap to SMS</a>