Check out my JSFiddle here: http://jsfiddle.net/0r16e802/4/
I'm attempting to display an image as an HTML table, but I'm facing two major issues with my algorithm:
- Only the first image is loaded in the first row and I need to figure out how to draw all images.
The size and background-position are causing problems. Here's a snippet of the code:
var Append=""; $(document).ready(function(){ var row=2; var ItemPerRow=10; CreateEmojiTable(row, ItemPerRow); function CreateEmojiTable(row, ItemsPerRow){ Append+="<table width='99%' style='padding-top:3px;'>"; for(var i=0;i<row;i++) { Append+="<tr>"; DrawEmoji(ItemsPerRow, i); Append+="</tr>"; } Append+="</table>"; $("#emoji_container").html(Append); } function DrawEmoji(ItemsPerRow, r){ var size=16; for(var i=0;i<ItemsPerRow;i++){ Append+="<td>" Append+="<div class='emoji' style='background-position:0px -"+parseInt(r*i*size)+"px;'></div>"; Append+="</td>"; } } });