4

I'm trying to make a div appear to slide out to the right of another div, using jQuery.

I've based my solution on this answer, by using position:absolute, and getting the position of the trigger element in jQuery, and positioning the popover accordingly.

You can see the result of what I have so far on this JSFiddle I have made: Result / Source.

The problem is, because the popover div uses position:absolute, if I resize the page, or a scrollbar appears / disappears - the popover becomes mis-aligned to the trigger div.

How can I make the popover div stick to the right-side of the trigger div?

4 Answers 4

5

Rather than relying on jQuery for this, you can make two elements stick together in CSS by making them inline elements, forcing them to touch, and setting the CSS of the container to white-space: nowrap.

HTML:

<div id="main">
    <p>If the draw is popped out, and you resize the page, it breaks, because it has position:absolute</p>
    <div id="clickable">
        <div id="trigger">
            <span>Click here - click away to hide</span>
        </div><div id="pop">
            <span>Now Resize Page</span>
        </div>
    </div>
</div>

Note that </div><div id="pop"> is not a typo. To force inline elements to touch, you need to remove all whitespace in your markup.

CSS:

#main {
    width:300px;
    margin:50% auto;
    margin-top:0;
    margin-bottom:0;
    background-color:#EEE;
    padding:10px;
}
#clickable { white-space: nowrap; }

#trigger {
    background-color: #FFF;
    width: 100%; 
    border: 4px solid #ddd;
    display: inline-block; }
#trigger span { margin: 5px; display: block; }

#pop {
    background-color: #333;
    color: #EEE;
    height: 38px;
    opacity: 0;
    display: none; }
#pop span { 
    margin: 10px; 
    display: block; }

JS:

$('#trigger').click(function(event) {
    event.stopPropagation();
    var width = $(this).outerWidth();
    var offset = $(this).offset();
    var top = (offset.top+4)+'px';
    var left = (offset.left+width)+'px';
    $('#pop').css({
        'top' : top,
        'left' : left,
        'display' : 'inline-block',
        'opacity' : 0,
        'width' : 0
    }).animate({
        'width' : '140px',
        'opacity' : 1
    });
});

$('html').click(function(event) {
    if (!($(event.target).closest('#pop').length)) {
        $('#pop').animate({'width':0,'opacity':0},500,
                           function() {
            $(this).hide();
        });
    }
});

Preview: http://jsfiddle.net/Wexcode/4kg2W/3/

3
  • great answer, but unfortunately my container uses jQuery slimScroll, which means that the overflow-x is hidden, do you know how I can make it show over the edge of the slimScroll div? Dec 24, 2011 at 19:39
  • Hmm, maybe making it so overflow-y is the only one that's hidden? Unfortunately I don't know too much about the plugin you are using and quite frankly, I don't know how cross-browser compatible setting just overflow-y is (I don't think it works in IE8 or below).
    – Wex
    Dec 24, 2011 at 20:14
  • don't worry, I've decided to use a separate dialog for this anyway - but thanks for your answer, really good. Dec 24, 2011 at 20:18
3

Put the trigger div with position: relative and the popover inside it with position:absolute, that way, the popover will have absolute position, but always relative to the trigger div.

4
  • works great on the jsfiddle - going to implement in my project and will report back! Dec 24, 2011 at 17:41
  • problem with this is that the inside elements are in a container which won't let anything outside of it so it gets cut off! Dec 24, 2011 at 17:50
  • If you have one container with overflow:hidden, wrap it in a plain-old <div>. Put position:relative on the wrapper and put the #pop element right next to your overflow:hidden one.
    – benastan
    Dec 24, 2011 at 18:17
  • Can you change the container to "overflow:visible" ? If not than I suggest doing as @benastan said, using a div (with position:relative) that wraps both the trigger and the popover. As the popover will be position absolute (out of document flow), only the trigger will have influence on the block size of it, so the absolute positio of the popover will be the same as expected.
    – Telmo Dias
    Dec 26, 2011 at 1:18
1

You could adjust the positioning when the browser resizes:

$(window).resize(function(){
    $("#trigger").trigger('click');
});
1
  • I think I'd want just an instant size recalc not the full click function but thanks! Dec 24, 2011 at 17:30
0

you can use position property

<div style="position: absolute;right:-10px ;top:0"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.