Question

I have been playing with WordPress and jQuery – both new to me. The blog I am working on has a fixed header at the top of the page with two buttons, each of which slides down a panel over the blog content using jQuery.

The problem is that on the iPad nothing happens when the buttons are clicked – apart from, for some reason, it loads the infinite scroll. I have heard that IOS doesn’t like position:fixed but I don’t understand what impact this could have on the buttons/sliding content. Any info/tips would be greatly received.

*Edit: It would seem .click won’t work(?) on the iPad and I need to somehow swap it for a touch event.

CSS

> .about, .contact {
>     background: none repeat scroll 0 0 #000000;
>     display: none;
>     height: 500px;
>     position: fixed;
>     top: 90px;
>     width: 100%;
>     z-index: 100; }

jQuery

 $('.about_btn').click(function(e) {
    if($(this).hasClass('open')) {
        $('.about').slideToggle('slow');
        $('.about_btn').removeClass('open');
        return false;
    } else {
        $('.about').slideToggle('slow');
        $('.contact').hide();
        $('.about_btn').addClass('open');
        $('.contact_btn').removeClass('open');
    }
});

 $('.contact_btn').click(function(e) {
    if($(this).hasClass('open')) {
        $('.contact').slideToggle('slow');
        $('.contact_btn').removeClass('open');
        return false;
    } else {
        $('.contact').slideToggle('slow');
        $('.about').hide();
        $('.contact_btn').addClass('open');
        $('.about_btn').removeClass('open');
    }
});

$('.close').click(function(e) {
    e.preventDefault();
        $('.about').slideUp('slow');
        $('.contact').slideUp('slow');
        $('.about_btn').removeClass('open');
        $('.contact_btn').removeClass('open');
});

Answer 1

I’v had problems with jQuerys “click” event on iOS a few times.

The solution that has worked for me has been adding this css to the clickable element…

pointer: cursor;