Jquery click events don't work on iPhone how do I fix?

 

This is my jquery code for the whole site how do I make it work on an iphone/tablet?

 

$(document).ready(function(){

$('.logo').hide();

$('.logo').fadeIn(400);

$('.home-block').hide();

$('.work-block').hide();

$('.home-block').delay(200).fadeIn(400);

$('#work1').delay(200).fadeIn(400);

$('#work2').delay(400).fadeIn(400);

$('#work3').delay(600).fadeIn(400);

$('#work4').delay(800).fadeIn(400);

$('#work5').delay(1000).fadeIn(400);

$('#work6').delay(1200).fadeIn(400);

$(".right").animate({ scrollTop: 0 }, "slow");

//menu buttons

$('#menu-1').click(function(){

$(".right").animate({ scrollTop: 0 }, "slow");

$('#menu-1').addClass('hovered').fadeIn(400);

$('#menu-2').removeClass('hovered');

$('#menu-3').removeClass('hovered');

$('#menu-4').removeClass('hovered');

$('#menu-5').removeClass('hovered');

//footer

$('.footer-ribbon li#menu-1').addClass('footer-hovered').fadeIn(400);

$('.footer-ribbon li#menu-2').removeClass('footer-hovered');

$('.footer-ribbon li#menu-3').removeClass('footer-hovered');

$('.footer-ribbon li#menu-4').removeClass('footer-hovered');

$('.footer-ribbon li#menu-5').removeClass('footer-hovered');

});

$('#menu-2').click(function(){

$(".right").animate({ scrollTop: 350 }, "slow");

$('#menu-2').addClass('hovered').fadeIn(400);

$('#menu-1').removeClass('hovered');

$('#menu-3').removeClass('hovered');

$('#menu-4').removeClass('hovered');

$('#menu-5').removeClass('hovered');

//footer

$('.footer-ribbon li#menu-2').addClass('footer-hovered').fadeIn(400);

$('.footer-ribbon li#menu-1').removeClass('footer-hovered');

$('.footer-ribbon li#menu-3').removeClass('footer-hovered');

$('.footer-ribbon li#menu-4').removeClass('footer-hovered');

$('.footer-ribbon li#menu-5').removeClass('footer-hovered');

});

$('#menu-3').click(function(){

$(".right").animate({ scrollTop: 750 }, "slow");

$('#menu-3').addClass('hovered').fadeIn(400);

$('#menu-2').removeClass('hovered');

$('#menu-1').removeClass('hovered');

$('#menu-4').removeClass('hovered');

$('#menu-5').removeClass('hovered');

//f.ooter

$('.footer-ribbon li#menu-3').addClass('footer-hovered').fadeIn(400);

$('.footer-ribbon li#menu-2').removeClass('footer-hovered');

$('.footer-ribbon li#menu-1').removeClass('footer-hovered');

$('.footer-ribbon li#menu-4').removeClass('footer-hovered');

$('.footer-ribbon li#menu-5').removeClass('footer-hovered');

});

$('#menu-4').click(function(){

$(".right").animate({ scrollTop: 1600 }, "slow");

$('#menu-4').addClass('hovered').fadeIn(400);

$('#menu-2').removeClass('hovered');

$('#menu-3').removeClass('hovered');

$('#menu-1').removeClass('hovered');

$('#menu-5').removeClass('hovered');

//footer

$('.footer-ribbon li#menu-4').addClass('footer-hovered').fadeIn(400);

$('.footer-ribbon li#menu-2').removeClass('footer-hovered');

$('.footer-ribbon li#menu-3').removeClass('footer-hovered');

$('.footer-ribbon li#menu-1').removeClass('footer-hovered');

$('.footer-ribbon li#menu-5').removeClass('footer-hovered');

});

$('#menu-5').click(function(){

$(".right").animate({ scrollTop: 2300 }, "slow");

$('#menu-5').addClass('hovered').fadeIn(400);

$('#menu-2').removeClass('hovered');

$('#menu-3').removeClass('hovered');

$('#menu-4').removeClass('hovered');

$('#menu-1').removeClass('hovered');

//footer

$('.footer-ribbon li#menu-5').addClass('footer-hovered').fadeIn(400);

$('.footer-ribbon li#menu-2').removeClass('footer-hovered');

$('.footer-ribbon li#menu-3').removeClass('footer-hovered');

$('.footer-ribbon li#menu-4').removeClass('footer-hovered');

$('.footer-ribbon li#menu-1').removeClass('footer-hovered');

});

});

A lot of this code looks like it does the same thing, you could probably use a more generic selector, class or ID to improve performance.

 

I'm not 100% sure what this code is doing though, If your saying the hover effects don't work on an iPhone, that's because hover isn't supported (see here http://www.webdesignerforum.co.uk/topic/69127-is-jquery-wasted-on-mobiles/).

The code basically clears all the over ids with the hovered class and then assigns it to the id that has been selected and I did a little bit of research and it said something like touchstart function. it said that I had to assign the click event with the touchstart then use something called bind but that just went over my head a little

Do you have a live example? I'm still not really getting it.

Jack beat me to it ^

Edited June 25, 201313 yr by mteam

http://matthewclaffey.com/updatesite/index.php its the jquery for the buttons to the left and footer

I'm looking at it on an iPhone 5 Matthew and it looks OK. The click events are working just as they do when I view it on my desktop...

I'm looking at it on an iPhone 5 Matthew and it looks OK. The click events are working just as they do when I view it on my desktop...

 

I checked it on my dads tablet but it didn't work wheres on the desktop it did. But never mind Im just trying to make a few designs to show potential clients what type of layouts I could do. thanks for checking

I've re-done some of the jquery (I'm not the greatest at this)

  function goToByScroll(id){
          // Remove "links" from the ID
        id = id.replace("links", "");
          // Scroll
        $('html body').animate({
            scrollTop: $("#"+id).offset().top},
            'slow');
    }

    $("#sidebar > ul > li > a").click(function(e) { 
          // Prevent a page reload when a link is pressed
        e.preventDefault();
          // get clicked name attribute		
		var currentElement = $(this).attr("name");	
          // Call the scroll function
        goToByScroll($(this).attr("id"));
          // remove hovered class 
        $("li a,.footer-ribbon li").removeClass("hovered");
         // Add hovered class to the clicked one 
        $(this).addClass("hovered"); 
		 // Add hovered class to footer li with matching name attr
         $('.footer-ribbon li[name = "' + currentElement + '"]').addClass('hovered');  
    });

As you seemed to have a lot of lines to do the same thing (changed a few bits of html to get working shouldn't really use the same id more than once)

 

can be seen working here Matty.html if you want to see the changes I'll take down once you've checked it