Fading the div to 1


#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:
index.html:

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

stylesheet.css:

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;
}

script.js:

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

#2

@objectplayer64019,
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
[extra's]
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet


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

#4

@objectplayer64019,

1

Your

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

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

2

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

3

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
       alert(jQuery.fn.jquery);
   }
   $('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>
  <html>
     <head>
          <title> </title>
     </head>
     <body>
       <!-- here you insert your HTML-code -->
     </body>
  </html>

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 )

            html
             |
       +-----+------+
       |            |
     head          body
       |
     title

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
and
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 )
and
methods ( giving you the functionality to manipulate the Elements )
https://developer.mozilla.org/en-US/docs/Web/API/Element
https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags


#5

Thanks a ton for the help, chaps!