#3: A Brief Overview of jQuery

When I saw that jQuery was a possible blog topic, I was excited because it is something that I have been curious about since I’ve been web designing on my own. I found out about it while I was working on the homepage for my personal website. I wanted to incorporate a pop out photo gallery when if you click on a thumbnail, the photo pops out and enlarges on top of the home page screen. The method for achieving this was called a jQuery Lightbox. But when I looked up on how to incorporate it onto my website, the instructions were vague and I was overwhelmed with all the obscure code I was faced with. I ended up not incorporating it at all.

Fast forward five months later, and jQuery presents itself again. Unlike when I first started web design, I have now learned a bit about it, and will share some of this information with you today.

According to jQuery.com, jQuery is a “fast, small and feature-rich Javascript library.” It is accepted across multiple browsers and helps enhance the overall look and feel of a website. It is a scripting language which means it accompanies HTML and CSS, though it is not required. It is sort of like an accessory to the webpage to make it stand out that much more. It can be written and run on any operating system as long as you have a text editor (like Notepad for PC, TextEdit for Mac) and a web browser (Chrome, Firefox, Safari, etc.)

With jQuery, you can do more than just photo galleries. Smashing Magazine lists 50 different options for incorporating jQuery on your webpage, from looping galleries to drop down menus. One of the techniques that stood out to me was creating a polaroid photo viewer. With that, your images are placed in Polaroid frames and are able to be dragged about on the screen. It creates a nice layer effect and makes the webpage interactive. At the moment, I have no use for that, but I still think it’s pretty cool.


#2: RGBA vs Opacity

At first glance, rgba and opacity seem to do the same thing. Both deal with changing the degree of transparency on the page. You can specify the values from 1 (opaque) to 0 (completely transparent).

However, they are not the same. Rgba deals strictly with colors, while opacity can be applied to anything, even whole divs!  Rgba stands for red, green, blue, alpha. Alpha denotes the transparency of the color. Any color that you specify through rgb can change in strength using the alpha property. 

Still confused? css3.info’s “A brief introduction to Opacity and RGBA” has a great example of the difference between the two declarations. When you apply opacity to a background color of a div, it makes everything within the div inherit that opacity as well. But when you use rgba to set the opacity of the background color, only the background color changes in opacity, not the contents within the div.

Because this is a CSS3 technique, unfortunately all browsers do not support it yet (*cough* Internet Explorer *cough*). Drew McLellan from 24 Ways shows us a work around for this problem. Just like we do for font-faces, we can set up back-up background color values in case CSS3 is not available. Whatever element you applied the rgba to, you can also specify within the CSS a solid color replacement. And for a last desperate attempt, if you set the opacity to the background color, you can use a PNG image with slight opacity to achieve the same effect. That way, the effect you are trying to achieve can be seen across all browsers.

 In conclusion, rgba is a better way to set opacity to colors and won’t interfere with the other elements on the page. With rgba, you can set opacity for a drop down menu, but still have the text appear clear and crisp.