how do I make my submenu position dynamic based on the distance to the edge of the window?

Question

I'm trying to write a jQuery script that will find the distance to the right edge of the browser window from my css class element and then position the child submenu dropdowns to the right or left depending on the available space to the right. Also it needs to revert to the default settings on hoverout. Here is what I have so far but it's not calculating properly.

    $(document).ready(function(){
$('#dnnMenu .subLevel').hover(function(){

    if ($(window).width() - $('#dnnMenu .subLevel').offset().left - '540' >= '270')
    {
        $('#dnnMenu .subLevelRight').css('left', '270px');}

    else {$('#dnnMenu .subLevelRight').css('left', '-270px');}
});

    $(document).ready(function () {
function HoverOver() {
    $(this).addClass('hover');
}
function HoverOut() {
    $(this).removeClass('hover');
}
var config = {
    sensitivity: 2,
    interval: 100,
    over: HoverOver,
    timeout: 100,
    out: HoverOut
};
$("#dnnMenu .topLevel > li.haschild").hoverIntent(config);

$(".subLevel li.haschild").hover(HoverOver, HoverOut);

    });

Basically I tried to take the width of the current window, minus the distance to the left edge of the browser of the first level submenu, minus the width of both elements together which would equal 540px, to calculate the distance to the right edge of the window when the first level submenu is hovered over. if the distance to the right of my first level submenu element is less than 540px then the second level sub menu css property is changed to position to the left instead of right. I also know that it needs to revert back to default after hover out so it can recalculate the distance from other positions within the menu structure and still have those second level submenus with enough room to still display on the right of the first level. here is css for the elements in question.

    #dnnMenu .subLevel{
      display: none;
      position: absolute;
      margin: 0;
      z-index: 1210;
      background: #639ec8;
      text-transform: none;}

    #dnnMenu .subLevelRight{
      position: absolute;
      display: none;
      left: 270px;
      top: 0px;}

The site's not live yet and I tried to create a jsfiddle but it doesn't look right. Any help would be greatly appreciated!

Best Regards, Mario

I sugeest you learn more about css hierachy and position attribute on W3C. There's a lot of things that can avoid you from this works, and there's a lot of sites with a great help about this. I don't think you'll find an exact answer. Maybe you need access to Code Review stack exchange site — Leandro Bardelli, Aug 24 '12 at 20:05
well what I didn't know about .offset().left is that it measures the parent element which didn't help me. I was able to get this working by creating 2px high transparent div ids for each menu item. since you have to cross over them to get to the submenu it was able to calculate the distance to the edge of the browser window. — Mario Antoci, Aug 30 '12 at 21:18

score 1 · Answer 1 · edited Aug 31 '12 at 11:44

here is the jQuery I wrote to solve my issue.

$(document).ready(function () {
$('#dnnMenu').mouseout(function () {

    if ((viewportRight - myRight) >= '540') {
        $('#dnnMenu .subLevelRight').css('left', '-270px');
    }

    else { $('#dnnMenu .subLevelRight').css('left', '270px'); }
   });
});
    $(document).ready(function () {
function HoverOver() {
    $(this).addClass('hover');
}
function HoverOut() {
    $(this).removeClass('hover');
}
var config = {
    sensitivity: 2,
    interval: 100,
    over: HoverOver,
    timeout: 100,
    out: HoverOut
};
$("#dnnMenu .topLevel > li.haschild").hoverIntent(config);

$(".subLevel li.haschild").hover(HoverOver, HoverOut);
});
    $(document).ready(function () {
$('#position1').mouseout(function () {
    var myLeft = $("#position1").offset().left;
    var myTop = $("#position1").offset().top;
    var myRight = myLeft + $("#position1").outerWidth();
    var myBottom = myTop + $("#position1").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }

    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});
    $(document).ready(function () {
$('#position2').mouseout(function () {
    var myLeft = $("#position2").offset().left;
    var myTop = $("#position2").offset().top;
    var myRight = myLeft + $("#position2").outerWidth();
    var myBottom = myTop + $("#position2").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }

    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});
    $(document).ready(function () {
$('#position3').mouseout(function () {
    var myLeft = $("#position3").offset().left;
    var myTop = $("#position3").offset().top;
    var myRight = myLeft + $("#position3").outerWidth();
    var myBottom = myTop + $("#position3").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }

    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});
    $(document).ready(function () {
$('#position4').mouseout(function () {
    var myLeft = $("#position4").offset().left;
    var myTop = $("#position4").offset().top;
    var myRight = myLeft + $("#position4").outerWidth();
    var myBottom = myTop + $("#position4").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }

    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});
    $(document).ready(function () {
$('#position5').mouseout(function () {
    var myLeft = $("#position5").offset().left;
    var myTop = $("#position5").offset().top;
    var myRight = myLeft + $("#position5").outerWidth();
    var myBottom = myTop + $("#position5").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }

    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});
    $(document).ready(function () {
$('#position6').mouseout(function () {
    var myLeft = $("#position6").offset().left;
    var myTop = $("#position6").offset().top;
    var myRight = myLeft + $("#position6").outerWidth();
    var myBottom = myTop + $("#position6").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }

    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});
    $(document).ready(function () {
$('#position7').mouseout(function () {
    var myLeft = $("#position7").offset().left;
    var myTop = $("#position7").offset().top;
    var myRight = myLeft + $("#position7").outerWidth();
    var myBottom = myTop + $("#position7").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }
    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});

and here is the css

    #position1{
background:transparent no-repeat;
width:110px;
height:2px;
margin-left:15px;
margin-top:-2px;
position:absolute;}
    #position2{
background:transparent no-repeat;
width:118px;
height:2px;
margin-left:127px;
margin-top:-2px;
position:absolute;}
#position3{
background:transparent no-repeat;
width:153px;
height:2px;
margin-left:247px;
margin-top:-2px;
position:absolute;}
#position4{
background:transparent no-repeat;
width:178px;
height:2px;
margin-left:402px;
margin-top:-2px;
position:absolute;}
#position5{
background:transparent no-repeat;
width:213px;
height:2px;
margin-left:582px;
margin-top:-2px;
position:absolute;}
#position6{
background:transparent no-repeat;
width:106px;
height:2px;
margin-left:797px;
margin-top:-2px;
position:absolute;}
#position7{
background:transparent no-repeat;
width:78px;
height:2px;
margin-left:905px;
margin-top:-2px;
position:absolute;}

the only other thing I added was the div id's directly under my other menu items in the HTML

<div id="position1"></div><div id="position2"></div><div id="position3"></div><div id="position4"></div><div id="position5"></div><div id="position6"></div><div id="position7"></div>

It works just not sure if everything is written perfectly. If you can see something wrong please let me know so I can clean up my code.

how do I make my submenu position dynamic based on the distance to the edge of the window?

1 Answers1