title: Replacing paragraph tag contents with a random word from javascript
body: <p>When a user enters the page I would like a div to be in the center with a heading, a quote underneath that is randomly picked from a list and a button to enter the site. This is all well and good but I cannot seem to get the button to fade in the main site and fade out the landing div. Here is a jsfiddle to try and help explain things more.</p>
  
  <p><a href="http://jsfiddle.net/6cGHF/" rel="nofollow"><strong>JSFIDDLE</strong></a></p>
  
  <p>As you will probably be able to tell, I'm not that great with JavaScript or jquery and what I have done so far is from learning bits and pieces and surfing the web through code examples</p>
  
  <p>I do not see why it will not work as I had a play around in jsfiddle with a simplified version of what I want to do and it worked.</p>
  
  <p><a href="http://jsfiddle.net/7dnUp/" rel="nofollow"><strong>Simplified Version</strong></a></p>
  
  <p>Below code is simplified version (It wouldn't let me post without adding code?)</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="landingDiv"&gt;
      &lt;h1&gt;LANDING DIV&lt;/h1&gt;
      &lt;button id="showMain"&gt;Enter Site&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="main"&gt;
      &lt;h1&gt;Main Site&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$("#showMain").click(function () {
      $(".main").fadeIn(1000);
      $(".landingDiv").fadeOut(1000);
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.main {
  display: none;
  opactiy: 0;
  }
  </code></pre>
  
  <p>Thanks in advanced.</p>
  
  <p>Steve.</p>