JQuery for web designers

From Knowledge Kitchen
Jump to navigation Jump to search


This document outlines a method for using the JQuery Javascript "framework"] without requiring an understanding of computer programming. A separate document deconstructs the syntax of JQuery for people who are already familiar with basic programming concepts.

This document outlines how you can copy-and-paste intimidating code, while changing only small unintimidating little bits of it, to have JQuery do some very fancy things for your web sites.


Organize your files

Unless you have a good reason to do otherwise, keep your files organized in the following way:

  • make a folder/directory specifically for the project
  • put all HTML files in this main folder
  • put all CSS files in a sub-folder named "css"
  • put all Javascript files in a sub-folder named "js"
  • put all image files in a sub-folder named "images"
  • put all video files in a sub-folder named "videos"
  • put all audio files in a sub-folder named "audio"
  • follow regular file naming conventions for all files
  • repeat this for formula all projects

This should be considered basic computer file hygiene.

Download JQuery

  1. Go to jquery.com and download the latest compressed (or 'minified') version.
    • JQuery is nothing but a javascript code file
    • The minified version has all unnecessary spaces, tabs, and line breaks removed in an effort to minimize the file size.
    • Your browser may show you the code, rather than automatically download it... if so, save the file using your browser's File->Save Page menu option.

Install JQuery

  1. Move the file you downloaded into a suitable location for javascript files.
    • A suitable location is most likely a sub-folder named "js" in the folder where your HTML file will "live".
    • Once moved to a suitable place, you will never need to touch this file again
  2. In your HTML code, put a script tag in the head section that instructs the browser to load the JQuery Javascript file.
  3. Next, add another script tag for a custom Javascript file that you will make. Let's call it "custom.js"
<head>
    <title>JQuery Example</title>
    <meta charset="utf-8" />
    <!-- make sure the path below is correct for the version you downloaded and the folder you placed it into-->
    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
</head>

Set up your custom Javascript file

Use a decent text editor to make that file named "custom.js" in the "js" folder. And copy-and-paste the following code into it. As the comments in the code suggest, everything else you will put into this file later on will go between that first and last line of code.

custom.js:

$(function() {
    //everything else you put into this file goes below here


    //everything else you put into this file goes above here
});

Add interactive behaviors

In the middle of the code you created when you set up your custom Javascript file, you can now add whatever interactive behaviors you want your page to have. These behaviors follow a standardized pattern. You set up what are called "event handlers", meaning you instruct your Javascript code to wait for a particular kind of event to occur (a click on a particular element, a mouseover, a mouseout, a key to be pressed, etc), and then do something interesting when that event occurs.


Do something when a user clicks an element on the page

Let's say that you have a button in your HTML code that has an id "my_button":

    <input type="button" id="my_button" value="Click me!" />

In your custom Javascript file, you can add an event handler for a click event.

  • Notice the CSS-style selector for input#my_button, which selects for the input element with the id "my_button".
  • Notice also the word "click", which tells Javascript to wait for a click event to occur on this element
    $("input#my_button").click(function() {
        //everything you want to have happen when the button is clicked goes below here
    
        //everything you want to have happen when the button is clicked goes above here
    });

Do something when a user hovers the mouse over an element on the page

Let's say that you have a paragraph in your HTML code that has an id "my_paragraph":

    <p id="my_paragraph">
        Viennese, extraction chicory ut kopi-luwak ristretto froth instant ristretto percolator. 
        As, single shot dripper a doppio americano wings.
    </p>

In your custom Javascript file, you can add an event handler for a mouseover event.

  • Notice the CSS-style selector for p#my_paragraph, which selects for the paragraph element with the id "my_paragraph".
  • Notice also the word "mouseover", which tells Javascript to wait for a mouseover event to occur on this element
  • Lastly, notice that this code looks very much like the click event handler above, with only a few things changed
    $("p#my_paragraph").mouseover(function() {
        //everything you want to have happen when the mouse goes over the paragraph goes below here
    
        //everything you want to have happen when the mouse goes over the paragraph goes above here
    });

Do something when a user hovers the mouse off of an element on the page

Let's say that you have a paragraph in your HTML code that has an id "my_paragraph":

<p id="my_paragraph">
    Viennese, extraction chicory ut kopi-luwak ristretto froth instant ristretto percolator. 
    As, single shot dripper a doppio americano wings.
</p>

