title: Fade in whole HTML page with function?
body: <p>What I want to achieve is to fade in a whole HTML page onclick, right now it just appears rapidly.</p>
  
  <p>Here's what my code looks like right now, I click my div:</p>
  
  <pre><code>&lt;a href="#" onclick="loadPage()"&gt;Hyperlink&lt;/a&gt;
  </code></pre>
  
  <p>Which initializes a javascript function, that will then load my HTML page into this div: </p>
  
  <pre><code>&lt;div id="pageContent"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>Here's the function:</p>
  
  <pre><code>function loadPage()
  {
      var fullHeight = window.screen.availHeight - 265;
      var objectOne = '&lt;object style="width:100%;height:';
      var objectTwo = ';" type="text/html" data="test.html" &gt;&lt;/object&gt;'
      document.getElementById("pageContent").innerHTML=objectOne+fullHeight+"px"+objectTwo;
  }
  </code></pre>
  
  <p><strong>Additional information:</strong>
  I am not familiar with the jQuery library yet, but I will accept a solution using it if it's described what happens in it, I want to learn.</p>