Bootstrap fallback helper for IE8

Bootstrap has its own fallbacks for old browsers, but I was never fully satisfied with the result. The following helps setting the basic elements in place:

  1. First add a JavaScript function to check if IE and if IE get the version

function isIE() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf(‘msie’) != -1) ? parseInt(myNav.split(‘msie’)[1]) : false;
}

 

  1. On document load detect if IE and if version 8, append fallback classes to the head section of the page:

$(document).ready( function () {
if (isIE () == 8) {
$(“head”).append(“” +
“.container { width: 1170px; max-width: 1170px; min-widt: 1170px; } ” +
“.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{float:left}” +
“.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1 { width: 8%; }.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2 { width: 16%; }.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3 { width: 25%; }.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4 { width: 33%; }.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5 { width: 41%; }.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6 { width: 50%; }.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7 { width: 58%; }.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8 { width: 66%; }.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9 { width: 75%; }.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10 { width: 83%; }.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11 { width: 91%; }.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { width: 100%; }” +
“.col-sm-2 { width: 160px; margin:0; padding:0; float: left; }.col-sm-10 { width: 670px; margin:0; padding:0; float: left; }.col-md-12 { width: 100%; margin:0; padding:0; float: left; }.col-md-6 { width: 450px; margin-left: 10px;}.divider { height: 560px; }” +
“.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display:block;}” +
“”);

}
});

Mobile, iOS, Safari, IE browser detection using simple JS

This post is just for reference for when browser detections are required:


/*If handheld device such as mobile and tablets returns true, else false */
function isHandheldDevice() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
return true;
}
return false;
}


/*Simple: If safari on windows returns true, else false */
function isSafariOnWindows() {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("safari/") !== -1 && // It says it's Safari
ua.indexOf("windows") !== -1 && // It says it's on Windows
ua.indexOf("chrom") === -1 // It DOESN'T say it's Chrome/Chromium
) {
return true;
}
return false;
}


/*Advanced: If safari on windows returns true, else false */
function isSafariNotMac () {
var myNav = navigator.userAgent.toLowerCase();
var is_chrome = myNav.indexOf('chrome') > -1;
var is_safari = myNav.indexOf("safari") > -1;
var is_mac = myNav.indexOf("macintosh") > -1;
var is_windows = myNav.indexOf("windows") > -1;
if ((is_chrome)&&(is_safari)) {is_safari=false;}
if ((is_mac)&&(is_safari)) {is_safari=false;}
if ((is_windows)&&(is_safari)) {is_safari=false;}
return is_safari;
}


/* If Safari return version number, else return false */
function safariVersion()
{
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("safari/") !== -1 && ua.indexOf("chrom")   === -1 )
{
var version = parseInt(ua.substr(ua.indexOf("safari/") + ("safari/").length, 1));
return version;
}
return false;
}


/* If IE return version number, else return false */
function isIE() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

Create Shortcode in Plugin

1. Under folder plugins create a new folder with your plugin name, example “my-sample-plugin”

2. Create a php file in the new folder with the same name “my-sample-plugin.php”

3. Setup your class in the newly created file:
class wp_my_sample_plugin {
public function __construct() {
}
}

$wpSample = new wp_my_sample_plugin ();

 

4. At the end of your constructor add the code for the shortcode:

 

add_shortcode( 'mysample', array( $this, 'my_sample_shortcode_fn' ) );

//first parameter represents the shortcode name you want to assign

//second parameter represents the function name to call

 

5. Right after the constructor, create the function name “my_sample_shortcode_fn”

 

public function my_sample_shortcode_fn($atts) {
$msg = 'Welcome to my sample plugin shortcode';
if(isset($atts['name']))
{
$msg .= ','.$atts['name'];
}
return $msg;
}

//The above function will display a welcome message whenever the shortcode is called.

//$atts represents any attributes passed along in the shortcode

//To check if an attribute is set, all we need to do is call $attr[‘name_here’]

//Attributes help making a plugin customizable through shortcodes

 

6. And finally, in your html all you need to do is add the following shortcode where ever you would like to display the content:

echo do_shortcode('[mysample name="Rochelle"]');

 

 

Solution: The file ‘.asmx’ has not been pre-compiled, and cannot be requested.

I had published/precompiled my site and deployed to IIS however when I try to use the service asmx I get the error “The file ‘.asmx’ has not been pre-compiled, and cannot be requested”.

In order to fix this issue I opened the “PrecompiledApp.config” and changed the updatable attribute as follows:

From:

<precompiledApp version=”2″ updatable=”false”/>

To:

<precompiledApp version=”2″ updatable=”true”/>

Hope this works for you too 🙂

SVG with PNG fallback

SVG is a very good way of presenting images, however not all browsers support it. Browsers that do not support it would simply show nothing!

In order to be able to use SVG images both as <img> html tags and as css background images, we can use PNG fallbacks for older browsers that do not support SVG.

On the internet, a lot say that a simple onerror attribute in the <img> would suffice, however this did not work for me. The modernizer makes it very easy to have html element fallbacks using javascript.

If you do not already have modernizer installed, download here.

Once you add the reference to the modernizer and placed all your <img src=”image.svg” /> tags, place the following code at the bottom of you page in a javascript tag, preferably in document ready :


<script type="text/javascript">


if (!Modernizr.svg) {
var imgs = document.getElementsByTagName('img');
var svgExtension = /.*\.svg$/
var l = imgs.length;
for(var i = 0; i < l; i++) {
if(imgs[i].src.match(svgExtension)) {
imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
console.log(imgs[i].src);
}
}
</script>

Moreover, when using background images a very simple css change should be enough. Instead of using background or background-image, we will use them both. This would set the png first and if SVG is supported, it will be set after the png.


#myImage {
background: url("myImage.png") no-repeat 0 0;
background-image: url("myImage.svg");
}

Issue: Razor TextBoxFor returns null in Controller

Explanation:

I had a couple of textbox’s using razor syntax and some had an html attribute disabled in order to stop the user from editing. On Postback, the disabled textboxes kept on returning null. I made a couple of tests. At first I thought it is because I am setting the value in jQuery which was not the case. The problem is that the form ignors all disabled fields, even if they contain data. So the trick was to simply removed disabled and replace it with readonly.

Example:

Wrong:

@Html.TextBoxFor(model => model.username, new { @disabled= “disabled” })

Correct:

@Html.TextBoxFor(model => model.username, new { @readonly = “readonly” })

How to check if user is on handheld device (mobile/tablet) using JavaScript

Just Paste the code below and call isHandheldDevice() when you would like to know. True would mean the user is on a mobile or tablet.

<script>
function isHandheldDevice() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
return true;

return false;
}
</script>

Image Not Found Solution

It is very annoying when missing images are shown as the default broken image as it is first of all, ugly, and secondly sometimes destorts the height/width of your content. This is a very quick and easy solution:

<img src=”myImage.jpg” onerror=”this.src=’no-image-found.jpg’;” alt=”My Image”/>