Question

So I’m trying to change the scrollbar when I click on a link. First, let me show you my current code.

jQuery:

$(document).ready(function() {
    $("div.panel_button").click(function(){
        $("div#panel").animate({
            height: "100%"
        })



    }); 

   $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px"
        }, "fast");


   });  

});

Implementation:

 <div id="panel"> 
<div class="panel_button1" id="hide_button" style="display: visible;"><a href="#">X</a></div>
  <div id="panel_contents">
There was a really long bit of text here. This will eventually overflow.
</div> 
</div></div>

Activation Link:

<div class="panel_button" style="display: visible;"><a href="#panel">ABOUT<br>THE<br>BLOGGER</a></div> 

CSS:

#panel {
margin-top: 0px;
margin-left: 48%;
width: 48%;
z-index: 25;
text-align: center;
background-color: #efefef;
position: relative;
height: 0px;
z-index: 10;
overflow: hidden;
text-align: left;
position: fixed; } /* drop down color */

#panel_contents {
font: normal 80%/190% arial;
line-height: 190%;
padding: 5%;
height: 100%;
width: 80%;
padding-top: 1% !important;
position: absolute;
padding-left: 12% !important;
z-index: -1; } /* drop down color */

.panel_button1 a { /* About the Blogger */
text-decoration: none;
color: #888;
font-size: 240%;
font-family: arial;
padding: 1%; 
-webkit-transition: all .9s ease; 
-moz-transition: all .9s ease; 
transition: all .9s ease; } /* for the exit button */

.panel_button1 a:hover {
color: #F58932; }   /* for the exit button */

.panel_button {
list-style-type: none;
list-style-image: none;
list-style: none;
width: 50%;
position: relative;
top: -160px; } /* for the nav styling */

.panel_button a {
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
transition: all 1s ease;
background: #F5A564;
color: #F5CBAF;
display: block;
font-size: 255%;
height: 160px;
text-decoration: none; } 
/* nav styling */

.panel_button a:hover {
background: #808080;
color: #FFFFFF; }

So when I click on “About the Blogger” I want to write a bit more so that the text will eventually overflow, but I can’t seem to think of a way to do that. IF possible, I’d like to change the main content that the default scrollbar scrolls to the “About the Blogger” content. If that’s not possible, I was thinking of an internal scrollbar.
I can’t think of a way to execute either.
If you wish to see this, go to Niu-Niu.org.
Please keep in mind that I’m a complete newb in jQuery. I know my way around CSS well.
Thank you for looking!

Answer 1

The panel_contents is absolute, not static. This looks like a CSS problem and not a jQuery problem. Unless you want to use jQuery to dynmically adjust the panel’s height based on screen size. Why not use this css for panel instead?

position: fixed;
top: 0px;
right: 30px;
width: 400px;
height: 100%; 
overflow: scroll;

Now panel is full height of window. If content is larger than panel it scrolls. I suppose you could still use position absolute with 100%, but you need to set its parent to relative so that it doesn’t grow too big (which is your current problem, plus the fact that you don’t have overflow scroll.)