Modifying HTML attributes and CSS values

Learning Objectives By the end of this lecture, you should be able to: Select based on a class (as opposed to a tag or ID) Add, remove, and toggle CSS classes View and modify HTML attributes View and modify CSS values Distinguish between a class selector and a descendent selector

Quick Review: CSS Classes A CSS class is a collection of styles that are grouped together under a class name. A class is created either as an internal (embedded) style, or in an external style sheet. Here is an example of a class that I call ‘highlight’. It makes the text bold and italic, and makes the background yellow: .highlight { background-color:yellow; font-weight:bold; font-style:italic; } Recall that when creating a class, you must begin with a period. This tells the parser that what follows is the definition of a CSS class as opposed to, say, a contextual selector or the styles for an HTML tag (selector). You must also include this period when selecting a class using jQuery. However, when applying a class or when passing the class to various JavaScript functions, we do NOT include the period. Examples: Selecting a class in jQuery – note that we DO include the period: $('.highlight').hide(); This code selects every section to which the ‘highlight’ class has been applied (and hides it) In HTML, we apply a class using the class attribute. Note that we do NOT include the period: <p class="highlight">Text Text Text</p>

Working with Classes We have been focusing primarily on selecting items in jQuery based on their IDs: $('#main_content').doSomething(); However, do not forget that we can – and often will – select based on other things such as classes: Example: <input type="button" value="Hide Highlights on Page" onclick="$('.highlight').hide()" > This will hide ALL selections that have the highlight class applied. Remember that to select a class, you need a ‘.’ (period) instead of a # symbol. (Recall that the ‘#’ symbol tells jQuery that to search for an ID). Here is another example of finessing a selector: Let’s try and remove only those selections based on classes that are contained inside a specific tag: $('ul .emphasize').hide() //Will remove the tags with the emphasize class only when //those classes are located inside a ‘ul’ tag $('#errors .emphasize').remove() //Will remove the emphasize class only when present inside #errors section

Modifying HTML Attributes In a previous lecture, we explained how to select based on attributes. For example, we might select all hyperlinks that point to DePaul by typing: $('a[href*="depaul.edu"]') This will select all hyperlinks (the ‘a’ tag) that have the text ‘depaul.edu’ anywhere inside the href attribute. (Recall that the * character says to search ‘anywhere’). Now let’s talk about how we can use JS/JQ to change attributes. Examples of things you can do with/to attributes include: Add an attribute to a tag Remove an existing attribute from a tag Modify an existing attribute

Modifying HTML Attributes: Adding/Removing CSS Classes Suppose you have the following HTML: <div id="container" class="highlight emphasize someOtherClass" style="font-family:Arial;"> <!– Recall: It is possible to have multiple classes applied to a single tag --> <div id="errors"> <img src="errors_pic.jpg"> <h2>Errors Here…</h2> </div> Removing a class with the removeClass() function: Let’s begin by removing a class from the ‘container’ div tag. We will first select the desired element, and we will then invoke the removeClass() function. Because it is possible for a tag to have more than one class (as seen in the example above), we will need to specify the name of the particular class we want to remove. Here is the code: $('#container').removeClass('emphasize'); Note that when specifying a class as the argument to the removeClass() function, we do NOT include the period. (Recall that we only include the period in jQuery when we are selecting a class). Adding a class with the addClass() function: Let’s add a class called ‘emphasize’ to the ‘errors’ div tag: $('#errors').addClass('emphasize'); Again note that when applying a class as we are doing here, we do NOT include the period. The period is only used when creating a class or when selecting a class. Also note that the addClass() function does not remove any old classes. It simply adds on new ones. File: modifying_attributes.htm

Adding/Removing attributes, contd Example using an attribute selector: As you have just seen, you can apply a class to a group of tags using addClass(): $('a').addClass('hoverlink'); //applies the ‘hoverlink’ class to ALL ‘a’ tags Now suppose in your site you are using relative links (i.e. links that do not begin with ‘http’ and your domain, and instead, use relative paths to your files). You decide that you only want to apply the class hoverlink to external links (i.e. those links that go outside of your website). Can you think of how we might do this? Linking to external sites, will typically require that there is an ‘http://’ present in the hyperlink URL*. If this is indeed how we have consistently written our HTML code, we can select by assuming that the href does indeed begin with the string http:// $('a[href^="http://"]').addClass('hoverlink'); // Adds the ‘hoverlink’ class ONLY to ‘a’ tags that have an // href attribute that begins with the characters http:// This is a great example in that it shows us how we sometimes need to sit back and puzzle out or strategize in order to come up with methods of getting our programs to do what we want. *For now we will ignore the possibility that some sites begin with https// and other such possibilities

