WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Problem with featured image in IE (59 posts)

  1. Andrew
    Forum Moderator
    Posted 11 months ago #

    Add this to your Child Theme's functions.php file:

    function myCustomizrSetIEClass() {
     if ( is_home() ) {
      wp_enqueue_script( 'setIEClass', get_template_directory_uri() . '/inc/js/ie.js', '', '1.0', true );
     }
    }
    
    add_action( 'wp_enqueue_scripts', 'myCustomizrSetIEClass' );
  2. Tasha
    Member
    Posted 11 months ago #

    is that all that should be in the functions.php. Should I delete all the rest from the original functions.php?

  3. Andrew
    Forum Moderator
    Posted 11 months ago #

    Did you already have a functions.php file in your Child Theme? I thought you just created it.

  4. Tasha
    Member
    Posted 11 months ago #

    I did just create one but the only way I know how is to copy the original into the child theme. I'm a bit green :(

  5. Andrew
    Forum Moderator
    Posted 11 months ago #

    Delete all the code from your functions.php file in your Child Theme. Copying the parent theme's function.php file over can break your site.

    So, after you've wiped your functions.php clean of code then add this:

    function myCustomizrSetIEClass() {
     if ( is_home() ) {
      wp_enqueue_script( 'setIEClass', get_template_directory_uri() . '/inc/js/ie.js', '', '1.0', true );
     }
    }
    
    add_action( 'wp_enqueue_scripts', 'myCustomizrSetIEClass' );
  6. Tasha
    Member
    Posted 11 months ago #

    ok I've done that. I left the <?php at the top in?

  7. Andrew
    Forum Moderator
    Posted 11 months ago #

    Yes, thanks for picking that up.

  8. Andrew
    Forum Moderator
    Posted 11 months ago #

    Can you replace that code I recommended above with this:

    function myCustomizrSetIEClass() {
     if ( is_front_page() ) {
      wp_enqueue_script( 'setIEClass', get_template_directory_uri() . '/inc/js/ie.js', '', '1.0', true );
     }
    }
    
    add_action( 'wp_enqueue_scripts', 'myCustomizrSetIEClass' );
  9. Tasha
    Member
    Posted 11 months ago #

    ok done

  10. Andrew
    Forum Moderator
    Posted 11 months ago #

    Can you try this instead:

    function myCustomizrSetIEClass() {
      wp_enqueue_script( 'setIEClass', get_template_directory_uri() . '/inc/js/ie.js', '', '1.0', true );
    }
    
    add_action( 'wp_enqueue_scripts', 'myCustomizrSetIEClass' );
  11. Tasha
    Member
    Posted 11 months ago #

    ok done

  12. Andrew
    Forum Moderator
    Posted 11 months ago #

    I can't find your "ie.js" file at:
    http://www.granthamfarm.angelicdesign.co.uk/wp-content/themes/myCustomizr/inc/js/ie.js

    Can you make sure that your "ie.js" file resides at that address?

  13. Tasha
    Member
    Posted 11 months ago #

    oh, I was working locally. I'll upload it to the live site

  14. Tasha
    Member
    Posted 11 months ago #

    it should be there now

  15. Andrew
    Forum Moderator
    Posted 11 months ago #

    Ok, thanks :)

    I made another mistake.

    Can you try this code in your functions.php file instead:

    function myCustomizrSetIEClass() {
      wp_enqueue_script( 'setIEClass', get_stylesheet_directory_uri() . '/inc/js/ie.js', '', '1.0', true );
    }
    
    add_action( 'wp_enqueue_scripts', 'myCustomizrSetIEClass' );
  16. Tasha
    Member
    Posted 11 months ago #

    Sorry about the misunderstanding! I made the change and uploaded it to the live site.

  17. Andrew
    Forum Moderator
    Posted 11 months ago #

    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");
     }
    }
  18. Tasha
    Member
    Posted 11 months ago #

    ok done

  19. Andrew
    Forum Moderator
    Posted 11 months ago #

    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;
    }
  20. Tasha
    Member
    Posted 11 months ago #

    Yeah!!! That works!!! I am sooooo grateful for all your help! I really really appreciate it!

  21. Andrew
    Forum Moderator
    Posted 11 months ago #

    Sorry about the botched code, I can understand how you must have felt when I was using your live site as a testing ground.

  22. Tasha
    Member
    Posted 11 months ago #

    Ha-ha - no I was just very happy to get help! You are a star!

  23. Tasha
    Member
    Posted 11 months ago #

    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;
    }

  24. Andrew
    Forum Moderator
    Posted 11 months ago #

    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.

  25. Tasha
    Member
    Posted 11 months ago #

    Thanks again Andrew!!!

  26. ElectricFeet
    Member
    Posted 11 months ago #

    Phew. That was nearly as good as Breaking Bad! :-)

  27. Andrew
    Forum Moderator
    Posted 11 months ago #

    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.

  28. Tasha
    Member
    Posted 11 months ago #

    Funny! I was watching Breaking Bad and Top Boy while we were doing this! Addictive shows :)

  29. Tasha
    Member
    Posted 11 months ago #

    @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!

Reply

You must log in to post.

About this Theme

About this Topic