1

I have a menu with two categories: weather and snow. A visible icon and hidden popup menu. After hovering or clicking on the icon from the first div, it shows the second div popup. Hovering reacts on desktop devices, and click it's on mobile devices.

Here's a part of my jQuery code:

    if ($(window).width() > 1025) {
        $('.weather').hover(function(){
            $('.weather-popup').addClass('side-open');
        },function(){
            $('.weather-popup').removeClass('side-open');
        });         

        $('.snow').hover(function(){
            $('.snow-popup').addClass('side-open');
        },function(){
            $('.snow-popup').removeClass('side-open');
        }); 
    }


    if ($(window).width() < 1025) {         
        $('.weather').click(function(){
            $('.weather-popup').toggleClass('side-open');
        }); 
        $('.snow').click(function(){
            $('.snow-popup').toggleClass('side-open');
        });         
    }

The first part acts on desktop devices and it's working great, but I have issue with the second part - the mobile devices.

With iPad when I touch the weather icon, it shows the popup part and after touching again on the weather icon, the popup part hides. That's OK, BUT if I touch the weather icon and after that touching on the second menu icon, in this case "Snow", it shows the snow popup and the popup part from the weather div remains open.

I want the first category to be automatically hidden when I touch the second one.

Also when touching on empty space, div is supposed to hide automatically.

Please, how can I achieve this?

user2519032
  • 819
  • 1
  • 18
  • 34

2 Answers2

1

I want the first category to be automatically hidden when I touch the second one.

You can manage that by checking if the other popup has the side-open class.

$('.weather').click(function(){
    if ($('.snow-popup').hasClass('side-open')){
        $('.snow-popup').removeClass('side-open');
    }
    $('.weather-popup').toggleClass('side-open');
}); 
$('.snow').click(function(){
    if ($('.weather-popup').hasClass('side-open')){
        $('.weather-popup').removeClass('side-open');
    }
    $('.snow-popup').toggleClass('side-open');
});

Also when touching on empty space, div is supposed to hide automatically.

You can achieve that by setting a click listener to the entire document, removing the side-open class anywhere it is used (this hides the dialog in your case right?), and use e.stopPropagation(); to stop the click from propagating to the html level such that you can open your dialogs.

$('html').click(function() {
    $('.side-open').removeClass('side-open');
});

$('.weather').click(function(e){
    if ($('.snow-popup').hasClass('side-open')){
        $('.snow-popup').removeClass('side-open');
    }
    $('.weather-popup').toggleClass('side-open');
    e.stopPropagation();
}); 
$('.snow').click(function(e){
    if ($('.weather-popup').hasClass('side-open')){
        $('.weather-popup').removeClass('side-open');
    }
    $('.snow-popup').toggleClass('side-open');
    e.stopPropagation();
});
Niki van Stein
  • 10,564
  • 3
  • 29
  • 62
  • Bas, thank you for your answer. It's working fine for the first part (to be automatically hidden when I touch the second one.), but the second part is not working, the problem comes from this:$('html').click(function() { $('.side-open').removeClass('side-open'); });. I've tried to change .side-open with the .weather-popup, or #side-dock (the container of these elements), but it still doesn't work. +1 from me for the first solution. – user2519032 Nov 23 '15 at 18:12
  • What does not work? Perhaps your element takes the whole page or not? See this fiddle http://jsfiddle.net/ub8c6smh/8/ to see how it works for me (click the green boxes) – Niki van Stein Nov 23 '15 at 18:16
  • And if you put it on the document? `$(document).click` – Niki van Stein Nov 23 '15 at 18:38
  • I've just tried with that too, but it's the same issue. You can check it. I may have some conflicting scripts... – user2519032 Nov 23 '15 at 18:40
  • Yes, but resize the screen under 1025px, refresh the page and try to click on the elements and you'll see the problem. – user2519032 Nov 23 '15 at 18:44
  • I've just tried again and on click I'm getting error on console: ReferenceError: e is not defined e.stopPropagation(); It conflicts with $(html).click().... – user2519032 Nov 23 '15 at 18:46
  • I've re-checked again everything, now that error is gone. The second part is still not working, but maybe because of some other script that cause some conflict. Thank you very much and I'm checking your answer, because jsfiddle works great too. :) – user2519032 Nov 24 '15 at 09:06
  • @user2519032 ok! Good luck, hope you find out soon to make it work on your website. – Niki van Stein Nov 24 '15 at 16:11
0
$('html').click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

This is a good approach. If the user clicks on the window, hide the menu. Cancel that if the user clicked on your menu area. That should work for your snow/weather windows on mobile. Heres a link: How to detect a click outside an element? .

Community
  • 1
  • 1
Ishiffman120
  • 313
  • 1
  • 14