Changing elements' properties with JQuery

I have been fighting with a problem with JQuery for 2 hours and I can't get anything.

I am creating a website with div slides, ok? So you have the main div called #content, and inside I have another div called #slides. But I want 4 of them, so once again, inside I have 4 sections.

What is the problem? Every section has its own height, so #slides height is the highest of them, and this makes the footer looks very low with a lot of blank space. So I tried to change the #slides height with JQuery every time you change your section, in order to keep the same margin for the footer and have always the same portion of blank space, but I don't k开发者_JAVA百科now how can I do it.

So I were searching doc and I know I have to use the animate() method, like this

$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);

I just have to add a new css property that upload the current height. But how can I do it? I don't know any idea of JQuery.

I am a newbie, these kind of beautiful things are new for me and I am trying to discover all of them by myself, but in some moments like that, I don't know how to fix it and go on...

Thanks!

edit: The first time, before anyone could see the information, you can set the height as the first slide. This is pretty simple using $('#slides').height($('.slide').height()); My problem is updating the height to the new section you will see every time you push the button.

You need a way to identify which of your slides is the currently active one.

In your edit, your inner expression $('.slide').height() should be refined to only match the one you want. This is because $('.slide') is matching all of your slides. (And thus returning only the height of the first one.)

But, if you had an "active" or "current" class on the currently-visible slide, or if you knew the index/number of the slide being shown, you could refine this. For example, $('.slide.current') or $('.slide').eq(idx)

Perhaps if you could elaborate on the code you have running when you "push the button" that you mentioned, we could see about adding some extra stuff in there to help with this identification i mentioned. Then you could add in the height modification to the same animation method you are already calling for the left margin.

Good luck!

OK I believe I have solved it at last. I tried to put some id's to identify the section (.slide) but the PHP code I have generates sections dynamically, so I don't know how can I put different id's this way.

For that reason I tried an easier and different idea. On the JS script there's a previous loop that gets the width of all the .slide and calculate the total width, in order to later assign the total width to the container #slides. So I did the same for the height

var heights = new Array();

/* Loop to save every height */    
$('#slides .slide').each(function(i) {
     heights[i] = $(this).height();
}

/* Setting the #slides height to the first .slide height */
$('#slides').height($('.slide').height());

/* And finally, the animation when someone "push the button" */
$('#menu ul li a').click(function(e,keepScroll) { 
     var pos = $(this).parent().prevAll('.menuItem').length;
     $('#slides').stop().animate( {height:heights[pos]+'px'}, 450);
}

Thanks for all. I am such a big noob but I have discovered I love web design ^^