Question

I need to create a jQuery based carousel. On hovering over a carousel item it should bring up a related popup div just above it.

This popup div needs to be positioned to appear outside of the carousel wrapper, but still maintain the position along the x-axis above the hovered carousel item. As a result, I have placed the popup div inside the carousel item so it can be absolutely positioned with minus top attribute in the CSS but relative to the carousel item.

I have run into a problem where overflow:hidden needs to be applied to the carousel so it doesn’t show all the carousel items on page load, but this will cut off the popup div when it needs to appear on hover.

In the CSS on the carousel wrapper I have tried using the following, but this has not worked, it just ended up behaving like overflow: hidden

overflow-x: hidden;
overflow-y: auto;

or

overflow-x: hidden;
overflow-y: visible;

I have provided an example is JSFiddle using caroufredsel plugin. In this example I have made the example popup div visible at all times rather than hover for clarity sake. You can see the text and a top of the red div gets cut off.

http://jsfiddle.net/melon/jRp2r/9/

One solution that came to mind, was to have the popup divs marked up outside of the carousel wrapper which would solve the problem of it being cut off. But then comes the problem in figuring out where to position/show it relative to the carousel item being hovered and also which item was being hovered. I wanted to see if there were any other ideas, perhaps better ones before I go down this path.

If someone could give me any direction to achieve the goal I have outlined, whether via CSS or perhaps some custom JS that would be great.

Thanks in anticipation.

UPDATE:

The accepted solution meant that if the carousel was in the middle of the page, the popup div would not stay in the same position along the Y-axis when scrolling the page.

I had amalgamated my initial solution with the accepted answer. I created a separate div outside of the carousel where I would fill it in with the popup HTML of the hovered carousel item. Then I would use the Jquery to absolutely reposition this. The following code example solved my problem eg:

$('.carousel_item').mouseenter(function() {
   var $this = $(this);
   var posLeft = ($this.offset().left);
   var posTop = ($this.offset().top);

   //Pop up height
   var popHeight = ($('.popup', this).height());

   //Turn into negative number
   posTop = Math.abs(popHeight) * -1;;

   var popup_html = $('.popup', $this).html();

   $('#outside_popup').html(popup_html).css({
       top: posTop,
       left: posLeft
   }).fadeIn('fast');

}).mouseleave(function() {
     $('#outside_popup').fadeOut('fast');
});

Answer 1

I had to do something similar once myself. I’m sure somebody here will come up with a better solution but this is how I went about it:

Nest your pop up with the slide:

<div class="slide">
    <div class="slide_content"></div>
    <div class="popup">Hello!</div>            
</div>

On mouse over, get the position of the slide. Set the position of the popup relative to the hovered slide. position: fixed; is key here. Then make it appear:

$('.slide').mouseenter(function() {
    var $this = $(this);
    var posLeft = ($this.offset().left)-10
    var posTop = ($this.offset().top)-10
    $('.popup', $this).css({
                            position: 'fixed',
                            top: posTop,
                            left: posLeft
                           }).fadeIn('fast');

    }).mouseleave(function() {
        $('.popup', this).fadeOut('fast');
    });

Click here for a VERY basic example
​
Tested in IE7-9, Firefox, Chrome

EDIT: Here is a working example of your code