jQuery selectors and stylesheets exercise

Task 1

Download this page and open with Dreamweaver. Or right click and select "View Source", then cut and paste the code to Dreamweaver.

Task 2

Code a block of JavaScript which uses the jQuery css() method to alter a number of properties of this page.

Remember, in each case you are using jQuery to alter CSS properties so you will need to use CSS-style selectors and attributes. Notice that CSS attribute names are no longer hypenated as they are in CSS

  1. Change the fontFamily property of the <body> tag definition to "Georgia".
  2. Change the fontSize property of the <h1> tag definition to 40px.
  3. Change the backgroundImage, backgroundPositionX, backgroundPositionY and backgroundRepeat properties of the <div id="pagecontent"> tag definition. Aim to replace the "Sorry this site.." image with an image of your choice which should tile in both directions.
  4. Retrive the fontSize property of the <p>, <body>, <h1> and <pre> tag definitions. Check each value with an If block, if the size returned is "14px", change it to be "20px". If the returned value is anything other than "14px" leave it as it is.

Extensions

  1. Create a function which retrieves the existing value for the fontSize property of any <li> tags. Create another function which uses this first function to increase the fontSize property of the <li> tag by "2px" each time the button is clicked. The second button should decrease the size of the fontSize property each time it is clicked.

    You will need to turn values like "14px" (which is a string) into a numerical value before you can perform maths on it. You can use the following code which utilizes a regular expression and a new Number object to grab a numerical value from a string:

    // the variable "pixels" will contain the value 14 as a number
var pixels = "14px";
pixels = new Number(pixels.replace(/\D/ig,""));

  2. Amend the code in the page above in which you set the backgroundRepeat property. Set it now to "no-repeat".

    Create a function to extract the backgroundPositionX and backgroundPositionY properties of of the <div id="pagecontent"> tag definition.

    Create four buttons. Using a technique similar to that above add one button which make the background image move up by "2px" each time it is clicked. Add similar buttons to move the background image left, right and down, each by "20px" each time they are clicked.