WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 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 7 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 Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

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

  4. Tasha
    Member
    Posted 7 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 Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 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 7 months ago #

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

  7. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    Yes, thanks for picking that up.

  8. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 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 7 months ago #

    ok done

  10. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 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 7 months ago #

    ok done

  12. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 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 7 months ago #

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

  14. Tasha
    Member
    Posted 7 months ago #

    it should be there now

  15. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 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 7 months ago #

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

  17. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 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 7 months ago #

    ok done

  19. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 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 7 months ago #

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

  21. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 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 7 months ago #

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

  23. Tasha
    Member
    Posted 7 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 Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 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 7 months ago #

    Thanks again Andrew!!!

  26. ElectricFeet
    Member
    Posted 7 months ago #

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

  27. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 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 7 months ago #

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

  29. Tasha
    Member
    Posted 6 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