Sublime Forum

How to add Jquery?

#1

Hello,

Apologise if I sound such a noob.

I have a script which I’d like to add. However, I’m not sure whether ST2 has jquery installed already. I followed this video: http://www.youtube.com/watch?v=

Do I need to add something in between my ?

Thanks in advance,

Michael

0 Likes

#2

I’m not sure if this is a coding question or not(?).

Installing a jQuery package will usually provide completions for jQuery methods and/or syntax highlighting. If installed you normally might select jQuery by clicking the syntax list at the bottom-right corner of your screen. However, this will usually work with separate .js files, not necessarily with code embedded in an HTML file.

If it’s a coding question then you might be better off placing your scroll() event inside the document.ready method. And you need to include the jQuery library firstly:

[code]

[/code]

I think ‘background-position-y’ is only available in more recent versions of jQuery, and it may not work (I’ve just read…) in FireFox. I think there are plug-ins specifically for ‘background-position-x/y’.

Added; Yes, put the whole of this code within the ‘head’ tag.

0 Likes

#3

Sorry if my question wasn’t clear.

I think you answered it with telling me to add any jquery in between the head tags.

I wasn’t sure if sublime had the jq package pre-installed.

For example - in dreamweaver you have to download it, the. Add it to a folder. Then add a bit of script in between your head tags.

Are you suggesting I add

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>

In between my head – then this allows me to add any jquery function?

0 Likes

#4

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>

This code attaches the jQuery library from a central resource maintained by Google - called a CDN.

You can, if you prefer, download the jQuery library and save it in a folder of your web site(s), adding
code similar to the following in your head tag:

<script type="text/javascript" src="yourjsfolder/jquery.something.js"></script>

BTW If you are coming from **DreamWeaver you may need to revise your expectations of Sublime Text 2. It is not a full-blown IDE. There are a large number of packages (plug-ins) you can install via Package Control ** to assist with your programming, but it will not “hold your hand” in the way that DW does.

0 Likes

#5

I suppose what I’m asking is can I do a preview of the applied JQuery – like Dreamweaver.

For example; if I added this into my head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>

Then applied some jquery – with the relevant markup etc:

[code][/code]

Then press CMD + B (note: I have the Google Chrome view in browser package) to do a live preview, but the Jquery doesn’t seem to be working.

Furthermore – if this helps – I got something similar working here http://cargocollective.com/btatest but I want to move out of using a CMS (I’m trying to learn programming and I’m picking up bad habits) and start from scratch, I was talking about the fade on scroll and how the white text div scrolls over the image.

0 Likes

#6

Michael – Just switched to Sublime Text myself (having started with DreamWeaver and spent a couple of years using TextMate), and also just created my own site having used Cargo for a few years. If I may, let me recommend you install the Nettus + Fetch package, using Package Control and use it to access the latest version of HTML 5 boilerplate. (See the tutorial here.) This will set you up with template pages for HTML, CSS, JS, etc., with all necessary links to jQuery and loads of other useful things. The jQuery effects should be visible when you view your pages in the browser. If they’re not, you’ve not set it up right. Working with the HTML 5 boilerplate, everything’s already set up for you and works right out of the proverbial box.

You should also consider installing Sublime SFTP, which you can use to upload and update your site. Another package I’ve found helpful is Sidebar Enhancements.

0 Likes

#7

When you are previewing in Chrome press the F12 function key and see if there are any error messages - check the bottom-right corner.

Added: I don’t receive any errors - but I haven’t put any content in the home-div yet :wink:

0 Likes

#8

[quote=“GMB”]Michael – Just switched to Sublime Text myself (having started with DreamWeaver and spent a couple of years using TextMate), and also just created my own site having used Cargo for a few years. If I may, let me recommend you install the Nettus + Fetch package, using Package Control and use it to access the latest version of HTML 5 boilerplate. (See the tutorial here.) This will set you up with template pages for HTML, CSS, JS, etc., with all necessary links to jQuery and loads of other useful things. The jQuery effects should be visible when you view your pages in the browser. If they’re not, you’ve not set it up right. Working with the HTML 5 boilerplate, everything’s already set up for you and works right out of the proverbial box.

You should also consider installing Sublime SFTP, which you can use to upload and update your site. Another package I’ve found helpful is Sidebar Enhancements.[/quote]

Thanks. That’s pretty cool.

So boilerplate sets up a HTML document and all I need to do is add my content? And that has links to Jquery etc?

Every time I close ST2 then reopen it; the sidebar doesn’t show all the folders (Following a tutorial I placed them all in a folder titled ‘Package_handling’). Is there away so that on opening the app it sidebar with that package folder open?

0 Likes

#9

I believe you need to create, name and save your folders as projects. When you do so, ST2 remember even the pages you have open and will open them each time you switch to the project. Do a basic internet search on Sublime Text, create project, save project, etc., and you’ll find info on how to do so.

0 Likes