CODEWITHSUNDEEP
javascriptjquerycssdrop-down-menuresponsive-design
Julia Ropoulos
Julia Ropoulos

Reputation: 23

Disable click and enable double click on mobile

I have a menu dropdown:

<ul class="navbar">
  <li>
    <a href="">Link</a>
    <ul>
      <li>
        <a href="">Link 2</a>
        <ul>
          <li><a href="">Link 3</a></li>
          <li><a href="">Link 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

The problem is that on mobile, you cannot see submenu cause of when you click it redirects you instantly.

So I'd like trigger hover on tap and trigger to redirect on double tap on mobile devices.

I've tryed this:

if ($(window).width() < 768) {
  $(".navbar a").on('doubletap', function () {
    window.location = this.href;
    console.log('d');
  });
  $(".navbar a").on('click', function (e) {
    e.preventDefault();
  });
}

But now the preventDefault() function override the doubletap function.

I need some help, there is no topic that could help me

body {
  margin:0;
  padding:0;
}
.navbar, .navbar ul {
    background:#2D7D9A;
    list-style: none;
    height:50px;
    margin:0;padding:0;
    z-index:2;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.navbar li {
    height:50px;
    float:left;
    line-height:50px;
    padding:0 10px;
}
.navbar li ul {
    background:#0099BC;
    position:absolute;
    margin:0;
    padding:0;
    left:0;
    width:100%;
    display:none;
}
.navbar li ul li {
    display:inline;
}
.navbar li ul li ul {
    background:#038387;
    width:100%;
    /* left:5%; */
    top:45px;
}
.navbar li a {
    color:#bfffff;
    text-decoration:none;
}
.navbar li a:hover {
    color:white;
    text-shadow:1px 1px 10px #bfffff;
}
.navbar li:hover > ul {
    display:block;
}
.navbar li ul li:hover > ul {
    display:block;
}
<ul class="navbar">
  <li>
    <a href="">Link</a>
    <ul>
      <li>
        <a href="">Link 2</a>
        <ul>
          <li><a href="">Link 3</a></li>
          <li><a href="">Link 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 1

Views: 2352

Answers (3)

Videsh Chauhan
Videsh Chauhan

Reputation: 371

Actually you are using the wrong way. first of all, you have to call this function on click then you can check the device width. check it out my code. Hope this code work for you. Thank You.

$(document).ready(function(){

    $(".navbar a").click(function (e) {
        e.preventDefault();
        if ($(window).width() < 768) {
            $(this).dblclick(function (e) {
                window.location = this.href;
            });
        }
        else{
            window.location = this.href;
        }
    });
});

Upvotes: 1

Julia Ropoulos
Julia Ropoulos

Reputation: 23

This code works. Thanks everybody

if ($(window).width() < 768) {
  $(".navbar a").on('click', function (e) {
    e.preventDefault();
    $(this).on('click', function (e) {
      window.location = this.href;
    });
  });
}

Upvotes: 0

charan kumar
charan kumar

Reputation: 2157

You can try this combination of timedout

if ($(window).width() < 768) {
var DELAY = 700, clicks = 0, timer = null;
$(".navbar a").on("click", function(e){

        clicks++;  //count clicks

        if(clicks === 1) {
        e.preventDefault();

            timer = setTimeout(function() {

                alert("Single Click");  //perform single-click action    
                clicks = 0;             //after action performed, reset counter
								
            }, DELAY);

        } else {

            clearTimeout(timer);    //prevent single-click action
            alert("Double Click");  //perform double-click action
            clicks = 0;             //after action performed, reset counter
        }

    })
    .on("dblclick", function(e){
        window.location = this.href;
    });
}
body {
  margin:0;
  padding:0;
}
.navbar, .navbar ul {
    background:#2D7D9A;
    list-style: none;
    height:50px;
    margin:0;padding:0;
    z-index:2;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.navbar li {
    height:50px;
    float:left;
    line-height:50px;
    padding:0 10px;
}
.navbar li ul {
    background:#0099BC;
    position:absolute;
    margin:0;
    padding:0;
    left:0;
    width:100%;
    display:none;
}
.navbar li ul li {
    display:inline;
}
.navbar li ul li ul {
    background:#038387;
    width:100%;
    /* left:5%; */
    top:45px;
}
.navbar li a {
    color:#bfffff;
    text-decoration:none;
}
.navbar li a:hover {
    color:white;
    text-shadow:1px 1px 10px #bfffff;
}
.navbar li:hover > ul {
    display:block;
}
.navbar li ul li:hover > ul {
    display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar">
  <li>
    <a href="">Link</a>
    <ul>
      <li>
        <a href="">Link 2</a>
        <ul>
          <li><a href="">Link 3</a></li>
          <li><a href="">Link 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 1

Related Questions