Allow content to expand beyond scroll bars?

[jc]

Im using the jscrollpane jquery plugin. My content are images that
expand when you mouse over them, and shrink back to normal on
mouseleave. What I need if for the images to be able to expand over
beyond the scroll bar and remain visible while expanded.

By giving the images a z-index I can get them to expand over the
scroll bar handles, but im struggling to get them to expand any
further.

If I set a number of elements to having overflow visible I can get it
to work, but then I have browser scroll bars at the bottom of the
screen.

Can I have the images visible when they expand but no browser scroll
bars? Thanks

[Kelvin Luck]

Hi,

If I understand correctly you want your images to expand out of the bounds of the scrollpane "box"? That won't be possible in a simple manner.

A workaround might be to do something like this:

• On mouseover clone the image that is rolled over and attach the clone to the body with position: absolute.
• Use jQuery to figure out the position of the image you cloned with respect to the body (a loop with offsetParent will be your friend here).
• Apply this position to the cloned image so that it is sitting directly above the original image then expand it.
• Listen for the mouseout event on the cloned image and when this happens the shrink the cloned image and then remove it from the body.

Hope it helps,

Kelvin :)

[jc]

Thanks for your answer. It sounds quite complicated though. I have 2
images on top of each other that expand. The one in front is greyscale
and the other is color. The greyscale one also fades out. So, the
whole effect is of a greyscale image that expands and becomes color.

In chrome the animation is fine but in firefox its a bit jumpy. I
think im asking the browser to do too much here. Would it be less
intensive to just have the scrollable area become higher on mouse
over, and then shrink back to normal size?

Thanks

[Kelvin Luck]

Hi,

It's a little complex from a code point of view but not really from a
browser rendering point of view. Indeed, an absolutely positioned
element on the body is probably easier for a browser to scale than a
deeply nested element...

And I'm not really sure I understand what you mean by "the scrollable
area become higher" so I can't comment on the second point...

Cheers,

Kelvin :)

[jc]

Ok, good to know it wont slow the browser down.

By "the scrollable area become higher", I meant the div containing the
scroller.

It might not always be a good solution but ive fixed this on my site
by making the scroll bar handle's quite tall, and having a background
image just at the top of them.

Thanks

[Kelvin Luck]

Hi,

I'm still not quite sure I understand. It sounds like caps may help you
though?
http://jscrollpane.kelvinluck.com/caps.html

Caps are "unused spaces at the end of the scrollbars which make the
scrollbars appear shorter than the content block that they are scrolling"

Cheers,

Kelvin :)

[jc]

I just used css to make the horizontal scroll bar higher. Its working
fine for me. I dont think the caps and gutters would work for me as I
need to widen the content area of the scroll bar.

Anyway, this is solved for me. Thanks

[Kelvin Luck]

Cool - glad you found a solution :)