Touch events with bootstrap

[alphabet]

How do I bind touch events to elements in bootstrap? The events are already bound to buttons and links but I want to bind them to divs.

I've tried using jquery on method and tried jquery.mobile library but can't get them to work.

Does anyone have a working example?

TIA,

[Matt Zimmermann]

Re: Touch events with bootstrap

Are you trying to treat a DIV like a link? Can you elaborate on what you are trying to accomplish?

[alphabet]

Re: Touch events with bootstrap

Hi Matt, thank you for your reply.

Yes I am trying to treat a div like a link.

$('.pr-snippet-link').on('click', function () {
    $('#myTab a:last').tab('show');
});

And also to bind behavior to a div such as a modal:

$('#main_image')on.('click', function () {

...behavior here 

});

I have tried attaching different events with jquery on method, example:

$('selector').on('click touch touchstart tap', function() {

... some behavior here ...

});

[Matt Zimmermann]

Re: Touch events with bootstrap

That coding looks correct, I cannot see a reason why it might not fire. Are you receiving any javascript error messages in your console?

[alphabet]

Re: Touch events with bootstrap

There are no console errors and the behavior works correctly on desktop.

I have seen another Miva bootstrap site where this functionality works correctly on tablet so I think it is something in my code.

[Matt Zimmermann]

Re: Touch events with bootstrap

Since the code seems to be working fine on the desktop and since click events are interpreted as touch event by nearly all touch-enabled devices, I'm not really sure I can offer up any more assistance without delving into the code. If you would like assistance with the code, I would recommend contacting professional services at [email protected]. One of the developers there can looking into what is going on.

[alphabet]

Re: Touch events with bootstrap

Thanks Matt, I'll contact professional services.

[alphabet]

Re: Touch events with bootstrap

I found a solution but I don't know why it works.

I had two division col-xs classes within a container div. The col-xs floated left and therefore the container div had no height. I noticed the col-xs divs would visually pop out of the container when collapsed.

I gave the col-xs height and added a clearing div below the last floated div within the container which thus gave the container height.

<div class="container">
<div class="col-xs-6">... bound touch element ...</div>
<div class="col-xs-6">... bound touch element ...</div>
<div class="clearfix"></div>
</div>

The container and the tap events now work. Not sure why, but it works.

[Bruce - PhosphorMedia]

Re: Touch events with bootstrap

Well, if the div registered no height, then the touch actions could never be detected no?

[Matt Zimmermann]

Re: Touch events with bootstrap

@alphabet - With that being the case in your layout, you should be able to remove the assigned height for 'container' as well as removing the clearing DIV and just add the 'clearfix' class to the class list for the container.

@Bruce - You are correct.

[alphabet]

Re: Touch events with bootstrap

Thank you both.

I'm thinking this may be a propagation error.

I thought the jquery .on method would attach an event listener to the element and process the function when fired whether visible or not.

But once the event propagated to its container element that had no height there must had been an error.

It would be interesting to add an e.stopPropagation(); to the function.

[Bruce - PhosphorMedia]

Re: Touch events with bootstrap

If you are referring to the difference between Visibility:hidden and Display:none...you are correct. However, your element had visibility, but is size was 1px or maybe even less cause nothing inside the div promoted a height. So, it was clickable, but only for sub-atomic particle browsers. :)