0

So on the project I am on, I wanted the parent items of my navigation to be clickable, along with the dropdown appearing on :hover.

I found this jquery script and it worked great for that:

<script>
jQuery(function($) {
    if($(window).width()>992){
        $('.navbar .dropdown').hover(function() {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

        }, function() {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

        });

        $('.navbar .dropdown > a').click(function(){
            location.href = this.href;
        });

    }
});
</script>

However two problems arose with this:

  1. When the viewport is greater than 992px and I resize the browser <992px the hover effect retains even though I would like the dropdown to appear when active at less than 992px. Is there a way to detect the resizing of the viewport to fix this?
  2. When the viewport is less than 992px the parent items no longer work. Is there a way to possibly make the parent item clickable on a double click? I'd like it this way because people on mobile/tablet can tap once for dropdown and twice for the parent item.

This is my first stackoverflow posting and I would really appreciate any help anyone has to offer. Thank you.

kaitlinj
  • 3
  • 2

1 Answers1

1

When the viewport is greater than 992px and I resize the browser <992px the hover effect retains even though I would like the dropdown to appear when active at less than 992px. Is there a way to detect the resizing of the viewport to fix this?

Ans - Use $(window).resize event to capture browser resize

Ex: 

$(window).on('resize',function(){
     if($(this).width()>992){
          //do relative stuffs here
     }
     else{
          //do relative stuffs here
     }
});

When the viewport is less than 992px the parent items no longer work. Is there a way to possibly make the parent item clickable on a double click? I'd like it this way because people on mobile/tablet can tap once for dropdown and twice for the parent item.

Ans - Capture doubleclick using dblclick event handler of jquery

Ex:

$('yourelementidorclass').dblclick(function(){
    //Do necessary stuffs here
});
Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200
  • Thanks for the quick reply! However I'm not really savvy with Jquery :( Do you mind if I ask how I could implement this? Thank you – kaitlinj Aug 18 '15 at 04:11
  • Well I can give you a clear picture if you try to create a demo of your problem in **[jsfiddle](https://jsfiddle.net/)** – Guruprasad J Rao Aug 18 '15 at 04:13
  • https://jsfiddle.net/kaitlinj/72snk79f/2/ does this help? sorry this if this doesnt this is my first time using jsfiddle – kaitlinj Aug 18 '15 at 05:32
  • thanks! this works for me :) however on mobile (tested with iphone6) does not work. would this solution work for me? http://stackoverflow.com/questions/27560653/jquery-on-double-click-events-mobile – kaitlinj Aug 21 '15 at 03:52
  • Yes! `iPhone` you need to be more careful on attaching events as some are different for `iPhone` like instead of `click` you may have to write `touch` event.. – Guruprasad J Rao Aug 21 '15 at 03:55