Trouble including jquery in .js files... any suggestions?
Hi all,
I am pretty new to the jQuery scene, and I have run into something I wanted to ask you all about. I have some jQuery on a page that I would like to put into a .js file and include in, rather than having it in the head of the document. This is a fairly simple task I imagine, but I can't seem to get it to work the way that I would think it would. Here is what I have...
- <head>
<title>site title</title>
<link rel="stylesheet" type="text/css" href="css/site.css" />
<script type="text/javascript" src="js/jquery1.4.js"></script>
<script type="text/javascript" src="js/jq_rollover_fade.js"></script>
</head>
This example (above fails to work).
- <head>
<title>site title</title>
<link rel="stylesheet" type="text/css" href="css/site.css" />
<script type="text/javascript" src="js/jquery1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// All our interactivity will be coded in here
$(".rollover").hover(
function(){
// The user has rolled over the element
$(this).append("<div id='temp'></div>");
bgimg = $(this).css("backgroundImage");
$(this).find("#temp").css({position:"absolute",width:"100%",height:"100%",top:0,left:0,background:"transparent "+bgimg+" no-repeat bottom left",opacity:0});
$(this).find("#temp").stop().animate({opacity:1},300);
},
function(){
// The user has rolled out of the element
$(this).find("#temp").stop().animate({opacity:0},800,function(){$(this).remove()});
}
);
});
</script>
</head>
This way works, but it requires that I have my jQuery in the head of each .html page... ick. Any thoughts?
++ AHSchmidt ++