Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Gonzalo Blasco
Gonzalo Blasco
11,927 Points

jQuery - CSS - Touch Screen

Hi everybody. I have a little issue at work, and I've been asked to make all clickable places to show a particular CSS class whenever it's touch for a while (using setTimeOut, I guess).

I've been looking around but no useful info everywhere I look.

I guess I should use jQuery touch functions to detect where the screen has been press and apply the class in it parent element. It should work on both, Android and iOS.

Can anybody help me? I'm desperate. I'm supposed to finish this issue between today and tomorrow.

Thanks.

2 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points

You should be able to use a normal click function on any button or div that you want to be clicked(touched) on a mobile platform. If you want there are also touch events. check out touch events here: MDN what is it that you want to do?

Gonzalo Blasco
Gonzalo Blasco
11,927 Points

I would like to show a grey background under the pressed item. For example, to show a grey background whenever you press the logo (svg) or a menu option (li).

Jacob Mishkin
Jacob Mishkin
23,118 Points

which do you want to use an logo or menu? What do you mean by under? are we talking z-index, or further down the page?

I would choose either a menu or a logo, then create a click event for that div, and in the JS show the div if you are using Jquery you can use the .show() or .fadeIn() methods. Its up to you, then attached the class to that method and you should be good to go. If you want please post the code you write so we can look at it. Since this is a class project outside of Treehouse, and is graded, I'm not a huge fan of just giving answers, but I will be happy to work with you though the process.

Gonzalo Blasco
Gonzalo Blasco
11,927 Points

Jacob. What I mean is behind, below. I need the logo (with an alpha channel) to have a grey background (like a hover state) whenever you press on it. The same with a link in a list item, where the hole list item should change background.

I have something like this made yesterday.

$('body').on('click', function(e) {
    e.preventDefault();
    if(e.target.nodeName === 'A') {
        $(e.target).css('background-color', '#ccc');
    }
});

This is just a test and work, in some cases. The problem I had with it is that not everyplace is directly an anchor. When you press on a list item with a anchor it works, but if a strong or an image exist in the anchor no effect is shown.

Gonzalo Blasco
Gonzalo Blasco
11,927 Points

Update:

$(document).off('touchtap.touchToActive').on('touchtap.touchToActive', "a, input[type=submit], input[type=reset], button", function(){
    var $self = $(this);
    $self.addClass("tapped");

    setTimeout(function() {
        $self.removeClass("tapped");
    }, 200);
});

Now I think I'm going somewhere.

Jacob Mishkin
Jacob Mishkin
23,118 Points

So all you want is a click event that will show a gray div if an item is pressed? if so all you need to do is create a click event then inside that function, either change the css using the css() or you can use the addClass() method as well. I don't think you really need to use the off, or on methods, unless you want to stop and start the click event.

Gonzalo Blasco
Gonzalo Blasco
11,927 Points

Thanks, Jacob. I've already close the Ticket. Let cross my fingers.

Lindsay Sauer
Lindsay Sauer
12,029 Points
Lindsay Sauer
Lindsay Sauer
12,029 Points

Are you looking for something like:

 $(ele).on('click', function() {

     var duration = 1000;  // Wait a second before adding/removing class
     setTimeout(function() {
            // Remove class from currently selected element's parent
            $('.classThatAddsGreyBackground').removeClass('classThatAddsGreyBackground'); 

            // Add class to the newly selected element's parent
            $(this).parent().addClass('classThatAddsGreyBackground');
     }, duration);

 });

Or are you trying to get the class to disappear when you release the press?

Gonzalo Blasco
Gonzalo Blasco
11,927 Points

Really cool code. I'm going something like it:

$(document).off('touchtap.touchToActive').on('touchtap.touchToActive', "a, input[type=submit], input[type=reset], button", function(){
    var $self = $(this);
    $self.addClass("tapped");

    setTimeout(function() {
        $self.removeClass("tapped");
    }, 200);
});

Thanks, it really helps.