Javascript not loading in HTML document

Question

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.

@Thangadurai wow embarrassingly to say, no I haven't...I just checked in FireFox, first error comes up as "Reference Error: $ is not defined" which says this is the cause of it "$(document).ready(main);" But I don't understand how because as I was taught via codecademy, that's how its suppose to be written, and at the end of the .js document — SorryEh
– SorryEh, Commented Jan 8, 2015 at 4:29
there def seems to be a problem with your jquery import- nothing is 404ing? have you tried just typing '$' at the js console and seeing what is output? — stealthwang
– stealthwang, Commented Jan 8, 2015 at 4:32
@stealthwang in the error console for FireFox just shows the $ as not defined :/, and do I type $ where it says CODE in firefox in the error console? did that and got ReferenceError:$ is not defined----javascript:%20$ and I got chrome://global/content/viewSource.js have no idea what that means. — SorryEh
– SorryEh, Commented Jan 8, 2015 at 4:42

stealthwang · Accepted Answer · 2015-01-08 04:48:42Z

1

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

answered Jan 8, 2015 at 4:48

stealthwang

9546 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

SorryEh Over a year ago

tried removing one, then the other, then both. Unfortunately no luck.

stealthwang Over a year ago

Are you simply accessing this file from your filesystem with your browser? you could be running into same origin policy. Loading html from the filesystem has very restrictive policies for how linked scripts are executed. I'd suggest setting up a local testing webserver.

SorryEh Over a year ago

I got it!....instead of putting it at the end of the script, I put it in the header, but this time I created a jquery code file and made it a local thing, and used <script src="jquery-2.1.3.min.js"></script> in the header and it kinda works lol the buttons work now but not the way JSFiddle had them work lol...its like the jscode is broken... jsfiddle.net/esdskya0/5 if you expand the result page, you'll see the arrows, when you click them, the cycle keeps going. but on my local host using the browser, it stops at the last bullet and i cant click prev arrow or next arrow.

stealthwang Over a year ago

If its local now it could've very well been related to same-origin. Glad to see you're making progress.

SorryEh Over a year ago

thanks so much stealth, this was driving me insane for literally 2 hrs LOL....finally i can continue to make my Clan website!

Collectives™ on Stack Overflow

Javascript not loading in HTML document

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related