Question

There may be an answer for this somewhere, but I have pretty limited experience with HTML,CSS, and JS. The answers given that I try don’t seem to work properly or I am not entering them in properly so I figured I would just ask.

There is a box on the right side of the page (image). When I put in lists that go past a certain point the box doesn’t expand to encompass them. It is because they have the height set statically. I’ve pinpointed where to make the adjustment to both a JS script and CSS sheet. They all need the same height set in order for it to expand properly. I’m looking for a way to expand it either dynamically or a way to be able to set a height for each possible set up. Either through a variable or something similar.

Here is the CSS sheet (titled style)

#content {height:868px;width:740px;float:left;position:relative}
#content > ul > li {position:relative;height:868px;width:100%;bottom:0}
.box1 {background:url(../images/bg_content.png) repeat;width:100%;height:100%;position:absolute;top:0;left:0}

It is the 868px height that needs to be adjusted on both Content sections.

Here is the JS script that also needs the same adjustment. (titled pages)

$('#content').stop().animate({height:'868px'})
    if (act!='') {
        $(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
            $(act).css({display:'none'});
            $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
                act=page;   
            }); 
        })
    } else {
        $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
            act=page;   
        });     
    }

The adjustment on the 868 height to whatever number you change the CSS too makes the proper adjustment.

Here is the template I am using if you would like to look specifically at what I am talking about.

Download
or
Website and the title of the template is Thom Sanders… it is number 8

Thanks and I appreciate you taking a look.

Merry Christmas

Answer 1

Add Scrollbars:

Use these settings for #content to place scrollbars inside the div when they are needed with CSS overflow property.

#content {height:868px;width:740px;float:left;position:relative;overflow:auto;}

Background Image Fix:

Because the background image was just for the original height of 768px high via .box1, you’ll need to make a mod to the CSS and place the background image in .inner instead, so that it covers the scrolled portion as well.

.box1 {width:100%;height:100%;position:absolute;top:0;left:0}
.inner {background:url(../images/bg_content.png) repeat;padding:25px 55px 25px 60px;position:relative}

Reference Comment:

“I would even be pleased with a solution that instead of adjusting the height it was a button at the bottom of both the divs in the box
that when clicked scrolled the content to the next segment of info.”

To achieve this functionality, create two buttons. One will be Continue and the other Previous. Here is a mock-up segment in HTML on how to break apart your UL list and add these two buttons. You may need to add/remove <br /> as needed for this solution:

<li><a href="#">Gon recusandae taque earum rerum hic tenetur a sapiente delectus</a></li>
<li><a href="#">Aut reiciendis voluptatibus maiores alias consequatur</a></li>
<li><a href="#">Aut perferendis doloribus asperiores eveniet et voluptates repudiandae</a></li>
<li><a href="#">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</a></li>
</ul>

<a class="button1 continue"><span></span><strong>Continue</strong></a> <br /><br /><br /><br />

<a class="button1 previous"><span></span><strong>Previous</strong></a> <br /><br />

<ul class="list2 pad_bot1">
 <li><a href="#">Temporibus autem quibusdam et aut officiis debitis aut rerum</a></li>
 <li><a href="#">Necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae</a></li>
 <li><a href="#">Gon recusandae taque earum rerum hic tenetur a sapiente delectus</a></li>
 <li><a href="#">Aut reiciendis voluptatibus maiores alias consequatur</a></li>

Then add the following jQuery to the bottom of script.js file, but inside the Document Ready portion.

  // continue button
  $('.continue').click(function(){
     $('.inner').animate({top: -825}, 1000);  // NEGATIVE Value 768px min + button height 33px + a little extra = 825px
  });

  // previous button
  $('.previous').click(function(){
     $('.inner').animate({top: 0}, 1000);  // Reset top to 0. Therefore, this previous button is good for 2nd page, not 3rd.
  });

The above jQuery CSS settings assumes the button is placed at the bottom of the page. Adjust the specific values as you need to. 1000 refers to 1000ms, or 1 sec of animation.