Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
In your “ie.js” file can you replace all of the code with this:
jQuery(document).ready(function(){
setIEClass(10, jQuery);
});
function setIEClass($version, jQuery) {
$=jQuery;
if ($.browser.msie && $.browser.version == $version) {
$("html").addClass("ie10");
}
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Now try putting this in your Child Theme style.css file at the bottom:
.ie10 .home .thumb-wrapper {
width: 271px;
height: 252px;
margin-top: -2px;
}
Take away the CSS I previously recommended so that you don’t have this anymore:
.thumb-wrapper {
width: 271px;
height: 252px;
margin-top: -2px;
}
Thread Starter
Tasha
(@queenv)
Yeah!!! That works!!! I am sooooo grateful for all your help! I really really appreciate it!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Sorry about the botched code, I can understand how you must have felt when I was using your live site as a testing ground.
Thread Starter
Tasha
(@queenv)
Ha-ha – no I was just very happy to get help! You are a star!
Thread Starter
Tasha
(@queenv)
So to sum it up for future users:
Add the following to functions.php in your child theme:
function myCustomizrSetIEClass() {
wp_enqueue_script( ‘setIEClass’, get_stylesheet_directory_uri() . ‘/inc/js/ie.js’, ”, ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘myCustomizrSetIEClass’ );
Add the following to ie.js (in childtheme\inc\js
jQuery(document).ready(function(){
setIEClass(10, jQuery);
});
function setIEClass($version, jQuery) {
$=jQuery;
if ($.browser.msie && $.browser.version == $version) {
$(“html”).addClass(“ie10”);
}
}
Add the following to style.css
.ie10 .home .thumb-wrapper {
width: 271px;
height: 252px;
margin-top: -2px;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
To clarify the “myCustomizr” bits here:
function myCustomizrSetIEClass() {
wp_enqueue_script( 'setIEClass', get_stylesheet_directory_uri() . '/inc/js/ie.js', '', '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'myCustomizrSetIEClass' );
Were just using the name of the Child Theme, so that may be different for you. It’s nothing imperative, just best practice.
Phew. That was nearly as good as Breaking Bad! 🙂
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Also to make the “ie.js” file more flexible replace its code with this:
jQuery(document).ready(function(){
setIEClass(10, jQuery);
});
function setIEClass($version, jQuery) {
$=jQuery;
if ($.browser.msie && $.browser.version == $version) {
$("html").addClass("ie" + $version);
}
}
That means if you wanted to you could set a class for IE9 as well, or IE11 when that comes out.
Clearly the JavaScript could be cleaned up more and made more useful, but that should make for a start.
Thread Starter
Tasha
(@queenv)
Funny! I was watching Breaking Bad and Top Boy while we were doing this! Addictive shows 🙂
Thread Starter
Tasha
(@queenv)
@andrew Nevins @nikeo It looks like something I did broke this. I added images to the Eco-School page with the round hover effect with code from Nikeo. Could that have effected your code Andrew?
http://wordpress.org/support/topic/hover-effect-on-images-not-working-correctly?replies=3
Any idea what it could be?
Sorry!
