w6d4 - Transition all the things
Today was interesting. We spent the day building jQuery plugins that could be used to enhance an application in multiple, useful ways. Today’s work was not quite as fun as some of the other things we did this week, but it is probably the most practical in terms of real world application. We were tasked with fleshing out 3 simple plugins to get an idea of how jQuery plugins are built.
The first plugin involved a set of links that correlated to specific content. We had to create a plugin that turned the links into “tabs”, that when clicked, displayed only the content relevant to that “tab”. This plugin included our first taste of css transitions, which we used to fade out the old content and fade in the new content.
The second plugin was a picture “carousel”, that could be navigated through using “Next” and “Prev” links. The carousel only held space for one picture at a time. When the “Next” link was clicked, a new picture slid in from the right, while the active picture slid out to the left. When the “Prev” link was clicked, it had the opposite effect. To do this, we utilized CSS classes to identify the active picture, the next picture (not displayed but positioned off to the right), and the prev picture (not displayed, but positioned off to the left). Then, using CSS styling, we set the desired final positions of those pictures and placed a transition timer, in order to smoothly transition between pictures. The trickiest part of this plugin was handling the events that added and removed classes. Because of the way that javaScript processes things, you need to be careful about the way in which you fire off events. For some reason that I don’t fully understand, it seems like you sometimes need to handle events in multiple stages, separated by a puzzling setTimeout() that contains the next stage, set to a timeout of 0. I’m not really sure why it works, but we had to use it multiple times, so it’s probably something we’ll come across a few more times, and hopefully understand why it’s needed.
Our last plugin wasn’t quite finished, but it was a good way to wrap up the day. We were tasked with building a thumbnail plugin, where you provide a list of small thumbnails in a row and when a user mouses over a thumbnail, it shows a full size version of the image above it. Again, we used event handlers and css to style everything and it ended up being fairly simple to get working. Our biggest issues were with CSS, just trying to get everything placed where we wanted. We also MAY have spent a little time adding a few transition elements to our thumbnails, but nothing too eccentric… It’s amazing how much you can do with CSS, and we’ve really only been using the basic functionality, I’m sure you can get pretty crazy once you really know what you’re doing.