Fading the div to 1


Hi, I can't even get the div to display, even if I reset the code. I've triple checked that I've used the correct solution, but no HTML within the <script> wrapper seems to execute. Any solutions?

EDIT: Here is the code:

<script type = 'text/javascript' src = 'script.js'>
		<title>Button Magic</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
     <div><br/><strong>Click Me!</strong></div>   


div {
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #FFFFFF;
    font-family: Verdana, Arial, Sans-Serif;
    opacity: 0.5;


$(document).ready(function() {
    $('div').mouseenter(function() {
        $('div').fadeTo('fast', 1);


Could you display the code you are using....
edit your Post

  • leave one blank-line above of your code
  • select your code in the Post
  • then =click= on the </>-symbol-of-this-editor

Your code will then be in a pre-code state
and you will be able to make/present the proper indentations.

or even better use
= http://discuss.codecademy.com/t/using-backticks-to-format-your-code/3697/2

$(document).ready(function() {
    $('div').mouseenter(function() {





<script type="text/javascript" src="script.js"></script>

should be inside of your <head> </head> tags.....


The unidentified closing script-tag </script> should be removed !!


You could use extra code which will be proof if the script.js file has been loaded
for instance

$(document).ready(function() {
    if (typeof jQuery != 'undefined') {  
        // jQuery is loaded => print the version
   $('div').mouseenter(function() {
        $('div').fadeTo('fast', 1);

would give an alert-message being the jQuery-Version you are using


It all start's with you,
using a Browser
in which you load a HTML-file,
which we will call the HTML-Document.

This document has a minimal build of

<!DOCTYPE html>
          <title> </title>
       <!-- here you insert your HTML-code -->

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

       |            |
     head          body

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
but is a parent to 2 child-Element's
the 'head'-Element
the 'body'-Element.

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'head'-Element is parent to the 'title'-Element...
the 'title'-Element is a child of the 'head'-Element
the 'title'-Element is also a descendant of the 'html'-Element.

The DOM has several interface's
over which you can access the data**/**information
held by the DOM.

One of the interface's is the Element-interface
you can divide the interface into
properties ( consisting of a property-key and it's associated VALUE )
methods ( giving you the functionality to manipulate the Elements )


Thanks a ton for the help, chaps!