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.

I found this post with a link to jsfiddle (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 onLoad setting but I’m really not sure).

This is what I have created in JSFiddle:

JavaScript

$('#box').hover(function() {
  $(this).animate({
    height: '220px'
  }, 150);
}, function() {
  $(this).animate({
    height: '20px'
  }, 500);
});

CSS

#box {
  position: absolute;
  width: 300px;
  height: 20px;
  left: 33%;
  right: 33%;
  min-width: 32%;
  bottom: 0;
  background-color: #000000;
}

HTML

<div id="box"></div>

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 onLoad or onDomReady to anything else, it stops working, but the code doesn’t change. So I think I have to add something else somewhere for that.

As you can probably guess, I am a plete novice when it es to JavaScript so I’m positive that I’m not doing something right.

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?

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.

I found this post with a link to jsfiddle (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 onLoad setting but I’m really not sure).

This is what I have created in JSFiddle:

JavaScript

$('#box').hover(function() {
  $(this).animate({
    height: '220px'
  }, 150);
}, function() {
  $(this).animate({
    height: '20px'
  }, 500);
});

CSS

#box {
  position: absolute;
  width: 300px;
  height: 20px;
  left: 33%;
  right: 33%;
  min-width: 32%;
  bottom: 0;
  background-color: #000000;
}

HTML

<div id="box"></div>

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 onLoad or onDomReady to anything else, it stops working, but the code doesn’t change. So I think I have to add something else somewhere for that.

As you can probably guess, I am a plete novice when it es to JavaScript so I’m positive that I’m not doing something right.

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?

• javascript
• html
• dom
• jsfiddle

• 1 That JavaScript requires the jQuery library, which is loaded on jsFiddle by default. Make sure you've included that in your own page. – jrn.ak Commented Feb 8, 2011 at 19:01
• As a side note, you should check out w3schools. and view their JavaScript tutorials. It will probably help you out a lot with understanding JavaScript and how it works. – Moses Commented Feb 8, 2011 at 19:03
• 3 @Moses No that's a bad suggestion. See w3fools. for why. I'd suggest jqfundamentals. instead. – lonesomeday Commented Feb 9, 2011 at 11:25
• @lonesomeday Wow, you're totally right. I never realized how poor and outdated the documentation at w3schools was (I haven't actually used it since I first learned css). – Moses Commented Feb 9, 2011 at 17:06
• See also JQuery works in JS fiddle, but not on my website? and Same code on jsfiddle but won't run on my server? – Bergi Commented Sep 11, 2016 at 11:23

1 Answer 1

You are running this code immediately, rather than waiting for the DOM to be ready. This means that the element #box may not exist yet.

jsFiddle automates this process to make your code cleaner. You need to do it yourself when you put the code into your own website. It is very easy: you just need to put your code into a callback to the ready event on the document:

$(document).ready(function() {
    // put your Javascript here
});

or, a shortcut version:

$(function(){
    // put your Javascript here
});

These are semantically and functionally equivalent.