title: Make a DIV not be shown outside it's container
body: <p>I'm making a very basic animation with JQuery. Basically what I have is a DIV in the size of 60% width, 80% height and it contains a manual. My goal is that when you go through pages in the manual, the current page moves up and disappears and the next page comes up from the bottom.</p>
  
  <p>I'm close enough, but something's just wrong and I can't get an idea on how to fix it - 
  <strong>The page DIVs are visible outside their container. Their top property is set to 110% yet I can see it doesn't take effect. Their position is only affected by the menu table above them.</strong></p>
  
  <p>So my problem, really is - <strong>how do I make a DIV invisible outside it's container, but without changing the visibillity or display of the whole DIV, so the text will be seen when moving up - but only the text that lays on the container and isn't outside it.</strong></p>
  
  <pre><code>    .manualPage {
      color:rgba(241, 241, 241,1.0);
      top:110%;
      text-align:left;
      left:0%;
      cursor:default;
      z-index:30;
      font-family: "Open Sans", sans-serif;
      font-size:11pt;
      width:100%;
      height:100%;
  }
  
  .BigWindow {
      position:absolute;
      width:60%;
      height:80%;
      top:10%;
      display:inline-block;
  
      left:-70%;
  
      background-repeat:repeat;
  
      color:rgba(241, 241, 241,1.0);
  
      font-family: "Open Sans", sans-serif;
      font-size:12pt;
  
      text-align:center;
  
      cursor:default;
  
      z-index:30;
  }
  </code></pre>
  
  <p>notice that BigWindow is the container, manualPage is a page.</p>
  
  <p>Here's the function, but I think the CSS problem is the one to be solved first:</p>
  
  <pre><code>var currentPage = -1;
  
  function setManualPage(num) {
      if ($('#manualMenu').css('display') != 'none')
          $('#manualMenu').fadeOut(750);
      if (currentPage != -1) {
          $('#page' + currentPage).animate({ top: '-100%' }, screen.availHeight / 2, function () { $('#page' + currentPage).css('top', '110%'); });
      }
  
      if (num != -1)
          $('#page' + num).animate({ top: '0%' }, screen.availHeight / 2);
      currentPage = num;
  }
  </code></pre>