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

Custom image upload and preview inside the button

Customizing HTML file upload button is not always easy. Here is a way to create a custom image upload button (custom file upload button) with CSS Javascript and Jquery and preview the uploaded image instead of the image we used for the custom button. 

HTML

<div class="image-upload">
    <label for="file-input">
        <img src="http://goo.gl/pB9rpQ" id="blah" />
    </label>
    <input id="file-input" type="file"/>
</div>

CSS

.image-upload > input
{
    display: none;
}
.image-upload img
{
    width: 80px;
    cursor: pointer;
}

Javascript

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
$("#file-input").change(function() {
  readURL(this);
});

Custom radio buttons with CSS only

Do you want to customize the ugly radio buttons in your web forms . There are some plugins like icheck to do the job but when the page loading time matters you may not want to call those unwanted heavy css and javascript files.

There is a way to customize the radios buttons with only css3. it has cross browser support because thse days almost all the web browsers support it.

What it does is hiding the default radio buttons and using CSS Pseudo-elements adding some stylish buttons.

The working code is below

HTML

<div class="alert">
  <ul>
  <li>
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">Pizza</label>
    
    <div class="check"></div>
  </li>
  
  <li>
    <input type="radio" id="s-option" name="selector">
    <label for="s-option">Bacon</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
  
  <li>
    <input type="radio" id="t-option" name="selector">
    <label for="t-option">Cats</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
</ul>
</div>

CSS

ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 50px;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
    color: #dedede;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #dedede;
}

ul li .check::before {
  display: block;
  position: absolute;
    content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
    left: 5px;
  margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}

input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}

input[type=radio]:checked ~ label{
  color: #0DFF92;
}