Modifying HTML Attributes: Viewing CSS Properties We’ve discussed adding or removing entire CSS classes. What if you only wanted to modify one or a few individual CSS properties? Answer: We use the css() function. As arguments to this function, we provide first the name of the property we wish to change, followed by a comma, followed by the value we wish to assign to that property. $('body').css('background-color' , 'red'); //makes the background color of the entire page red Viewing the value of a property, with the css() function Suppose you have a paragraph with the following styles: <p id="random" style="color:red; font-family:Arial;">Blah blah blah. </p> The statement $('#random').css('font-family'); would “return” the String Arial . (We’ll explain the meaning of ‘return’ shortly…) The statement $('#random').css('color'); would “return” a String with the rgb (not hexadecimal) value for red.

Modifying HTML Attributes: Modifying CSS Properties In addition to allowing us to view the current value of a CSS property, the css() function also allows us to change the value of a CSS property. Which “version” of the function goes to work depends on whether or not we provide a second argument to the function: $('#random').css('color','blue'); In this case, we have added a second argument to the css() function. When you add a second argument, you are saying that you are not interested in knowing the value of the property, but rather, are interested in setting the value of that property. In other words, the function works a little differently depending on how many arguments are provided. It is very important to note that we use a comma (not an equals sign!) to separate the property that we are trying to change (color) from its value (red). <p id="random" style="color:red; font-family:Arial;" onclick="$('#random').css('color','blue')"> Click on me to make me blue! </p> //Note how I broke the 3 attributes of this ‘p’ tag over //separate lines. Rememer: Clarity is always a good thing! In this case, when the user clicks anywhere inside the ‘random’ section (which in this case is the paragraph), we use the css()function to modify the value of the ‘color’ property.

A couple of additional examples of the css() function Again, recall that if we want to use this function to create a style (or modify an existing style), we provide TWO arguments: We first provide first the name of the property we wish to change Followed by a comma Followed by the value we wish to assign to that property. $('body').css('background-color' , 'red'); //makes the background color of the entire page red $('a[href$=".ppt").css('font-size' , '200%'); //doubles the font size of all hyperlinks to //Powerpoint (ppt) files

Pop-Quiz: What would happen here? <p id="random" onclick="$('body').css('color','blue')"> A random paragraph of text...</p> Answer: Clicking anywhere inside the section with an id of ‘random” (i.e. the current paragraph) would cause the entire ‘body’ tag (i.e. the content on the whole page) to turn blue.

The toggleClass() function This is another useful function In programming/design, switching back and forth between various options is called ‘toggling’. This can be very useful. Thing of toggling as being similar to a lightswitch so that each time you flip the switch, the light changes from on to off to on to off and so on. In programming, toggling means that each time you do something (e.g. clicking on a button), something changes from one state to another. For example, you might have a button that every time you click it, a certain class is toggled between on and off. jQuery provides a toggleClass() function that allows you to turn a class on and off each time you click the button. In the modifying_attributes.htm file, try replacing the two buttons with a single button that says: ‘Toggle the Class’: <input type="button" value="TOGGLE the 'highlight' class" onclick="$('#random_text').toggleClass('highlight')">

Class v.s. Descendent Selectors Compare these two statements: $('p .emphasize').hide(); $('p.emphasize').hide(); Note that the second version has a space between the ‘p’ and the ‘.emphasize’ What is the significance? In other words, can you articulate the difference in what will be selected between these two items? This is important!! Answer: The second statement with the space selects all content INSIDE a p tag to which the emphasize class has been applied. This is an example of a descendent selector. The first statement without the space selects all p tags to which the emphasize class has been applied. This is an example of a simple class selector. Example: $('p.emphasize').css('border' , '1px solid black'); //creates a border around any ‘p’ to which the ‘emphasize’ //class has been applied Example file: See class_vs_descendent.htm