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:

  1. Only the first image is loaded in the first row and I need to figure out how to draw all images.
  2. 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>";
      }
     }
     });
    

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

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 â„–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/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enable direct download from external servers

I'm in search of a way to prompt a download (by right-clicking and selecting "save as") for both mp4 and flv files. The challenge is that these files are not hosted on my server, they are direct links from external websites. I have tried using .htacce ...

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

Within an HTML Application (HTA), I am utilizing vbscript to retrieve a list of subnet locations which is output as text in the following format: Chicago Denver Dallas Dallas/North Dallas/South Dallas/West Dallas/West/Building1 Dallas/West/Bu ...

Creating a dynamic sidebar based on roles in AngularJS

I'm looking to create a dynamic sidebar based on the user's role, which is stored in $rootScope.login. However, I'm unsure of how to integrate it into template.js. Below is my JavaScript code and I'm still relatively new to AngularJS. ...

labels placed beneath evenly spaced radio buttons arranged horizontally

When creating a user form, I am in need of multiple likert items to gauge opinions accurately. My project requires the use of the oTree library, which is closely integrated with django. It is essential that any solution implemented aligns with oTree as muc ...

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

Currently, I am conducting tests on Protractor for a website that is bootstrapping AngularJS manually. Despite the steps continuing to execute, I encounter this error: Error while waiting for Protractor to sync with the page: "[ng:test] no injector found ...

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

I've been working on a small personal webapp and I'm facing an issue with a link that should trigger an ajax call to delete some information from a database. For some reason, the row is not being deleted as expected. I've tried troubleshooti ...

Filling out a form within a webpage fetched through a DOMParser

Creating automation software in JavaScript using TamperMonkey. The script performs several AJAX requests that retrieve HTML to be parsed with a DOMParser. Is there a way to submit these forms without opening the newly retrieved HTML on the main page? ...

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

I’ve been grappling with finding a consistent method to ensure uniform white space for all containers like this: https://i.stack.imgur.com/wtk0G.png Important: The grey rectangle signifies an image. My goal is for it to extend to the viewport's en ...

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

I'm having trouble converting a timestamp using moment.js from a json data set. When I try to use moment.format('MMMM Do YYYY, H:mm:ss'), the output is showing something like May 25th 2361, 0:00:00 for the timestamp 12351223423. This seems t ...

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

I have the files .mtl, .obj, and several .jpg textures. I have been attempting to use different textures in the export loader OBJ, and while I can see my object on the scene, it appears as a black color. Can anyone spot what might be incorrect or missing ...

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

As I map results from a GET request, everything displays correctly - each User's picture, name, and the correct label on the button. However, the issue arises when I try to access specific user information by clicking on the button; instead of retriev ...

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

My unordered list (ul) has 4 li's and I'm trying to create 3 columns. However, when I have 4 li's, it only displays as 2 columns. How can I achieve a layout with 3 columns and 4 li's? Additionally, I want the li elements to be arranged ...

AngularJS and Handlebars (npm)

Is it possible for angularJS to function as a substitute for the "view engine" in nodeJS? I am seeking insights on the optimal method to use. (Do MEAN Stack developers utilize view engines? Or do they prefer using res.sendFile along with tools like ui-ro ...

Expanding the MatBottomSheet's Width: A Guide

The CSS provided above is specifically for increasing the height of an element, but not its width: .mat-bottom-sheet-container { min-height: 100vh; min-width: 100vw; margin-top: 80px; } Does anyone have a solution for expanding the width of MatBott ...

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

As a newcomer to web development, I decided to challenge myself by building an E-Commerce website to enhance my skills. To ensure mobile responsiveness, I opted for a hamburger menu to hide the navbar content. However, despite resizing working flawlessly, ...

Unable to modify $scope value within the directive

This special function triggers once ng-repeat is done iterating through the list using scope.$last: simpleSearchApp.directive('afterResults', function($document) { return function(scope, element, attrs) { if (scope.$last){ scope.windowHe ...

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

I'm currently experimenting with the jQuery form plugin (http://jquery.malsup.com/form) to handle photo uploads and previews. However, I'm encountering an issue where the data strings expected to be sent to PHP using the ajaxForm function are com ...

Transforming a Python list into a JavaScript array

Hey there, I'm in the process of creating a JavaScript array of dates to input into a jQuery datepicker addon. Here is my Django view: def autofill_featured(request): show_id = request.GET.get('show_id') show = Show.objects.get(id=s ...

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

I have set up this jsBin to show the problem I am facing. When you visit the link and try to type "Five," the expected behavior would be to type "Five" and then press tab. However, in this case, you need to type "Five" and then either escape or click outsi ...

Using jQuery to reveal and conceal elements upon hover interaction

I have implemented a basic jquery function to display and hide a div when hovering over an anchor. However, the issue I am facing is that the div disappears when I move my cursor away from the anchor tag. I want to be able to interact with the div without ...