Class 6 – Assignment Case Study
The Class 6 assignment brings together all of the technologies and best practices we have been studying all week. The XHTML and CSS layout is somewhat advanced, and the Javascript/JQuery code that is necessary to create the mouseover/mouseout effects indicated in the wireframe diagram will undoubtedly get your hands dirty with coding complex behaviors on the web.
Those of you who have already spent time tackling the Javascript/JQuery aspect of the assignment may have wondered whether there wasn’t a quick and efficient way of setting the behavior for all of the product thumbnails without having to repeat the same code 9 times for each thumbnail. Furthermore, some of you may have experienced buggy behavior in your solutions (such as not all of the mouseover and mouseouts resetting the thumbnails properly) and wondered what was truly the best solution.
Here are three possible solutions to the interactive part of the assignment that avoid common pitfalls and should serve as case studies for how to think about problems like this.
The First Solution: using JQuery selectors to their best advantage
The first example relies on the fact that the XHTML code for each product thumbnail is set up in a particular nesting structure. Each product thumbnail is surrounded by a div with class=”product”. Inside of this div is an <img> tag which is the product image, and another <div> tag that contains the product info.
<div class="product"> <img src="images/muffin1.jpg" /> <div> <h3>Product 1</h3> <p>Definitely the best muffin around</p> <a href="#">$3.99</a> </div> </div>
Assuming this to be the XHTML structure of all product thumbnails, the JQuery code for this solution can then attach the mouseover and mouseout behaviors to the outer div, which is always visible on the page.
//when a user mouses over a div with class="product"...
$("div.product").mouseover (function () {
//make the div and img tags inside of the product div toggle their respective visibilities
$("div", this).toggle(); //the second parameter of $() specifies the context for the selector - in other words, which element to search within for matching elements. in this case, using "this" indicates to search within the element that was moused over
$("img", this).toggle();
});
//when a user mouses out of a div with class="product", do the same thing
$("div.product").mouseout (function () {
$("div", this).toggle();
$("img", this).toggle();
});
When a user mouses over one of the <div> tags with class=”product”, the ensuing code toggles the visibility of each the nested <div> and the nested <img> tags by using a JQuery selector that takes advantage of the $() function’s optional second parameter, which specify the context in which the selector should be applied. By using the “this” variable for the second parameter in the command $(“div”, this).toggle(), we are telling JQuery to select only those <div> tags that are inside of the element that is currently being moused over (i.e., the “this” element). So JQuery will not toggle the visibility of other divs that are outside of the moused-over element. Likewise the image – only the image within the moused-over element will have its visibility toggled.
The Second Solution: using JQuery to switch elements’ CSS styles
This second solution uses the same XHTML structure as the last solution, and simply uses JQuery to add a class to any product <div> that is currently moused-over. Here is the code that does so:
//when a user mouses over a div with class="product", add the class "selected" to the element
$("div.product").mouseover (function () {
$(this).addClass("selected");
});
//when a user mouses out of a div with class="product", remove the class
$("div.product").mouseout (function () {
$(this).removeClass("selected");
});
In the CSS code for this solution, there are predefined styles for how the relevant parts of the product thumbnails should look. By default, the product image is visible, and the product description is invisible. However, when the outer product <div> has the “selected” class applied to it, the CSS code indicates to make the product image invisible, and the product information visible.
Here is the relevant CSS. Notice the different “display” properties for the inner <div> and <img> tags both in their default state, and when the outer div has the class “selected” applied:
/* BEGIN default styles for the product thumbnails */
div.product > div {
/* center product description within the product container */
text-align: center;
display: none;
}
div.product > img {
/* center product images within the product container */
display: block;
margin: 0 auto;
}
/* BEGIN styles for when a product thumbnail is moused over */
div.product.selected > div {
display: block;
}
div.product.selected > img {
display: none;
}
The Third Solution: pure CSS
The third solution is entirely achieved in CSS. Using JQuery is absolutely unnecessary for simply changing how things look when they are moused over. There is no need for JQuery to add the “selected” class to the currently moused-over product thumbnail element. The same CSS tricks used in the last solution can be done by relying on the CSS “:hover” pseudo-class, rather than an explicit “selected” class. The “:hover” selector is a built-in CSS pseudo-class that helps define styles that only are applied if an element is currently moused-over. In this case, we do not apply styles to the element that is being moused over itself, but rather to its child elements.
Here is the relevant CSS. Note that it is almost identical to that in the last solution, save for the use of “:hover” in place of “.selected”:
/* BEGIN default styles for the product thumbnails */
div.product > div {
/* center product description within the product container */
text-align: center;
display: none;
}
div.product > img {
/* center product images within the product container */
display: block;
margin: 0 auto;
}
/* BEGIN styles for when a product thumbnail is moused over */
div.product:hover > div {
display: block;
}
div.product:hover > img {
display: none;
}
Related posts:
- Class 6 – Assignment(s)
- Class 6 – Assignment: create a Tic-Tac-Toe game using JQuery
- Class 6 – In-Class Assignment
Tags: class 6
Loading ...