GRAF 5021 - JQuery
week 2
Today:
- Calling Selectors (putting together some of what we learned last week)
- Using Toggle
- Understanding and using variables
- Creating an if else statement
- Using the load method
download, unzip, and define as your local folder in DW
Linking to NEWEST JQUERY Library:
http://code.jquery.com/jquery-latest.js
Lesson 1
Set up your html page
Open the index.html provided
From the CSS panel, link to the external CSS file named style.css
Also link to the external jQuery js file:
Insert>HTML>Scripts Objects>Script ...then browse for the "jquery-1.3.2.min.js" file
Html Flow
Coding the scripts.js file
Action one
Create a new js file and save it as scripts.js in your main root.
In the scripts.js we'll start with the document ready code:
$(function() {
});
$(function() {
$("li.action-one").click(function(){
});
});
- get the li, with the class "action-one"
- then when it's click, preform a function
now add the function:
$(function() {
$("li.action-one").click(function(){
$("#wrapper").animate({
)};
});
});
- get the "wrapper", and animate...
$(function() {
$("li.action-one").click(function(){
$("#wrapper").animate({
width: "300px"
});
});
});
- this will change the width of the wrapper to 300px
now test it. run it in the browser...and click the action one link
Action two - Toggle (display none - display block)
copy the following:
$("li.action-one").click(function(){
$("#wrapper").animate({
width: "300px"
});
});
and paste it below itself
Change action-one to action-two, and remove the animate, with property and value:
$("li.action-two").click(function(){
});
and added the jQuery action:
$("li.action-two").click(function(){
$('p').toggle();
});
- this toggle will make the two paragraphs we have visible or hidden
test it
Action three
again, recycle the code:
$("li.action-one").click(function(){
});
change the action-one to action-three. and add the following jQuery action:
$("li.action-three").click(function(){
$('#header').slideUp();
});
finished, it should work/look like this
Lesson 2
This is the current js code we're using:
$(function() {
$("li.action-one").click(function(){
$("#wrapper").animate({
width: "300px"
});
});
$("li.action-two").click(function(){
$("p").toggle();
});
$("li.action-three").click(function(){
$("#header").slideUp();
});
});
Let's try toggling the last function - slideUp:
$("li.action-three").click(function(){
$("#header").slideToggle();
});
Test it. Pretty cool! As a designer, think of the possibilities!
Variables / If Else
What if you want to toggle the first action which changes the size of the wrapper....well you can't toggle the animate method, but you can accomplish this with a simple if else statement, and some variables.
A variable's purpose is to store information so that it can be used later. A variable is a symbolic name that represents some data that you set (expressions or values)
Variables are written like this:
var name=value;
var = declares a variable, name = the name you're giving the variable, value = the initial value you want the variable to have.
- Variable names are case sensitive (y and Y are two different variables)
- Variable names must begin with a letter or the underscore character
At the start of your js, add the following variable:
var pageWidth = 'wide';
$(function() {
$("li.action-one").click(function(){
$("#wrapper").animate({
width: "300px"
});
});
$("li.action-two").click(function(){
$("p").toggle();
});
$("li.action-three").click(function(){
$("#header").slideUp();
});
});
If you run this, it will produce nothing new. We're just saying that's the default.
Now lets put in an if else statement to create the toggle effect.
$(function() {
var pageWidth = 'wide';
$("li.action-one").click(function(){
if (pageWidth == 'wide') {
$("#wrapper").animate({
width: "300px"
});
pageWidth = 'narrow';
} else {
$("#wrapper").animate({
width: "500px"
});
pageWidth = 'wide';
}
});
$("li.action-two").click(function(){
$("p").toggle();
});
$("li.action-three").click(function(){
$("#header").slideUp();
});
});
- the operator == means "is equal too"
So in english....if (when you click the button) the wrapper is wide (it's initial size), then animate it to 300px - AND - make pageWidth now "narrow". If it's not wide (it's initial value), then animate it back to 500px, and change the value to "wide".
Load method
...will Load HTML from a remote file and inject it into the DOM.
I've already provide you an html file to "load"..."load-content.html"
Let's first create an area to load some content...put an empty DIV (with the id "loadArea") at the bottom of the content, before the closing wrapper div tag:
<p>This is the initial paragraph to load in the page. </p>
<p style="display: none;">Now we've hidden that paragraph!</p>
<div id="loadArea"></div>
</div>
</body>
And make a new button for this action...copy this code:
<li class="action-three"><a href="#">Action #3</a></li>
paste below and change to this:
<li class="action-four"><a href="#">Action #4</a></li>
Now we have to add a new fuction...so after the 3rd li click function, enter (you can copy and paste):
$("li.action-four").click(function(){
$("#loadArea").load("load-content.html");
});
Test it!
This is really useful for loading anything, text, images, animations.
Hover instead of Click
We've used the click event many times, why don't we try hover:
$("li.action-three").hover(function(){
$("#header").slideToggle();
});
test it.
Now let's design something more interesting!
We're going to redesign the simple page we just created
Open the index.html
HTML Changes
Insert the logo image into the logo div
Insert the AD image to the Ad div. Hyperlink it, and the class .ad
It should now look like this:
<div id="ad"><a href="#" class="ad"><img src="ad.jpg" width="900" height="356" /></a></div>
After the nav div, add the following to the html flow:
<div id="content">
<h3>Welcome! This is some filler type, blah blah blah. :) </h3>
<div id="loadArea"></div>
</div>
CSS Additions
#content {
padding: 25px 300px 25px 25px;
font-family: Tahoma, Geneva, sans-serif;
color: #413827;
}
#loadArea {
padding-top: 20px;
}
#loadArea img {
border: 5px solid #B5C34F;
margin-top: 0px 20px 20px 0px;
}
#loadArea a {color:#58531E; text-decoration:none;}
#loadArea a:visited {color:#58531E; text-decoration:none;}
#loadArea a:hover {color:#B5C34F; text-decoration:none;}
And finally, create your external JS file:
$(function() {
$(".ad").click(function(){
$("#ad").slideToggle();
});
$("li.home").click(function(){
$("#loadArea").load("home-content.html");
});
$("li.portfolio").click(function(){
$("#loadArea").load("portfolio-content.html");
});
$("li.contact").click(function(){
$("#loadArea").load("contact-content.html");
});
});
The last thing to create is the portfolio content - we'll do that together in class.