pokeImages3

by yairamon

HTML

<h3>Level 1.0 Status</h3>

<div id="graphs" class="grid" style="overflow-y:auto"></div>

<div id="graphs2" class="grid">blah</div>

CSS

<style type="text/css">
   
   body {
  margin: 0;       /* to remove its vertical scrollbar */
}
.main {
  grid-row-end: 6; /* assuming you want it same height as sidebar? */
  overflow-y: "hidden";
  } 

    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
		border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
    
.grid {
  display: grid;
  overflow-y: "hidden";
  grid-gap: 0px;
  grid-template-columns: repeat(auto-fill, 27px);
  -webkit-overflow-scrolling: touch;
}



</style>

JavaScript

var id = "1xCqAxBKNXHuATDgMmnstus8bOfdW_aUeHT4BJ-DuD-M";
//var id = "1hbHqrnYa4oMUquZcq8WkTJk0kI0t9scGBwro-EH-ALA";

var url = 'https://spreadsheets.google.com/feeds/cells/' + id + '/1/public/values?alt=json-in-script&callback=?';



$.getJSON(url, cellEntries);

var rowData = [];

function cellEntries(json) {

    var data = json.feed.entry;

    var allData = [];
    var rowData = [];
    var row = 0;

    for (var i = 0; i < data.length; i++) {
        var cell = data[i]["gs$cell"];

        if (cell.col == 1) {
            if (++row > 1) {
                allData.push(rowData);
                rowData = [];
            }
        }

        var val = cell["$t"];
        rowData.push(val);

    }

    allData.push(rowData);

    show(allData);
}




function show(allData) {

    for (i = 1; i < allData.length; i++) {
    
    		var pokeName = allData[i][1];
        var pokeAvailability = allData[i][8];
        var pokeStatus = allData[i][9];
        


        $('#graphs').append(
            "<div><img id='img" + i + "' src='https://pkmref.com/images/set_1/" + i + ".png' " +

            "style='width:25px;height:25px;' title='\n" + i + " " + pokeName + "\n status: " + pokeStatus + "'>");

	
        if (pokeStatus === "n/a") $("#img" + i).css({
            opacity: 0.1 ,
             "background-color": "#111111"
        });
        else if (pokeStatus === "Y") $("#img" + i).css({
            "background-color": "#AAFFAA"
        });
        else if (pokeStatus === "Soonish") $("#img" + i).css({
            "background-color": "#dbc902"
        });        
        else if (pokeStatus === "N") $("#img" + i).css({
            "background-color": "#FFAAAA"
        });
        else
        	$("#img" + i).css({
            "background-color": "#88FFFF"
        });
        
        
    }
}