CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SorryEh
SorryEh

Reputation: 928

Javascript not loading in HTML document

So I know there have been many of these, and I've gone through as many as I could.

it works in JSFiddle because fiddle is doing the onload automatically for me.

I open my html script on my local drive in Chrome/IE/FireFox thankfully the layout and colours are accurate but my Javascript does not load.

I have my folder structure done correctly I've triple checked.

I have declared my .js script at the end of my html document just before the tag.

I have tried using an onclick function to open a new window within the html document and it works

Tried same onclick function from html document to js document, doesnt work. I'm at a loss.

Now I'm sure it doesn't matter, but just incase it actually does. I'm using Sublime Text 2 for my coding.

My mouse does change into a hand when I hover over the Arrow on the webpage, so it does seem like it detects the arrow as a clickable icon/button, but the slide does not change to the next image.

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 of HTML that's to be 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">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</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;
}

thank you for your time.

Upvotes: 0

Views: 846

Answers (1)

stealthwang
stealthwang

Reputation: 954

It seems like you're importing jQuery twice from different CDNs at the end of your document there. That could be the problem.

Upvotes: 1

Related Questions