Add State Images to Your List with jQuery and StateFace

TAGS: html_list | jQuery | li | states | ul | usa |

state outline list To look like this!

Using the State Face Font we’ll have jQuery automatically find the state abbreviation at the end of your list item and add the state image to the left side.

Note: For this to work, each list item MUST end in the correct state abbreviation, such as FL, CO or NC.

    1. Download and install the State Face Font from the Github repo following their instructions.
    2. Add this CSS stylesheet so we can use of classes to call the characters (state images).
    3. Mark up your HTML as you see fit, but this is the basics: (MAKE SURE IT ENDS WITH THE STATE ABBREVIATION)
<div id="stateList">
  <ul>
    <li><a href="#">Meininger - Boulder, CO</a></li>
    <li><a href="#">Surf and Stuff - Miami, FL</a></li>
    <li><a href="#">Sam's Studio - Decatur, IL</a></li>
    ...
  </ul>
</div>
    1. For reference, this is the CSS I used, but mark up as you see fit!
#stateList ul {
    -webkit-margin-end: 40px;
}
#stateList li {
    margin: 10px 0;
    padding: 15px 5px;
    border: 2px solid #ddd;
    background: #fff;
    list-style-type: none;
    line-height: 20px;
    font-size: 12px;
}
#statList li em {
    background: rgba(51,144,250,0.25);
    color: #fff;
    font-size: 32px;
    padding: 7px 15px 14px;
    margin-left: -5px;
    margin-right: 10px;
}
    1. Make sure you have jQuery installed and add the following script to either the bottom of your page before the closing tag or to your separate js file.
//Add State Outlines to list items
$(document).ready(function () {
          var theList = $('#stateList ul li');
          theList.each(function () {
              var theLi = $(this);
              var endTwo = theLi.text().slice(-2).toUpperCase();
              var originalText = $(this).text();
              //Uses a 'Switch Statement' to search the last 2 letters of each li and add the state image
              switch (endTwo) {
                  case 'AL': theLi.prepend('<em class="stateface stateface-al"></em>'); break;
                  case 'AK': theLi.prepend('<em class="stateface stateface-ak"></em>'); break;
                  case 'AZ': theLi.prepend('<em class="stateface stateface-az"></em>'); break;
                  case 'AR': theLi.prepend('<em class="stateface stateface-ar"></em>'); break;
                  case 'CA': theLi.prepend('<em class="stateface stateface-ca"></em>'); break;
                  case 'CO': theLi.prepend('<em class="stateface stateface-co"></em>'); break;
                  case 'CT': theLi.prepend('<em class="stateface stateface-ct"></em>'); break;
                  case 'DE': theLi.prepend('<em class="stateface stateface-de"></em>'); break;
                  case 'FL': theLi.prepend('<em class="stateface stateface-fl"></em>'); break;
                  case 'GA': theLi.prepend('<em class="stateface stateface-ga"></em>'); break;
                  case 'HI': theLi.prepend('<em class="stateface stateface-hi"></em>'); break;
                  case 'ID': theLi.prepend('<em class="stateface stateface-id"></em>'); break;
                  case 'IL': theLi.prepend('<em class="stateface stateface-il"></em>'); break;
                  case 'IN': theLi.prepend('<em class="stateface stateface-in"></em>'); break;
                  case 'IA': theLi.prepend('<em class="stateface stateface-ia"></em>'); break;
                  case 'KS': theLi.prepend('<em class="stateface stateface-ks"></em>'); break;
                  case 'KY': theLi.prepend('<em class="stateface stateface-ky"></em>'); break;
                  case 'LA': theLi.prepend('<em class="stateface stateface-la"></em>'); break;
                  case 'ME': theLi.prepend('<em class="stateface stateface-me"></em>'); break;
                  case 'MD': theLi.prepend('<em class="stateface stateface-md"></em>'); break;
                  case 'MA': theLi.prepend('<em class="stateface stateface-ma"></em>'); break;
                  case 'MI': theLi.prepend('<em class="stateface stateface-mi"></em>'); break;
                  case 'MN': theLi.prepend('<em class="stateface stateface-mn"></em>'); break;
                  case 'MS': theLi.prepend('<em class="stateface stateface-ms"></em>'); break;
                  case 'MO': theLi.prepend('<em class="stateface stateface-mo"></em>'); break;
                  case 'MT': theLi.prepend('<em class="stateface stateface-mt"></em>'); break;
                  case 'NE': theLi.prepend('<em class="stateface stateface-ne"></em>'); break;
                  case 'NV': theLi.prepend('<em class="stateface stateface-nv"></em>'); break;
                  case 'NH': theLi.prepend('<em class="stateface stateface-nh"></em>'); break;
                  case 'NJ': theLi.prepend('<em class="stateface stateface-nj"></em>'); break;
                  case 'NM': theLi.prepend('<em class="stateface stateface-nm"></em>'); break;
                  case 'NY': theLi.prepend('<em class="stateface stateface-ny"></em>'); break;
                  case 'NC': theLi.prepend('<em class="stateface stateface-nc"></em>'); break;
                  case 'ND': theLi.prepend('<em class="stateface stateface-nd"></em>'); break;
                  case 'OH': theLi.prepend('<em class="stateface stateface-oh"></em>'); break;
                  case 'OK': theLi.prepend('<em class="stateface stateface-ok"></em>'); break;
                  case 'OR': theLi.prepend('<em class="stateface stateface-or"></em>'); break;
                  case 'PA': theLi.prepend('<em class="stateface stateface-pa"></em>'); break;
                  case 'RI': theLi.prepend('<em class="stateface stateface-ri"></em>'); break;
                  case 'SC': theLi.prepend('<em class="stateface stateface-sc"></em>'); break;
                  case 'SD': theLi.prepend('<em class="stateface stateface-sd"></em>'); break;
                  case 'TN': theLi.prepend('<em class="stateface stateface-tn"></em>'); break;
                  case 'TX': theLi.prepend('<em class="stateface stateface-tx"></em>'); break;
                  case 'UT': theLi.prepend('<em class="stateface stateface-ut"></em>'); break;
                  case 'VT': theLi.prepend('<em class="stateface stateface-vt"></em>'); break;
                  case 'VA': theLi.prepend('<em class="stateface stateface-va"></em>'); break;
                  case 'WA': theLi.prepend('<em class="stateface stateface-wa"></em>'); break;
                  case 'WV': theLi.prepend('<em class="stateface stateface-wv"></em>'); break;
                  case 'WI': theLi.prepend('<em class="stateface stateface-wi"></em>'); break;
                  case 'WY': theLi.prepend('<em class="stateface stateface-wy"></em>'); break;
                  default: theLi.prepend('<em class="stateface stateface-us"></em>');
              }
          });
      });

Hopefully that’s pretty straightforward. If you have any questions about ‘Switch Statements’ consider checking out some examples from W3 Schools. Also special thanks to Pro Publica for this great StateFace Font.

Oct 13, 2014 | Posted by in Coding Freebies, jQuery | Comments Off on Add State Images to Your List with jQuery and StateFace