I have javascript that was once inserted directly into my html page. It got to large and I decided to move it to a separate file. But I am not sure how to link the two. I attempted to do so but the javascript won't work.
This is the link I use in my html header
<script src="js/index_slide.js"></script>
And this is my javascript for the file index_slide.js
<script type="text/javascript">
$(document).ready(function() {
$('#bottom_logo').click(function(event) {
event.preventDefault();
var position = $('#main_div_wide_wrapper').position().left;
var width = $( document ).width();
var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;
if ( slide == '0') {
}
if ( slide == '1') {
$('#main_div_wide_wrapper').animate({
'left' : '+=100%' //moves left
});
}
if ( slide == '2') {
$('#main_div_wide_wrapper').animate({
'left' : '+=200%' //moves left
});
}
if ( slide == '3') {
$('#main_div_wide_wrapper').animate({
'left' : '+=300%' //moves left
});
}
if ( slide == '4') {
$('#main_div_wide_wrapper').animate({
'left' : '+=400%' //moves left
});
}
});//end bottom_logo
$('#about').click(function(event) {
event.preventDefault();
var position = $('#main_div_wide_wrapper').position().left;
var width = $( document ).width();
var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;
if ( slide == '0') {
$('#main_div_wide_wrapper').animate({
'left' : '-=100%' //moves left
});
}
if ( slide == '1') {
}
if ( slide == '2') {
$('#main_div_wide_wrapper').animate({
'left' : '+=100%' //moves left
});
}
if ( slide == '3') {
$('#main_div_wide_wrapper').animate({
'left' : '+=200%' //moves left
});
}
if ( slide == '4') {
$('#main_div_wide_wrapper').animate({
'left' : '+=300%' //moves left
});
}
});//end about
$('#services').click(function(event) {
event.preventDefault();
var position = $('#main_div_wide_wrapper').position().left;
var width = $( document ).width();
var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;
if ( slide == '0') {
$('#main_div_wide_wrapper').animate({
'left' : '-=200%' //moves left
});
}
if ( slide == '1') {
$('#main_div_wide_wrapper').animate({
'left' : '-=100%' //moves left
});
}
if ( slide == '2') {
}
if ( slide == '3') {
$('#main_div_wide_wrapper').animate({
'left' : '+=100%' //moves left
});
}
if ( slide == '4') {
$('#main_div_wide_wrapper').animate({
'left' : '+=200%' //moves left
});
}
});//end services
$('#designs').click(function(event) {
event.preventDefault();
var position = $('#main_div_wide_wrapper').position().left;
var width = $( document ).width();
var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;
if ( slide == '0') {
$('#main_div_wide_wrapper').animate({
'left' : '-=300%' //moves left
});
}
if ( slide == '1') {
$('#main_div_wide_wrapper').animate({
'left' : '-=200%' //moves left
});
}
if ( slide == '2') {
$('#main_div_wide_wrapper').animate({
'left' : '-=100%' //moves left
});
}
if ( slide == '3') {
}
if ( slide == '4') {
$('#main_div_wide_wrapper').animate({
'left' : '+=100%' //moves left
});
}
});//end designs
$('#contact').click(function(event) {
event.preventDefault();
var position = $('#main_div_wide_wrapper').position().left;
var width = $( document ).width();
var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;
if ( slide == '0') {
$('#main_div_wide_wrapper').animate({
'left' : '-=400%' //moves left
});
}
if ( slide == '1') {
$('#main_div_wide_wrapper').animate({
'left' : '-=300%' //moves left
});
}
if ( slide == '2') {
$('#main_div_wide_wrapper').animate({
'left' : '-=200%' //moves left
});
}
if ( slide == '3') {
$('#main_div_wide_wrapper').animate({
'left' : '-=100%' //moves left
});
}
if ( slide == '4') {
}
});//end contact
});
</script>
How can I get the javascript to work when in another file?
<script>tags out of the .js file...