CSS-Tricks / MovingBoxes

Simple horizontal slider which grows up the current box when it's in focus (image, title & text) and back down when it's not in focus.

http://css-tricks.github.io/MovingBoxes/

GNU Lesser General Public License v3.0

280 stars 147 forks source link

panel height #42

Closed aguieb closed 12 years ago

aguieb commented 12 years ago

I am unable to determine how to incurease the panel height. Any idea?

I know we can increase the size of the panel width by updating the panelWidth value in the demo.js file but I don't see the option for the height.

$('#slider-two').movingBoxes({ ... panelWidth: .8, // current panel width adjusted to 70% of overall width ... });

Please advice...

thanks in advance

aguieb commented 12 years ago

FYI... The reason why I need to increase the panel size is because I made the tag in the index.html a background image within the div tag. When I did that the panel size decrease and I am unable to see the whole image.

Mottie commented 12 years ago

The height is determined by the panel content. If you look at the last slide in the first demo you'll see the panel is much taller than the others because of the image size. The second panel is also taller, but because of the text inside the panel. Maybe you just need to set the image dimensions to fix the problem.

aguieb commented 12 years ago

never mind...i figured it out.

when using % in CSS it didn't work. I had to use px instead

for example

100% vs 625px

image3

{ height:625px; background-repeat:no-repeat; background-image: url(../demo/c.jpg); }