1

I have try build multi dropdown on hover. But, sub dropdown menu is going out of browser screen. I want to reverse dropdown menu position when which is go out of browser screen.

enter image description here

Here, I have try to use following jQuery for add dynamic class when which dropdown go out of screen. But, It does not work properly. It does addClass in every dropdown menu instead of go off browser screen.

Should be apply only for Which are going out of the browser screen.

I want to reverse each Drop down Which are going out of the browser screen.

What could be wrong here?

$('#menu .dropdown-menu').each(function() {
    var menu = $('#menu').offset();
    var dropdown = $(this).parent().offset();
    var docW = $("#menu").width();

    var i = (dropdown.left + $(this).width()) > (docW);

    if (!i) {
        $(this).addClass('dropdown-reverse');
    } else {
        $(this).removeClass('dropdown-reverse');
    }
});

Demo: https://jsfiddle.net/gn3koo0w/1/

HDP
  • 4,005
  • 2
  • 36
  • 58
  • You should do the check after dropdown becomes visible, when you are checking `dropdown.left`, it's 0 for invisible dropdowns – Hikmat G. Jul 05 '18 at 07:42
  • https://bootsnipp.com/snippets/O5m6O – Lalji Tadhani Jul 05 '18 at 09:00
  • @LaljiTadhani please try to understand my query. I want not static solution. I want to reverse each Drop down Which are going out of the browser screen. – HDP Jul 05 '18 at 09:05

2 Answers2

1

I have find perfect solution form here - Detect if dropdown navigation would go off screen and reposition it

$(function () {
    $(".dropdown li").on('mouseenter mouseleave', function (e) {
        if ($('.dropdown-menu', this).length) {
            var elm = $('.dropdown-menu', this);
            var off = elm.offset();
            var l = off.left;
            var w = elm.width();
            var docW = $(window).width();

            var isEntirelyVisible = (l + w <= docW);

            if (!isEntirelyVisible) {
                $(elm).addClass('dropdown-reverse');
            } else {
                $(elm).removeClass('dropdown-reverse');
            }
        }
    });
});

Updated Demo: https://jsfiddle.net/gn3koo0w/166/

HDP
  • 4,005
  • 2
  • 36
  • 58
0

This may not be a proper solution, but it should get what you want. Replace your jquery code with this and try.

// dropdown menu on hover 
var $screensize = $(window).width();
$('.dropdown').on("mouseover", function() {

            $(this).find('> .dropdown-menu').stop(true, true).slideDown('fast');
            $(this).bind('mouseleave', function() {

                $(this).find('> .dropdown-menu').stop(true, true).css('display', 'none');
        });
});

function foo() {
$('.dropdown-menu').each(function() {
if ($(this).is(':visible')){
        var menu = $('#menu').offset();
        var dropdown = $(this).parent().offset();
        var docW = $("#menu").width();
        var i = (dropdown.left + $(this).width()) > (docW);
        if (i == true) {
            $(this).addClass('dropdown-reverse');
        } else {
            $(this).removeClass('dropdown-reverse');
        }
    }
    }); 
}
window.setInterval(foo, 100);

Hope this helps!

CodeThing
  • 2,580
  • 2
  • 12
  • 25
  • Thanks for your answer. but, this is not work properly. Here, does not work. when 3rd dropdown menu is going out of the screen. We have use mega menu. So, We want to proper solution. I want to reverse each Drop down Which are going out of the screen drop down. Thanks. – HDP Jul 05 '18 at 08:48