tech @ Beacon Deacon

Nivo Slider issue induced by Superfish

James "Jamie" Johnson

Just 9 days after implementing the above Superfish menu, I found issues in another implementation. This site is still using the original implementation, which does work successfully standalone. However, when using the Superfish menu with Nivo Slider, there are issues, especially on iOS. Say it ain't so! Yes, it's true. While iPhone emulators failed to show the issue, both the iPhone 4S and iPhone 5 clearly had issues.

The first problem was that Nivo Slider slides were not loading on iOS. When I disabled superfish.js, they loaded, but my auto-resizing of menu items failed. Ironically, the menu still functioned well thanks to hoverIntent.js.

The good news: there is a solution:

  1. Disable superfish.js by removing this code:
    <script type="text/javascript" language="javascript" src="superfish.js"></script>
  2. Disable the call to the superfish() function and use $(window).load() instead of $(document).ready() in your internal jQuery script.

    <script type="text/javascript" language="javascript">
    /*  by James Arthur Johnson.  This script automatically sets the menu item widths */
    var numli;
    var hnavliwidth;
    $(window).load(function(){
         numli=$('.sf-menu > li').length;
         hnavliwidth = 960/numli;
         $('.sf-menu li').css("width",hnavliwidth+"px");
         $('.sf-menu ul').css("width",hnavliwidth+"px");
    //jQuery('ul.sf-menu').superfish();
    });
    </script>


    NOTE: You do not have to use the $(window).load() function for the IE conditional jQuery scripts.