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>

Change placeholder color CSS - cross browser

If you are not using labels in your html text fields you may need to add a placeholder for the text box. But changing placeholder color of an HTML input text field according to your web template need few  CSS lines to work in all major web browsers. You have to use different types of pseudo elements to get the job done.

.form-control::-webkit-input-placeholder { 
/* WebKit, Blink, Edge */
    color:    #a5a5a5;
}
.form-control:-moz-placeholder { 
/* Mozilla Firefox 4 to 18 */
   color:    #a5a5a5;
   opacity:  1;
}
.form-control::-moz-placeholder { 
/* Mozilla Firefox 19+ */
   color:    #a5a5a5;
   opacity:  1;
}
.form-control:-ms-input-placeholder { 
/* Internet Explorer 10-11 */
   color:    #a5a5a5;
}
.form-control::-ms-input-placeholder { 
/* Microsoft Edge */
   color:    #a5a5a5;
}
.form-control::placeholder { 
/* Most modern browsers support this now. */
   color:    #a5a5a5;
}

CSS Positions Sticky - a new CSS3 Position make life easy

Making sticky elements was not that straightforward in old days you may have heard sticky headers footers and even sticky.js like javascript files to do the job to create sticky elements in your web pages.

In older CSS versions there were three values for position: relative | absolute | fixed .  We can change the offsets of these values by giving bottom or top and left or right.

Relative - Current position of the page -  can change it with top left right values without inheriting the other elements in the page

Absolute - Absolute is used to position an element within its parent element. (if the parent element have a  position)

Fixed - similar to absolute but it positioned relative to the web browser window instead of the parent div or element even when you scroll

The new value Position : Sticky is a combination of RELATIVE and FIXED

This will be relatively positions untill it reached a value of offset while scrolling the page.
Then it will become fixed.

.sticky{
top:200px;
position:sticky;
}

This feature will not suport in any version of IE or Opera Mini broswers