Karma – jQuery2 Homepage – IE11 Bug Fix

Posted in: ,

Overview:

In this tutorial we’re going to provide a solution for resolving the IE11 bug on the jQuery2 Homepage template. This is a temporary fix which has been resolved in the soon-to-be-released Karma update.

This issue has already been fixed in Karma 4.0 and higher.

Instructions:

  1. Log into your webserver via FTP
  2. Locate the following file: wp-content/themes/Karma/truethemes_framework/global/basic.php
  3. Scroll to line 7 of the code and make the coding change below.
  4. Save the file and all will be well :)

(please note: if you require assistance with this modification please submit a Ticket with temporary FTP login details and we'll gladly implement for you)

On line 7 locate this code:

//For jQuery 2 template!
if(is_page_template('template-homepage-jquery-2.php')):
?>
<script type='text/javascript'>
//javascript for MSIE 10 detection and css fix to jQuery 2 slider
//get browser info
var useragent = navigator.userAgent;
//expression for finding MSIE
var matchIE = /MSIE\s([\d]+)/;
//grab matched MSIE
var version = useragent.match(matchIE);
if(version != null){ // only do this if there is MSIE version, and not null.
var version_number = version.slice(version.indexOf(".")); // splice MSIE10.10, we only want the value 10.
if(version_number > 9){
//if IE is more than 9 we do this css.
jQuery(document).ready(function(){
jQuery('.content_full_width').css('padding-top','50px'); //add padding 50px
});
}
}
</script>
<?php endif;

....and replace the above code with this:

//For jQuery 2 template!
if(is_page_template('template-homepage-jquery-2.php')):
?>
<script type='text/javascript'>

function getInternetExplorerVersion()
{
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
else if (navigator.appName == 'Netscape')
{
var ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}

//javascript for MSIE detection and css fix to jQuery 2 slider
//get browser info
var version_number = getInternetExplorerVersion();

if(version_number > 9){
//if IE is more than 9 we do this css.
jQuery(document).ready(function(){
jQuery('.content_full_width').css('padding-top','150px'); //add padding 150px
});
}

</script>
<?php endif;
The "150px" near the bottom of the above code may need to be adjusted depending on the amount of content within your Page.

For Karma HTML Template:

Simply add the following code to the before the closing head Tag:

<script type='text/javascript'>

function getInternetExplorerVersion()
{
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
else if (navigator.appName == 'Netscape')
{
var ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}

//javascript for MSIE detection and css fix to jQuery 2 slider
//get browser info
var version_number = getInternetExplorerVersion();

if(version_number > 9){
//if IE is more than 9 we do this css.
jQuery(document).ready(function(){
jQuery('.content_full_width').css('padding-top','150px'); //add padding 150px
jQuery('.home-holder').css('padding-top','150px');//add padding 150px
});
}

</script>
The "150px" near the bottom of the above code may need to be adjusted depending on the amount of content within your Page.