HTML and CSS Reference
In-Depth Information
layout.js
-----This utility allows you to refresh the layout when
the orientation of the device changes. Some elements require
a dynamic width and height, which this utility facilitates.
jsonp.js
-----This utility allows you to make cross-site requests
for web services that support the JSONP (JavaScript Object
Notation with Padding) format.
Managing the Deck
The deck manager is a simple object used to show and hide cards. This utility
was created to avoid having to repetitively type out class names in the
application's main code. The reason for this is because a class name might
change and it would mean having to update that class name throughout the
application and retest all of the code. The other reason for doing this is that you
might want to change the way in which cards are shown or hidden. For
example, you might use CSS3 animations to flip cards, fade them out, and so
forth.
Create a new file within
js/app/utility
called
deck.js
that contains the
following code.
var app = app || {};
app.utility = app.utility || {};
app.utility.deck = (function(){
// Keep all of the cards in a local scope
var _cards = document.getElementsByClassName('card');
// Return an object with methods
return {
// Shows a card by adding the active class
showCard: function(id){
document.getElementById(id).classList.add('active');
},
// Hides a card by removing the active class
hideCard: function(id){
document.getElementById(id).classList.remove('active');
},
/*
* Hides all cards by iterating through the card list
* and removing the active classname
*/
hideAllCards: function(){
for(var i = 0; i < _cards.length; i++){
