Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Michael Matzner
Michael Matzner
12,651 Points

trying to get jquery to run on sublime text 2

having trouble running jquery on sublime text 2... already have the code written in another js file and cant seem to get it to connect with my html file my script tags look like this in my html

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="style.js" type="text/javascript" charset="utf-8"></script>

I can also tell that the js (jquery file) isn't active because half of the text in the file is white... like sublime text is unable to recognize it. Do I need to download a plug in for jquery? Any advice or insight would be greatly appreciated. Thanks.

Will Berlanga
Will Berlanga
18,825 Points
Will Berlanga
Will Berlanga
18,825 Points

Make sure that the 'style.js' file is at the same level as the 'index.html' page. If your javascript file is at a different level you need to ensure that the script tag navigates to that file properly.

13 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Make sure your !DOCTYPE tag has the opening angle bracket ( < ), and remove the whitespace, just to clean it up a bit:

<!DOCTYPE html>

Remove the extra space between the equals sign and double quotes for the last list item in the nav:

<li><a href="contact.html" class="selected">PHOTOGALLERY</a></li>

Remove the #overlay div from the HTML file, since you will add it with jQuery/JavaScript:

<!-- <div id="overlay"></div> -->

In your JavaScript file, you need to have a set of quotes around the div HTML you're creating (use single quotes if you use double quotes for the HTML attributes):

var $overlay = $('<div id="overlay"></div>');
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

And remove the extra closing body tag as others have stated. The closing body tag should come right before the closing html tag, which should be the last thing in the file.

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi.

You want to get the syntax coloring in Sublime or do you want the scripts to be run in the browser?

For syntax coloring there should be a plugin but if you want to run jQuery in a browser you have to be careful for typos.

You don't need the migrate file ( line 2 of your code) and on line 3 omit the type and charset declarations.

If you post your whole code it would help.

And you have to save the file as .js for coloring to be applied.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Are you including these script tags in the head element? If so, you should move these to just before the closing body tag instead.

Colton Ehrman
PLUS
Colton Ehrman
Courses Plus Student 5,859 Points
Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

You need to put http:// in your src I believe

Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

Any sources that are coming from the internet need to start with http://

Will Berlanga
Will Berlanga
18,825 Points
Will Berlanga
Will Berlanga
18,825 Points

The syntax he has will work fine if he is trying to access the cdn via http, but if he is trying to access https he needs to include the protocol.

Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

He doesn't have http://

Will Berlanga
Will Berlanga
18,825 Points
Will Berlanga
Will Berlanga
18,825 Points

He doesn't need it if the protocol is http. The syntax '//' will work fine for 'http'.

Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

Well // didn't work for me when I tried it, then I added http:// and it worked

Michael Matzner
Michael Matzner
12,651 Points
Michael Matzner
Michael Matzner
12,651 Points

My tags are included at the bottom of my html.. I used the coding from a jquery video on treehouse. I wanted to see how a light box would look on the photo gallery page for the site im trying to build.

            !DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> POSH|HOME </title>
    <link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="main1.css">
    <link rel="stylesheet" href="responsive1.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>POSH|HOME</h1>
        <h2>Classic Style|Modern Sensibility</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">POSH|HOME</a></li>
          <li><a href="about.html">ABOUT</a></li>
          <li><a href= "contact.html" class="selected">PHOTOGALLERY</a></li>
        </ul>
      </nav>
    </header>
  </body>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="12009628_571153193037101_3613999151111236763_n.jpg">
              <img src="12009628_571153193037101_3613999151111236763_n.jpg" alt="">
              <p>WELCOME!</p>
            </a>
          </li>
          <li>
            <a href="12074974_572218049597282_7791408291723159876_n.jpg">
              <img src="12074974_572218049597282_7791408291723159876_n.jpg" alt="">
              <p>WELCOME!</p>
            </a>
          </li>
          <li>
            <a href="10805606_571157289703358_6203016867655188827_n.jpg">
              <img src="10805606_571157289703358_6203016867655188827_n.jpg" alt="">
              <p>WELCOME!</p>
            </a>
          </li>
          <li>
            <a href="11998829_565449346940819_4879705882666812091_n.jpg">
              <img src="11998829_565449346940819_4879705882666812091_n.jpg" alt="">
              <p>WELCOME!</p>
            </a>
          </li>
          <li>
            <a href="12046997_571154979703589_8033451938063726675_n.jpg">
              <img src="12046997_571154979703589_8033451938063726675_n.jpg"alt="">
              <p>WELCOME!</p>
            </a>
          </li>
          <li>
            <a href="12142012_695662227201359_599526176_n.jpg">
              <img src="12142012_695662227201359_599526176_n.jpg"alt="">
              <p>WELCOME!</p>
            </a>
          </li>
        </ul>
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="style.js" type="text/javascript" charset="utf-8"></script>
        <div id="overlay"></div>
      </section>
      <footer>
        <a href="https://www.instagram.com/posh_home_louisville"><img src="images.jpg" alt="Instagram Logo" class="social-icon"></a>
        <a href="https://www.facebook.com/poshhomelouisville"><img src="imgres.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 POSH|HOME.</p>
      </footer>
    </div>
  </body>
