Home Download Buy Blog Forum Support

How to add Jquery?

How to add Jquery?

Postby MichaelT on Sat Aug 11, 2012 8:16 pm

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=Tjz7zVp_U8o which basically told me to get the JQ package from a github page then add it to my package folder.

Now – if that's right; how do I add it to an HTML document?

Script is:


Code: Select all
<script type="text/javascript">
        // The social div
    var $homeDiv;
   
    $(document).ready(function() {
        $homeDiv = $('.home');
    });
   
    $(window).scroll(function() {
        //Get scroll position of window
        var windowScroll = $(this).scrollTop();
       
        $homeDiv.css({
            'opacity' : 1 - windowScroll / 570,
            'background-position-y' : -windowScroll / 10
        });
    });
</script>


Do I need to add something in between my <head>?

Thanks in advance,

Michael
MichaelT
 
Posts: 6
Joined: Sat Aug 11, 2012 8:09 pm

Re: How to add Jquery?

Postby agibsonsw on Sun Aug 12, 2012 12:16 am

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: Select all
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script type="text/javascript">
    // The social div
    var $homeDiv;
   
    $(document).ready(function() {
        $homeDiv = $('.home');

        $(window).scroll(function() {
            //Get scroll position of window
            var windowScroll = $(this).scrollTop();
           
            $homeDiv.css({
                'opacity' : 1 - windowScroll / 570,
                'background-position-y' : -windowScroll / 10
            });
        });
    });
   
</script>


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.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: How to add Jquery?

Postby MichaelT on Sun Aug 12, 2012 8:48 am

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

Code: Select all
<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?
MichaelT
 
Posts: 6
Joined: Sat Aug 11, 2012 8:09 pm

Re: How to add Jquery?

Postby agibsonsw on Mon Aug 13, 2012 12:42 am

Code: Select all
<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:

Code: Select all
<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.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: How to add Jquery?

Postby MichaelT on Mon Aug 13, 2012 11:27 am

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:

Code: Select all
<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: Select all
<script type="text/javascript">
    // The social div
    var $homeDiv;
   
    $(document).ready(function() {
        $homeDiv = $('.home');

        $(window).scroll(function() {
            //Get scroll position of window
            var windowScroll = $(this).scrollTop();
           
            $homeDiv.css({
                'opacity' : 1 - windowScroll / 570,
                'background-position-y' : -windowScroll / 10
            });
        });
    });
   
</script>


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.
MichaelT
 
Posts: 6
Joined: Sat Aug 11, 2012 8:09 pm

Re: How to add Jquery?

Postby GMB on Mon Aug 13, 2012 5:33 pm

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.
GMB
 
Posts: 19
Joined: Mon Aug 13, 2012 5:05 pm

Re: How to add Jquery?

Postby agibsonsw on Tue Aug 14, 2012 12:16 am

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 ;)
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: How to add Jquery?

Postby MichaelT on Tue Aug 14, 2012 3:31 pm

GMB wrote: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.



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?
MichaelT
 
Posts: 6
Joined: Sat Aug 11, 2012 8:09 pm

Re: How to add Jquery?

Postby GMB on Tue Aug 14, 2012 4:01 pm

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.
GMB
 
Posts: 19
Joined: Mon Aug 13, 2012 5:05 pm


Return to Technical Support

Who is online

Users browsing this forum: Exabot [Bot], jbrooksuk and 22 guests