Positioning bug if element is fixed

[taurelisk]

Hi, thanks for awesome plugin. However, i found that if i am initiating dropdown inside fixed div, then plugins works just fine only at the starting of the page (top page). If i am scrolling the page at the bottom with opened dropdown, then it also works. BUT!, but if i close dropdown and click it again (when i am at the bottom or middle page), then dropdown panel appears at the very bottom of the page (remember that i have fixed header div).

Here is the images.

[claviska]

Looks like it's off about the amount of the scroll height. Haven't tried tying a dropdown to a fixed container before, but I can't imagine it would be hard to fix. I'm going out of town soon (limited Internet/email) but can probably accept a pull request in the next few days. Otherwise it might be a bit before I can tackle this.

[DevidraEX]

@claviska just a remember

It's a nice script so hope you will look into 👍

[claviska]

I think we just need a setting for relative/fixed positioning (you might even be able to override it yourself in CSS as a workaround). Would love some assistance on this if anyone wants to lend a hand :)

[DevidraEX]

Uff, as a Idiot in Javascript, just some PHP knowledge, got "a dirty" workarround, you should look over it, but "somehow" it work

I just add a "else if" condition at the position-function and just removed 1 thing / copy paste the other parts

CSS

.jq-dropdown {
position: absolute;
z-index: 1039;
display: none;
}

.jq-dropdown-fixed {
position: fixed;
}

Just create a new class which is used in the script, it override the .jq-dropdown if used

HTML

(Copy sentence from you) To make the jq-dropdown fixed on browser size, add the jq-dropdown-fixed class ( like jq-dropdown-anchor-right )

JS

    // Position the jq-dropdown relative-to-parent...
    if (jqDropdown.hasClass('jq-dropdown-relative')) {
        jqDropdown.css({
            left: jqDropdown.hasClass('jq-dropdown-anchor-right') ?
                trigger.position().left - (jqDropdown.outerWidth(true) - trigger.outerWidth(true)) - parseInt(trigger.css('margin-right'), 10) + hOffset :
                trigger.position().left + parseInt(trigger.css('margin-left'), 10) + hOffset,
            top: trigger.position().top + trigger.outerHeight(true) - parseInt(trigger.css('margin-top'), 10) + vOffset
        });
    } else if (jqDropdown.hasClass('jq-dropdown-fixed')) {
        // Position the jq-dropdown-fixed to browser-size
        jqDropdown.css({
            left: jqDropdown.hasClass('jq-dropdown-anchor-right') ?
                trigger.position().left - (jqDropdown.outerWidth(true) - trigger.outerWidth(true)) - parseInt(trigger.css('margin-right'), 10) + hOffset :
                trigger.position().left + parseInt(trigger.css('margin-left'), 10) + hOffset,
            top: trigger.outerHeight(true) - parseInt(trigger.css('margin-top'), 10) + vOffset
        });
    } else {
        // ...or relative to document
        jqDropdown.css({
            left: jqDropdown.hasClass('jq-dropdown-anchor-right') ?
                trigger.offset().left - (jqDropdown.outerWidth() - trigger.outerWidth()) + hOffset : trigger.offset().left + hOffset,
            top: trigger.offset().top + trigger.outerHeight() + vOffset
        });
    }

PS: Somehow I can't attach things, so I just "nopaste" them

JS > http://nopaste.linux-dev.org/?780207
CSS > http://nopaste.linux-dev.org/?780208

[DevidraEX]

@claviska got another request, and I think this time I won't manage to do it

The Fixed Div, work now vertically, it scroll with the browser up/down

But, not anchor-right horizontally, it stay at the trigger position and I don't know how to do it

If I increase the browser size, it work, if I reduce it, the dropdown is unreachable

A 100% fixed div, shouldn't scroll horizontally.. But I need it and got a really tiny script on my page, maybe you can help me out

My navigation scroll with this one

$(window).scroll(function(){
$('#navigation').css('left',-$(window).scrollLeft());
});

my "workarround" is in the post above, hope you got a solution for it

[DevidraEX]

Ok nevermind, got it somehow

JS

        // Position the jq-dropdown-fixed to browser-size
        jqDropdown.css({
            left: jqDropdown.hasClass('jq-dropdown-anchor-right') ?
                trigger.position().left - $(window).scrollLeft() - (jqDropdown.outerWidth(true) - trigger.outerWidth(true)) - parseInt(trigger.css('margin-right'), 10) + hOffset:
                trigger.position().left - $(window).scrollLeft() + parseInt(trigger.css('margin-left'), 10) + hOffset - $(window).scrollLeft(),
            top: trigger.outerHeight(true) - parseInt(trigger.css('margin-top'), 10) + vOffset
        });

$(window).scroll('resize', position);