</html>

            var $overlay = $(<div id="overlay"></div>);
var $image = $("<img>");

$overlay.append($image);

$("body").append($overlay);




$("#gallery a").click(function(event){
    event.preventDefault();
    var imageLocation = $(this).attr("href");

    $image.attr("src", imageLocation);


    $overlay.show();



});

$overlay.click(function(){

    $overlay.hide();
})

They are two different files and the jquery is saved as a js file. But code isnt working.

Will Berlanga
Will Berlanga
18,825 Points
Will Berlanga
Will Berlanga
18,825 Points

You close your body tag twice in the above code.

Colin Marshall
Colin Marshall
32,861 Points

Get rid of the first closing body tag, and move the script files to be the very last elements before the closing body tag or else jQuery won't have access to the elements that come after your closing tags, including the overlay div.

Colton Ehrman
PLUS
Colton Ehrman
Courses Plus Student 5,859 Points
Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

Michael Matzner you need to put http:// in front of your scripts srcs like so 

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Colin Marshall
Colin Marshall
32,861 Points

If he is viewing the file locally in the browser (with a url like file://...) with no local server running then you are correct Colton. However, if he is running the file on a server then he does not need the http/https.

Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

Oh ok. Thanks Colin Marshall! Didn't know that.

Colin Marshall
Colin Marshall
32,861 Points

No problem, I just learned it myself. I have seen CDN's that leave off the http in their recommended code for including their scripts and was curious about why. Google Protocol Relative URL for more info.

Michael Matzner
Michael Matzner
12,651 Points
Michael Matzner
Michael Matzner
12,651 Points

no luck yet. tried the things ^^above^^ with no success. im very new to everything so please be patient with me. still havent solved the issue. is it possible for some of my css to override jquery?

Colin Marshall
Colin Marshall
32,861 Points

Are you getting errors in the console? If so, post them up.

Will Berlanga
Will Berlanga
18,825 Points
Will Berlanga
Will Berlanga
18,825 Points

Your css isn't going to prevent your JavaScript from working. Try adding

alert("Jquery is loading!");

to your javascript file this will give an obvious indication your file is loading.

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Try a different approach:

First change your head tag to this: 

  <head>
    <meta charset="utf-8">
    <title> POSH|HOME </title>
    <link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="main1.css">
    <link rel="stylesheet" href="responsive1.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="style.js"></script>
  </head>

Then write your jQuery code like this:

$(document).ready(function(){

var $overlay = $(<div id="overlay"></div>);
var $image = $("<img>");

$overlay.append($image);

$("body").append($overlay);

$("#gallery a").click(function(event){
    event.preventDefault();
    var imageLocation = $(this).attr("href");

    $image.attr("src", imageLocation);

    $overlay.show();
});

$overlay.click(function(){
    $overlay.hide();
});

});

This will make sure that the document (web page) is fully loaded before the jQuery kicks in.

Try it and provide some feedback.

Michael Matzner
Michael Matzner
12,651 Points
Michael Matzner
Michael Matzner
12,651 Points

i looked over the jquery code in the console and on line 2 it says Uncaught SyntaxError: Unexpected token< in reference to 

var $overlay = $(<div id="overlay"></div>);
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

See my answer above, you need:

var $overlay = $('<div id="overlay"></div>');

If that fixes it, please mark it as 'best answer'.

Michael Matzner
Michael Matzner
12,651 Points
Michael Matzner
Michael Matzner
12,651 Points

I have tried all the suggestions above with no luck yet. Thanks for everyones input and helpful tips on how to improve my code.. I really appreciate it.

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Oh ok I haven't noticed that :).

Michael Matzner
Michael Matzner
12,651 Points
Michael Matzner
Michael Matzner
12,651 Points

it was a combination of things... thank you Iain for the suggestion about wrapping the whole div element that helped... Also thanks Colton for the suggestion about adding the http: infront of the jquery src code. And thanks Colin for the suggestion about viewing my jquery code in the console. I really appreciate everyones input and help. Issue fixed. Thanks for everyones help.

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Hey Michael have you tried with:

var $overlay = $("#overlay");

???

Julian Aramburu
Julian Aramburu
11,368 Points

Also you should change:

var $image = $("<img>");

to:

var $image = $("img");
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

$overlay is meant to be a new HTML element, not an existing one, so using the hash symbol to select an element with that ID isn't correct. Same thing with removing the angle brackets for the img tag, that means you're selecting all the img tags, not creating a new, blank one.