XML to initialise Menu

Simple example that demonstrates how XML can be used to initialise a menu.

by Vimla Ramdoo

HTML

<div id="store"></div>

CSS

.product {
    position: relative;
    background-color: white;
    width: 100px;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    cursor: pointer;
    box-shadow: 5px 5px 3px black;
}

.product p {
    margin: 0;
}

.product img {
    width: 70%;
    height: auto;
}

.product:hover {
    background-color: slategray;
    color: white;
}

#store {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 25%;
    height: 100%;
    background-color: steelblue;
    overflow: scroll;
}

JavaScript

//XML string with all whitespace and cariage returns removed
var txt="<store><item><description>Chair</description><cost>100.00</cost><image>chair.jpg</image></item><item><description>Table</description><cost>1500.00</cost><image>table.jpg</image></item><item><description>Lamp</description><cost>50.00</cost><image>lamp.jpg</image></item></store>";

// parse the store and create the icons
loadStore(txt);

// Load icons for each item in the store
function loadStore (txt) {
  
  var xmlDoc   = parseXMLDoc(txt);
  var theStore = xmlDoc.getElementsByTagName("item");

   // Iterate through each item in the store, creating a tumbnail view for each
   for (var i=0 ; i<theStore.length ; i++) {
        // Get data for the current item
        var item = theStore[i];
        var description = item.getElementsByTagName("description")[0].childNodes[0].nodeValue;
        var cost        = item.getElementsByTagName("cost")[0].childNodes[0].nodeValue;
        var image       = item.getElementsByTagName("image")[0].childNodes[0].nodeValue;
       
       addItem(description, cost, image);
    }
}

// Create the icons for a given product
function addItem(description, cost, image) {
    var imageDir = "http://www.bvonkonsky.com/images/bwt/";
    
    // Create a new div for the thumbnail for this item
    var divElement = document.createElement("div");
    
    // This div is of class product
    divElement.setAttribute("class", "product");
    
    // Set callback designating action when product is clicked
    var callback = "alert('" + description + ", $'+" + cost + ")";
    divElement.setAttribute("onclick", callback);
    
    // Create the image for the item tumbnail and apend it to the di
    var imgElement  = document.createElement("img");
    imgElement.src= imageDir + image;
    divElement.appendChild(imgElement);
    
    // Create the label for the item thumbnail and append it to the div
    var label = description + ", $" + cost;
    var pElement =...