I have tried numerous solutions for my issue, but none seem to work.
When testing in JSFiddle, the code works perfectly due to automatic onload support.
However, when I open the same HTML file locally in Chrome/IE/FireFox, the layout is correct but the JavaScript fails to execute.
I've verified my folder structure multiple times and it's all set up correctly.
The .js script is declared at the end of the HTML document just before the closing tag.
Oddly, an onclick function within the HTML opens a new window successfully, but the same function linking to the JS script doesn't work.
Just to mention, I'm using Sublime Text 2 for coding purposes.
Although the cursor changes when hovering over an icon on the webpage, indicating it's clickable, the image slider remains inactive.
Here is a snippet of the HTML:
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="warSupport.css" rel="stylesheet">
<link href="warMain.css" rel="stylesheet">
</head>
/ Section affected by JavaScript code /
<div class="slider-nav"> <a href="#" class="arrow-prev"><img src="./Images/Buttons/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul> <a href="#" class="arrow-next"><img src="./Images/Buttons/arrow-next.png"></a>
</div>
/ End of HTML Document /
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="warCode.js"></script>
</body>
</html>
Javascript Code
var main = function () {
$('.arrow-next').click(function () {
var curSlide = $('.active-slide');
var nexSlide = curSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nexSlide.length == 0) {
nexSlide = $('.slide').first();
};
if (nextDot.length == 0) {
nextDot = $('.dot').first();
}
curSlide.fadeOut(600).removeClass('active-slide');
nexSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function () {
var curSlide = $('.active-slide');
var prevSlide = curSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length == 0) {
prevSlide = $('.slide').last();
}
if (prevDot.length == 0) {
prevDot = $('.dot').last();
}
curSlide.fadeOut(500).removeClass('active-slide');
prevSlide.fadeIn(500).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
CSS Code for Affected HTML Portion
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family:'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family:'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: center;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family:"HelveticaNeueMdCn", Helvetica, sans-serif;
font-family:'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
Your assistance would be greatly appreciated.