Create a visual representation by converting it into an HTML table

Question

Create a visual representation by converting it into an HTML table

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>";
  }
 }
 });

javascript jquery html css

Answer 1

Answer №1

UPDATE: revised calculation

Following Jovan's suggestion, the correct indexing formula should be:

(r*ItemsPerRow + i) * size

However, it appears to be slightly misaligned, so you need to adjust it like so:

(r*ItemsPerRow + i) * size - 2

In addition, ensure that you stay within the maximum index limit of 262 to prevent duplication and misalignments, as mentioned in the previous comment.

Check out the complete solution that addresses indexing, alignment, and maximum index issues: http://jsfiddle.net/0t19a9b4/8/

The icons in the picture are actually aligned at 17 pixels, not 16.

var size=17;

This adjustment ensures consistent alignment among them, but you still need to handle border discrepancies of 1 pixel.

To resolve this, tweak the CSS dimensions by subtracting 1 from the height property:

height:16px;

For accurate sizing calculations, modify the computation by deducting 1:

parseInt(r*i*size - 1)

Refer to this updated solution for proper alignment and sizing: http://jsfiddle.net/0t19a9b4/3/

Answer 2

UPDATE: revised calculation

Following Jovan's suggestion, the correct indexing formula should be:

(r*ItemsPerRow + i) * size

However, it appears to be slightly misaligned, so you need to adjust it like so:

(r*ItemsPerRow + i) * size - 2

In addition, ensure that you stay within the maximum index limit of 262 to prevent duplication and misalignments, as mentioned in the previous comment.

Check out the complete solution that addresses indexing, alignment, and maximum index issues: http://jsfiddle.net/0t19a9b4/8/

The icons in the picture are actually aligned at 17 pixels, not 16.

var size=17;

This adjustment ensures consistent alignment among them, but you still need to handle border discrepancies of 1 pixel.

To resolve this, tweak the CSS dimensions by subtracting 1 from the height property:

height:16px;

For accurate sizing calculations, modify the computation by deducting 1:

parseInt(r*i*size - 1)

Refer to this updated solution for proper alignment and sizing: http://jsfiddle.net/0t19a9b4/3/

Answer 3

Answer №2

Upon further examination, it appears that none of the answers provided earlier are accurate, despite their success with the initial two rows.

Based on the arrangement of your sprite, the correct formula to use is: parseInt( (r*ItemsPerRow + i) * size)

Answer 4

Upon further examination, it appears that none of the answers provided earlier are accurate, despite their success with the initial two rows.

Based on the arrangement of your sprite, the correct formula to use is: parseInt( (r*ItemsPerRow + i) * size)

Answer 5

Answer №3

Like @pid mentioned, there was a slight sizing issue off by a pixel and the first row repeated due to i=0. The offset height of the initial row ended up being calculated as 0. Additionally, a small adjustment of -2 had to be made to properly align the elements, possibly a result of an error in the original image.

function DrawEmoji(ItemsPerRow, r) {
        var size = 17;
        for (var i = 0; i < ItemsPerRow; i++) {
            Append += "<td>"
            Append += "<div class='emoji' style='background-position:0px -" + parseInt((r + 1) * (i + 1) * size - 2) + "px;'></div>";
            Append += "</td>";
        }
    }
});

http://jsfiddle.net/0r16e802/9/

Answer 6

Like @pid mentioned, there was a slight sizing issue off by a pixel and the first row repeated due to i=0. The offset height of the initial row ended up being calculated as 0. Additionally, a small adjustment of -2 had to be made to properly align the elements, possibly a result of an error in the original image.

function DrawEmoji(ItemsPerRow, r) {
        var size = 17;
        for (var i = 0; i < ItemsPerRow; i++) {
            Append += "<td>"
            Append += "<div class='emoji' style='background-position:0px -" + parseInt((r + 1) * (i + 1) * size - 2) + "px;'></div>";
            Append += "</td>";
        }
    }
});

http://jsfiddle.net/0r16e802/9/

Create a visual representation by converting it into an HTML table

Answer №1

Answer №2

Answer №3

Similar questions

Enable direct download from external servers

Is there a way to generate a hierarchical list menu using strings?

Creating a dynamic sidebar based on roles in AngularJS

labels placed beneath evenly spaced radio buttons arranged horizontally

Encountering the "No injector found for element argument to getTestability" error while navigating between various single page applications

The jQuery ajax script that is supposed to perform delete operations is not functioning

Filling out a form within a webpage fetched through a DOMParser

Setting the margin to 0 auto to create a CSS Grid layout featuring an Image taking up the entire right side

moment.js is unable to extract the time information from a timestamp

How can I combine multiple textures from mtlLoader and objLoader in three.js?

Encountering a problem when trying to map a List with a button in ReactJS

Create a layout with three columns, each containing four list items

AngularJS and Handlebars (npm)

Expanding the MatBottomSheet's Width: A Guide

A problem arises when trying to showcase the content in a responsive manner on the hamburger menu, particularly when viewing on mobile

Unable to modify $scope value within the directive

Issues encountered with jQuery Form Plugin failing to pass a string value to PHP

Transforming a Python list into a JavaScript array

Close ui-bootstrap typeahead menu only when a row is manually chosen

Using jQuery to reveal and conceal elements upon hover interaction