Click vs Touch, I'm confused

[Historical Forums User]

On desktop and iOS, the “x” button on this page works just fine.

However, the hamburger button on the same page in responsive mode (must view at viewport width less than 700px, and Chrome inspector in iPhone 6 Plus view is where I’m testing this in addition to my actual phone) in the upper left only triggers the attached js on click, not touch. If you just narrow your viewport to less than 700px on desktop, clicking works fine, but if you use Chrome inspector to emulate touch events, no luck. Any suggestions?

Here’s the HTML for the working “x” button:

    <div class="close"></div>

Here’s the class switcher for the working “x” button:

$(function() {
    $(".close").click(function() {
        $(".exp_content-change").toggleClass("exp_content-close");

    });
});

Here’s the HTML for the the hamburger that doesn’t work with touch:

<div id="bars" class="close-mobile"></div>  

Here’s my class switcher for the hamburger:

$(function() {
    $(".close-mobile").click(function() {
        $(".mobile_nav").toggleClass("mobile_nav-open");

    });
});

[Historical Forums User]

See the Pen wBZMPB by Aaron (@sistercylon) on CodePen.

<script async src=”//assets.codepen.io/assets/embed/ei.js”></script>

[Historical Forums User]

http://codepen.io/sistercylon/pen/wBZMPB

[Historical Forums User]

@Senff sorry! I’m fairly new at this, and I’m not sure exactly what you need or what will be helpful to you. I’ll see what I can do. I appreciate your help and advice.

[Historical Forums User]

OK, I’ve removed what I think is extraneous. Let me know if I can whittle it down more. If I cut out much more, elements start to disappear.

[Historical Forums User]

OK, I think I understand what you’re looking for. Not the whole damn page, but a simple, scaled down version of the problem with only that functionality. Sorry, working on that now.

[Historical Forums User]

Ok, I think I’ve probably set up some kind of conflicting transition with all the switching I’ve got going on. However, the problem I’ve created here is different from the problem that I’m actually having, which is that clicking the buttons works fine, but touching the upper left one doesn’t. I don’t know if this is useful, but I’ll keep working on it to see if I can replicate the problem.

http://codepen.io/sistercylon/pen/RNOrBz

[Historical Forums User]

@senff and @shaneisme thanks! this helped me determine that it doesn’t look like it’s actually a touch vs. click thing, I think it’s iOS Safari thing, which is weird because everything works like it’s supposed to in every other webkit browser at full width and less than 700px, which is the breakpoint I’m using for the mobile styles. I’m really at a loss. Still picking away at it though. I’ve included the two classes that control the position of the moving element. Do you see anything amiss?

.mobile_nav{
    height: 1200px;
    float: left;
    position: absolute;
    overflow: scroll;
    margin: 0 0 0 -200px;
    z-index: 30;
    transition: margin 2s ease;
    -webkit-transition: margin 2s ease;
    -moz-transition: margin 2s ease;
    -o-transition: margin 2s ease;

}

.mobile_nav-open{
    height: 1200px;
    float: left;
    position: absolute;
    overflow: scroll;
    margin: 0 0 0 0;
    transition: margin 2s ease;
    -webkit-transition: margin 2s ease;
    -moz-transition: margin 2s ease;
    -o-transition: margin 2s ease;
    position: absolute;
    z-index: 30;
}

[Historical Forums User]

Might it have something to do with my media query?

@media only screen 
and (min-width: 320px) 
and (max-width: 700px) 

[Historical Forums User]

OK, definitely something to do with positioning and/or z-index. I’m close.

[Historical Forums User]

OMG. I had somehow changed the element I was having trouble with to “fixed” positioning instead of “relative” for mobile styling. Wow. What an unnecessary, convoluted search I was on! Anyway, thanks for your help.

[Author]

Posts