user1944305 user1944305 - 1 year ago 81
HTML Question

External javascript not working but works in head

I'm new to this but I'm having trouble getting my external js to work (however it works in the head of HTML doc), I've looked at all solutions on here already.

This is my HTML, the js src is script2.js

<!DOCTYPE html >
<html>
<head>

<link href="css/stylesheetelaine.css" rel="stylesheet" type="text/css"/>


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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

<script src="js/jQuery/jquery.monte.js"></script>

<meta charset="utf-8">
<title>Gallery</title>


</head>

<body>
<div id="wrapper">

<div id="title">

<h1><a href="index.html"><img src="img/elaine4.png" width="517" height="185" alt="elaine cullinan"></a><img src="img/elainefilligree.png" width="235" height="251" alt="elaine"></h1>


<div id="nav">
<ul id>

<li><a href="about.html" title="About">About</a></li>
<li><a href="tattoo.html" title="Tattoo">Tattoo</a></li>
<li><a href="makeup.html" title="Make Up">Make Up</a></li>
<li><a href="gallery.html" title="Gallery">Gallery</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>

</ul>
</div>

<div id="gallerywrap">

<div id='example1' class='container'>
<img src="img/slide/img1.png" alt='An eastern mud turtle hatching.'/>
<img src="img/slide/img1.png" alt='Just hatched.'/>
<img src="img/slide/img1.png" alt='After three months.'/>
<img src="img/slide/img1.png" alt='Taking an occassional bask.'/>
<img src="img/slide/img1.png" alt='Ornery but healthy at two and a half years.'/>
</div>




</div>
</body>

</html>


My external js:

$(function () {
// Unstyled Example
$.monte('#example1');


// Styled Buttons Example
// (see the CSS in the above style block)
$.monte('#example2', {auto:false});


// Callback Example
// Format and append the HTML:
$('#example3 > img').each(function(){
$(this)
.wrap('<div style="position:relative"/>')
.parent()
.append('<div><p>' + $(this).attr('alt') + '</p></div>')
.append('<img src="frame.png" alt="" class="frame"/>');
});
// Hide the text on all but the center slide:
$('#example3 div div').css({opacity: 0}).eq(0).css({opacity: 0.8});
// Using the callbacks to reveal and hide the text:
$.monte('#example3', {
auto:false,
callbackIn: function () {
$(this[0]).find('div').animate({opacity: 0.8}, 450);
},
callbackAway: function () {
$(this[0]).find('div').animate({opacity: 0}, 450);
}
});
});

Answer Source

You're loading before you load jQuery. You need to load it after.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="js/script2.js"> </script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download