Question

I currently am using a script that executes a fade effect when mousing over icons (It fades them from color to black and white). I’m having issues with it not working properly on an iPad or iPhone because of the hover event.

Is there any way to wrap the following in a conditional that will exclude an iPad, iPhone and possibly even a droid device from running it?

    <script>
            $(document).ready(function() {
            $("ul.gallery li").hover(function() { //On hover...
            $(this).siblings().each(function () {
                var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
                    //Set a background image(thumbOver) on the &lt;a&gt; tag
                $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
                    //Fade the image to 0
                    $(this).find("span").stop(false,false).fadeTo('normal', 0 , function() {
                    $(this).hide() //Hide the image after fade
                        });
                });
            } ,
            function() { //on hover out...
                $(this).siblings().each(function () {
                        //Fade the image to 1
                    $(this).find("span").stop(false,false).fadeTo('normal', 1).show();
                    });
                    });
            });
    </script>

Thank You

Answer 1

you can check for ‘iPad’ using navigator.platform:

// Is the user on an iPad?
var isIpad = navigator.platform.toLowerCase() === "ipad";

similarly, you can check for other iDevices using an object literal and the in operator:

// Is the user on an iDevice?
var isIDevice = navigator.platform.toLowerCase() in {
    "ipod": true,
    "ipad": true,
    "iphone": true
};

to keep your code from running under these conditions, you can keep your setup logic above in a named function and execute it conditionally on DOM-ready, such as:

<script type="text/javascript">
(function() {

    // Setup routine
    var ready = function() {
        $("ul.gallery li").hover(function() { //On hover...
            $(this).siblings().each(function () {
                var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
                //Set a background image(thumbOver) on the &lt;a&gt; tag
                $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
                //Fade the image to 0
                $(this).find("span").stop(false,false).fadeTo('normal', 0 , function() {
                    $(this).hide() //Hide the image after fade
                });
            });
        },
        function() { //on hover out...
            $(this).siblings().each(function () {
                //Fade the image to 1
                $(this).find("span").stop(false,false).fadeTo('normal', 1).show();
            });
        });
    };

    // Current platform
    var platform = navigator.platform.toLowerCase();

    // List of iDevice platforms
    var iDevices = {
        "ipod": true,
        "ipad": true,
        "iphone": true
    };

    /*
    // OPTION 1:
    // On DOM-ready, execute for everthing except iPad
    $(function() {
        if ( platform !== "ipad" ) {
            ready();
        }
    });
    */

    // OPTION 2
    // Only execute if not an iDevice
    $(function() {
        if ( !(platform in iDevices) ) {
            ready();
            $(window).resize(function () {
                viewportSize();
            });
        }
    });

})();

to be honest, i’ve never done android detection, but there should be a similar method.

hope that helps! cheers.