SCRIPTING THE WEB – PART 2 -
INTRODUCTION TO JQUERY – EXERCISE 5 - CHANGING CSS PROPERTIES DYNAMICALLY
Although the anonymous function you created in the preceding exercise toggles the display of the paragraphs, the effect needs to be refined. The mouse pointer needs to indicate that the headings are clickable, and the arrows alongside each heading should flip down when the related paragraph is displayed. Let's fix those items.
1. You will use the previously created folder in your MySites folder called Scripting the Web - Part 2.
2. If necessary, define a new Dreamweaver site called Scripting the Web - Part 2 and set the root folder as the Scripting the Web - Part 2 folder.
3. Continue working with the same page as before (jq_05.html).
4. To change the cursor to a hand pointer, you need to chain the css() method after the click() method. This is where an understanding of JavaScript syntax is essential when working with jQuery. Put the insertion point after the click() method's closing parenthesis. Use the guide below if you're not sure where it is.
5. Press Enter/Return to insert a new line. Then type a dot followed by css('cursor', 'pointer'). Dreamweaver CS5.5 continues providing code hints as you type.
The css() method takes two arguments - the name of the property and the value you want to assign to it.
The code now looks like this:
$(function() {
$('h2 + p').hide();
$('h2').click(function(e) {
$(this).next('p').toggle();
})
.css('cursor', 'pointer');
});
6. Save the page and test it in a browser. You'll see that the cursor now indicates that the headings are clickable.
The next task is to fix the headings' background images. To do so, you need to refer to the next paragraph again inside the anonymous function. When you need to refer to the same selection more than once, it is good practice to store the selection as a variable.
7. Amend the code like this:
$(function() {
$('h2 + p').hide();
$('h2').click(function(e) {
var para = $(this).next('p');
para.toggle();
})
.css('cursor', 'pointer');
});
This saves a reference to $(this).next('p') as para, and then applies the toggle() method to para. The effect is the same as before.
8. To change the background images, you need to create a condition that checks the display property of the subsequent paragraph. You used the css() method above with two arguments to set a CSS property. Using the method with just the property name as an argument gets the value of the property. So, the final version of the code looks like this:
$(function() {
$('h2 + p').hide();
$('h2').click(function(e) {
var para = $(this).next('p');
para.toggle();
if (para.css('display') == 'none') {
$(this).css('background-image', 'url(images/arrow-r.png)');
} else {
$(this).css('background-image', 'url(images/arrow-down.png)');
}
})
.css('cursor', 'pointer');
});
The condition checks the value of the paragraph's display property. If it's none, the paragraph is hidden. So, the code inside the first conditional block uses the css() method with two arguments to set the background-image property of the event target (the <h2> heading that was clicked). It's important to note that the url() value is relative to the current document, not to the style sheet. Dreamweaver CS5.5 helps you get the correct path through code hints. If the paragraph is hidden, arrow-r.png is used as the background image. Otherwise, arrow-down.png is used.
9. Save the page, and test it in a browser or Live View. The mouse pointer is converted to a hand when hovered over one of the headings, and the arrow flips down when an item is opened.
The heading and arrow now respond to the user's interaction.
As you have just seen, jQuery methods often perform different, but related roles when used with a different number of arguments. The css() method follows a common pattern. When used with a CSS property as a single argument, it gets the property's value. But when a second argument is supplied, it sets the value of the specified property. The attr() argument performs the same getter/setter role for the attributes of an HTML element.
A - Scripting the Web - Part 2 - Introduction to jQuery - Exercise 5 - Changing CSS Properties Dynamically Page 3 of 3 Version 1