AnythingSlider : Dynamic Height

[hausmaster]

Hi!

I wondered how to realize that AnythingSlider changes the hight of a slide when the hight of the content in this slide changes.
For example:
In the first slide I do have content with the hight of 300px (in this case a DIV) and by clicking the hight of the DIV changes to 500px.
Now I want AnythingSlider to change the height of this slide to 500px, but it is still 300px high.
Just by refreshing the window the slide adapts to the 500px.

Is there are way how to fix this problem?

Thanks so much!

– Clemens

[hausmaster]

EDIT:

The option “expand” doesn’t work for my layout – I guess.
An other way to solve my problem would be to set a fix hight for the first slide.

Thanks!

[Mottie]

Hi Hausmaster!

First, you’ll need to define the dimension of each slide in the css. You can see how the second demo on the main page has it set up here.

Then set the resizeContents option to false to prevent AnythingSlider from forcing the resize of every slide.

[hausmaster]

Hi Mottie!

Thanks for your fast repley!
I tried it – but chaninging the CSS dimensions of the slides don’t affekt the slides – nothing happens?! I set background of the <ul> element to see the size – but at the moment the slides fit to the hight of the content instead to the hight I set in the CSS file..

[Mottie]

Did you set the resizeContents option to false?

[hausmaster]

Yes, I did. I uploaded the file to show it to you.
I am trying to center the first slide in between the menue bar and the purple footer – this works just when I refresh the browser.

This works fine because of the javascript – it takes 100% hight minus the hight of the menuebar minus the hight of the footer and sets this calculated hight as the hight of the DIV “platzhalter” which is in slide 1.

Now, because the first slide doesn’t fit to the always changing hight of DIV “platzhalter” my idea was to give the first slide a fix hight. Now I would change this hight with javascript to 100%-bar-footer – this would cause a centered div, am I right?

Maybe you find the mistake?

Thanks you so much! :)

Clemens

EDIT: Forgot to post the link: http://www.luca-di-piana.com/frage/frage.html

[hausmaster]

Just seems to work when I add a DIV inside the first li-element with the class “panel1”.
Ist this normal? In the example you postet (Slider #2) it isn’t that way in the code and seems not to work for me..

				






Test

[Mottie]

Oh that sounds you’re adding padding or a margin directly to the LI… all browsers include these settings in addition to the set dimensions, so you’ll need to set the LI and the first div margin and padding to zero, then the div inside of that “.panel1” can get margin and padding and maintain the correct dimensions of the outside panel. Or you can use css3 box-border.

Check out this demo, and this article for a better explanation.

[Author]

Posts