4

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.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 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 complete novice when it comes 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?

Community
  • 1
  • 1
Flickdraw
  • 643
  • 6
  • 14
  • 25
  • 1
    That JavaScript requires the [jQuery](http://jquery.com) library, which is loaded on jsFiddle by default. Make sure you've included that in your own page. – drudge Feb 08 '11 at 19:01
  • As a side note, you should check out w3schools.com and view their JavaScript tutorials. It will probably help you out a lot with understanding JavaScript and how it works. – Moses Feb 08 '11 at 19:03
  • 3
    @Moses No that's a bad suggestion. See http://w3fools.com for why. I'd suggest http://jqfundamentals.com instead. – lonesomeday Feb 09 '11 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 Feb 09 '11 at 17:06
  • See also [JQuery works in JS fiddle, but not on my website?](http://stackoverflow.com/q/17417326/1048572) and [Same code on jsfiddle but won't run on my server?](http://stackoverflow.com/q/31693867/1048572) – Bergi Sep 11 '16 at 11:23

1 Answers1

4

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.

lonesomeday
  • 215,182
  • 48
  • 300
  • 305