Announcement

Collapse
No announcement yet.

Touch events with bootstrap

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Touch events with bootstrap

    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,
    http://www.alphabetsigns.com/

    #2
    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?
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      Re: Touch events with bootstrap

      Hi Matt, thank you for your reply.

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

      Code:
      $('.pr-snippet-link').on('click', function () {
          $('#myTab a:last').tab('show');
      });
      And also to bind behavior to a div such as a modal:

      Code:
      $('#main_image')on.('click', function () {
      
      ...behavior here 
      
      });
      I have tried attaching different events with jquery on method, example:

      Code:
      $('selector').on('click touch touchstart tap', function() {
      
      ... some behavior here ...
      
      });
      http://www.alphabetsigns.com/

      Comment


        #4
        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?
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          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.
          http://www.alphabetsigns.com/

          Comment


            #6
            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.
            Matt Zimmermann

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            Comment


              #7
              Re: Touch events with bootstrap

              Thanks Matt, I'll contact professional services.
              http://www.alphabetsigns.com/

              Comment


                #8
                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.

                Code:
                <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.
                http://www.alphabetsigns.com/

                Comment


                  #9
                  Re: Touch events with bootstrap

                  Well, if the div registered no height, then the touch actions could never be detected no?
                  Bruce Golub
                  Phosphor Media - "Your Success is our Business"

                  Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                  phosphormedia.com

                  Comment


                    #10
                    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.
                    Matt Zimmermann

                    Miva Web Developer
                    Alchemy Web Development
                    https://www.alchemywebdev.com
                    Site Development - Maintenance - Consultation

                    Miva Certified Developer
                    Miva Professional Developer

                    https://www.dev4web.net | Twitter

                    Comment


                      #11
                      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.
                      http://www.alphabetsigns.com/

                      Comment


                        #12
                        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. :)
                        Bruce Golub
                        Phosphor Media - "Your Success is our Business"

                        Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                        phosphormedia.com

                        Comment

                        Working...
                        X