Random Stuff

ColorsSizes

CSS Shortcuts

Learning Objectives

By the end of this lecture, you should be able to:

– Identify the 3 most common ways in which colors can be applied using CSS

– Recognize that there are different ways of applying font sizes in CSS– Recall that information returned from a form field is always returned as

a string – How to convert a string to a number if necessary

Review: jQuery and ColorsIf you want to set a color using jQuery such as with the CSS function, you can usually use any acceptable CSS format such as the color name (e.g. ‘red’), the hex code (e.g. #ff0000), or the rgb value (e.g. rgb(255,0,0) ). E.g. The following 3 lines will ALL work and will set the color of anchor tags to red: $('a').css('background-color', 'red');

$('a').css('background-color', '#ff0000');

$('a').css('background-color', 'rgb(255,0,0)');

However, when a jQuery function returns a color, it typically does so only in rgb format:var theColor = $('a').css('background-color');

//will return the string: rgb(255,0,0)

alert("The color of anchor tags is: " + theColor);

This is the kind of information typically given to you by the API.

There are various additional subtleties that show up such as transparency colors that show up as something called rgba values, but these kinds of minutiae are best left for another time.

Review: jQuery and CSS ShortcutsCSS provides us all kinds of convenient shortcuts. For example, say you wanted to apply a border to all of your ‘h2’ tags, you could use the css() command:

h2 { border:1px solid red; }

You can also use this shorthand when assigning a property using the css() function: $('h2').css('border', '1px solid red');

When a jQuery function returns the value of a a CSS property, however, jQuery does not use shortcuts. For example, if you tried to find out the settings of a certain div section’s border using the css() function, the following would NOT work:

var theBorder = $('#someSection').css('border');

alert(theBorder); //would not output any information

You would have to use individual CSS properties (e.g. border-top-width or border-bottom-color, etc, etc) if you wanted to find out this information.

var borderColor = $('h2').css('border-bottom-color');

alert(borderColor); //would output: rgb(255,0,0)

NOTE: This is precisely the kind of information that is provided to us by a well-written API documentation.

Review: jQuery and CSS Shortcuts – the APIDetails such as exactly what kind of functionality is and is not provided by a function is precisely the kind of information that is provided to us by well-written API documentation.

Here is a snippet taken from the jQuery API of the css() function:

Note that the API tells us about the issues with CSS shortcuts. You can also see some information relating to the use of color values.

Yikes! Does this mean we have to read and carefully analyze the documentation ‘fine print’ every time we want to use a new function???Well, yes and no… Many functions are quite straightforward and a quick glance at the API will tell us all we need to know. However if/when you become a very advanced web programmer, you will start to really learn some of the nuances (or bugs!!) of the various functions. This is where you will find yourself visiting the API to try and figure out why some strange behavior is occurring. Again, this is what separates the highly-skilled (and highly paid!) designers from the rest.

jQuery and Font SizesAt this point in your HTML/CSS work, you have hopefully experimented at least a little with changing the size of items on your web pages such as images, border heights/widths, font sizes and so on.

The CSS specification allows for sizing to be achieved using a variety of units such as pixels (‘px’), percentages (‘%’), em’s (‘em’), and others. There are advantages and disadvantages to each. While we may include a relatively brief discussion on this topic later in the course, we will leave any in-depth discussion to courses that focus on the actual usability aspects of of web page design.

For now, however, you should be aware that when retrieving sizing information in jQuery, you will typically receive a value back in pixels.

For example, say you wanted to double the font size of a given div section called ‘inset’. You could do so with: $('#inset').css('font-size', '200%');

If you then wanted to find out the size, you could use:var size = $('#inset').css('font-size');

The value that would be returned here is the pixel size of the font. So if the original size was, say, 12 pixels, this command would not return ‘200%’ but rather the String ‘24px’.

When assigning a size, if you do not specify a unit, the default is pixels. Compare: $('#inset').css('font-size', '200%'); //doubles the font size

$('#inset').css('font-size', 200); //sets the font to 200 pixels

NOTE: Did you notice that in the second example, the value ‘200’ was NOT inside quotes? The reason is that in this case, we were passing a number as opposed to a string.

jQuery and Font Sizes

Pop-Quiz: What is the data-type of the returned value of the css() function when applied to the font-size property? Feel free to try out this line in your code somewhere before answering the question.

Answer: While you might be tempted to say ‘Integer’ or ‘Number’, the returned value is actually a string. (If you look at the API for this function, it will, of course, tell you that!)

If you test the function, you will note the presence of the ‘px’ after the number that gets returned. In the next slide, I will show you how to convert that string into a usable number. That being said, there are some situations in which the css() function does return a number.

Review: Converting strings to numbersSuppose you wanted to offer the user the ability to double or halve the size of the font of a given section of text.

For example, suppose you had a paragraph like this: <p id="pixelPlay" style="font-size:12px">

Here is some text that starts at 12 pixels.</p>

To double the font size, we would first need to get the current size:var fontSize = $('#pixelPlay').css('font-size');

Now you might be tempted to double it with: fontSize = fontSize * 2;

There is a problem though. Do you see it? Recall that when we return the value of font-size, it comes back as a string not as a number. So if you try to double it, it not be like saying 12*12, but rather would be like saying 12px*12px – which I hope you appreciate makes no sense.

If you do not see why this is a problem it is imperative that you review the data types lecture!

To fix this, we turn to a slight variation of our old friend, the parseInt() function:fontSize = parseInt(fontSize, 10);

You can ignore the second argument (the ‘10’) for now. The parseInt() function will first strip off the ‘px’ text and will then convert the string “12” to the integer 12.

We can now double our font size with: $('#pixelPlay').css('font-size', fontSize*2);

FILE: Be sure to study the code (including the comments): playing_with_pixels.htm