Random Stuff
Colors
Sizes
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 Colors
If 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 Shortcuts
CSS 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 API
Details 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 Sizes
At 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 numbers
Suppose 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