title: How do I put codes from jsfiddle.net into my website?
body: <p>I’ve been trying to create a little box at the bottom of my webpage which will expand / pop-up when scrolled over and then close again when the mouse moves away.</p>
  
  <p>I found this <a href="https://stackoverflow.com/questions/3755381/looking-to-build-an-expand-on-hover-contract-on-blur-div">post</a> with a link to jsfiddle.net (which I have been fiddling about with) and have created something that works exactly like I want when viewed on JSFiddle. But I can’t get it to run when I pop it on my website (I think it may have something to do with the <code>onLoad</code> setting but I’m really not sure).</p>
  
  <p>This is what I have created in JSFiddle:</p>
  
  <h3>JavaScript</h3>
  
  <pre><code>$('#box').hover(function() {
    $(this).animate({
      height: '220px'
    }, 150);
  }, function() {
    $(this).animate({
      height: '20px'
    }, 500);
  });
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>#box {
    position: absolute;
    width: 300px;
    height: 20px;
    left: 33%;
    right: 33%;
    min-width: 32%;
    bottom: 0;
    background-color: #000000;
  }
  </code></pre>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div id="box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This works fine in JSFiddle but not when I try and insert the code into my files and link them together. If I change the drop down box in JSFiddle from <code>onLoad</code> or <code>onDomReady</code> to anything else, it stops working, but the code doesn’t change. So I think I have to add something else somewhere for that.</p>
  
  <p>As you can probably guess, I am a complete novice when it comes to JavaScript so I’m positive that I’m not doing something right.</p>
  
  <p>Could someone please tell me how to save the JavaScript code and link it to my webpage so it will work exactly like it is on JSFiddle?</p>