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=".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);
}
});
});
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./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);
}
});
});
- 1 Are you sure the path is resolving correctly? – Shmiddty Commented Jan 3, 2013 at 0:17
4 Answers
Reset to default 3Move this line:
<script type="text/javascript" src="js/script2.js"> </script>
To after where you include jquery.min.js and jquery.monte.js.
Scripts are executed in order, so you need this:
<script src="http://ajax.googleapis./ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="js/jQuery/jquery.monte.js"></script>
<script type="text/javascript" src="js/script2.js"></script>
So that the browser first loads jQuery, then loads the Monte plugin, then does your script.
You're loading before you load jQuery. You need to load it after.
<script src="http://ajax.googleapis./ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="js/script2.js"> </script>
To run the external javascript. Declare it at the bottom after tag. It will work.
</body><script src="js/validate.js"></script></html>
Make sure that these points are not forgotten:
Add both the js file and the html file in the same directory. Keeping both the files in the same directory may also give an error.
The dot extension of the file (say "external.js") line should look like
<script type="text/javascript" src="external.js">. If the source address is changed, you will encounter an error.