Question

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 know 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.

Answer 1

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 ^^