In your custom Javascript file, you can add an event handler for a mouseout event.

  • Notice the CSS-style selector for p#my_paragraph, which selects for the paragraph element with the id "my_paragraph".
  • Notice also the word "mouseout", which tells Javascript to wait for a mouseout event to occur on this element
  • Lastly, notice that this code looks almost identical to the "mouseover" example above, with just the word "mouseover" changed to :mouseout"
    $("p#my_paragraph").mouseout(function() {
        //everything you want to have happen when the mouse goes out of the paragraph goes below here
    
        //everything you want to have happen when the mouse goes out of the paragraph goes above here
    });

Do something when a user submits a form

Let's say that you have a form in your HTML code that has an id "my_form":

<form id="my_form">
    <!-- imagine you had some form inputs here -->
</form>

In your custom Javascript file, you can add an event handler for a form submit event.

  • Notice the CSS-style selector for form#my_form, which selects for the form element with the id "my_form".
  • Notice also the word "submit", which tells Javascript to wait for a submit event to occur on this element
  • Lastly, notice that this code looks almost identical to all the other examples above, with a few small changes
    $("form#my_form").submit(function(e) {
        //everything you want to have happen when the form is submitted goes below here
    
        //everything you want to have happen when the form is submitted goes above here
        e.preventDefault(); //this cancels the normal behavior of forms
    });

Make changes to the content on the page

Once you have the event handlers set up so that your code is set up to do something when a particular event occurs, the next step is to decide what to do. Here are some common changes you can make to the content on the page.

Make an element disappear

Let's say there's an image of a donkey in the HTML:

<img id="my_donkey" src="images/donkey.jpg" />

You can use JQuery code in your custom Javascript file to make the donkey image disappear like so:

$("img#my_donkey").hide();

Alternatively, you can make it slowly fade away before it disappears entirely:

$("img#my_donkey").fadeOut();


Make an element appear

Let's say there's an image of a donkey in the HTML:

<img id="my_donkey" src="images/donkey.jpg" />

And let's further say that the donkey is hidden by default by CSS code:

img#donkey {
    display: none;
}

You can use JQuery code in your custom Javascript file to make the donkey image appear like so:

$("img#my_donkey").show();

Alternatively, you can make it slowly fade in slowly

$("img#my_donkey").fadeIn();

Change the text nested inside an element

Let's say there's a paragraph element with some text nested inside of it:

<p id="my_paragraph">
    Viennese, extraction chicory ut kopi-luwak ristretto froth instant ristretto percolator. 
    As, single shot dripper a doppio americano wings.
</p>

You can use JQuery code in your custom Javascript file to overwrite the text and replace it with new text:

$("p#my_paragraph").text("Tri-tip prosciutto drumstick swine");

Change the HTML elements nested inside an element

Let's say there's an article element with some HTML nested inside of it:

<article id="my_article">
    <h2>Viennese, extraction chicory</p>
    <p>
        Ut kopi-luwak ristretto froth instant ristretto percolator.
    </p>
</article>


You can use JQuery code in your custom Javascript file to overwrite that HTML and replace it with new HTML:

$("article#my_article").html("<h2>Tri-tip prosciutto</h2><p>Pork chop tri-tip jowl, frankfurter pork loin</p>");

Change the style of an element

Let's say there's a paragraph element with some text nested inside of it:

<p id="my_paragraph">
    Viennese, extraction chicory ut kopi-luwak ristretto froth instant ristretto percolator. 
    As, single shot dripper a doppio americano wings.
</p>

You can use JQuery code in your custom Javascript file to change any CSS styles of this element:

$("p#my_paragraph").css("color", "green");
$("p#my_paragraph").css("background-color", "orange");
$("p#my_paragraph").css("opacity", "0.5");


Swap out one image for another

Let's say there's an image of a donkey in the HTML:

     <img id="my_donkey" src="images/donkey.jpg" />

You can use JQuery code in your custom Javascript file to swap out the donkey image for an image of a mule:

  • Of course this code assumes you have an image of a horse stored in the same folder as the image of the donkey:
$("img#my_donkey").attr("src", "images/mule.jpg");


Animate or move an element

Let's say there's an image of a donkey in the HTML:

    <img id="my_donkey" src="images/donkey.jpg" />


And let's further say that the donkey has the following position attribute set in the CSS code:

img#donkey {
    position: relative;
}


You can use JQuery code in your custom Javascript file to move and/or resize the donkey with an animation:

$("img#donkey").animate({
    "width": "200px",
    "top": "10px",
    "left": "200px"
});


What links here