Creating an interactive TABLE with twitching animations in a straightforward HTML and JavaScript project

Currently, I am tackling a JavaScript challenge involving placing eight queens on a chessboard in such a way that they do not attack each other. However, there seems to be an issue - whenever I place a queen in an unoccupied column, that particular column shifts slightly by a pixel or two. How can I resolve this while maintaining the fixed width of the columns? The SVG image representing the queen is smaller than 60px. Below is my CSS code.

Would you like me to share my JavaScript and HTML files too? You can access them on Google Drive (File Size: 17 KB).

Moreover, is it possible for me to upload the entire project somewhere so that it can be run or linked from that location?

table {
    width: 480px;
    border-collapse: collapse;
}

tr {
    height: 60px;
}

td {
    width: 60px;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
}

javascripthtmlcsssvg

Answer №1

A demonstration of board and queen placement using jQuery and SVG exclusively is possible. The following code snippet illustrates the concept (minus the queen logic, allowing for easy placement of a queen on any cell).

Update: Compatibility tested on IE9, Firefox, and Chrome as of October 2014.

jQuery('svg').on('click', function(e) {
  console.log("x,y: ", e.pageX, ',', e.pageY);
  // Finding the nearest square's position; top left cell of 48px square starts at coordinates (9,9)
  var cols = parseInt((e.pageX - 9) / 48);
  var rows = parseInt((e.pageY - 9) / 48);
  var cell_id = cols + '_' + rows; 

   if ((cols < 8) && (rows < 8) && (jQuery('#' + cell_id).length == 0)) {
    jQuery('#cell_location').text('(' + cols + ',' + rows + ')');
    // Insert an image into that cell
    var queen = document.createElementNS("http://www.w3.org/2000/svg", "use");
    queen.setAttributeNS(null, "id", cell_id);
    queen.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#queen");
    queen.setAttributeNS(null, "x", (cols * 48) + 1);
    queen.setAttributeNS(null, "y", (rows * 48) + 1);
    jQuery('svg').append(queen);
   } 
 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg viewBox="0 0 450 450" height="450" width="450" xml:space="preserve" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  
  <defs>
      <g id="queen" style="opacity:1; fill:#ffffff; fill-opacity:1; fill-rule:evenodd; stroke:#000000; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;">
    <path
      d="M 9 13 A 2 2 0 1 1  5,13 A 2 2 0 1 1  9 13 z"
      transform="translate(-1,-1)" />
    <path
      d="M 9 13 A 2 2 0 1 1  5,13 A 2 2 0 1 1  9 13 z"
      transform="translate(15.5,-5.5)" />
    <path
      d="M 9 13 A 2 2 0 1 1  5,13 A 2 2 0 1 1  9 13 z"
      transform="translate(32,-1)" />
    <path
      d="M 9 13 A 2 2 0 1 1  5,13 A 2 2 0 1 1  9 13 z"
      transform="translate(7,-4.5)" />
    <path
      d="M 9 13 A 2 2 0 1 1  5,13 A 2 2 0 1 1  9 13 z"
      transform="translate(24,-4)" />
    <path
      d="M 9,26 C 17.5,24.5 30,24.5 36,26 L 38,14 L 31,25 L 31,11 L 25.5,24.5 L 22.5,9.5 L 19.5,24.5 L 14,10.5 L 14,25 L 7,14 L 9,26 z "
      style="stroke-linecap:butt;" />
    <path
      d="M 9,26 C 9,28 10.5,28 11.5,30 C 12.5,31.5 12.5,31 12,33.5 C 10.5,34.5 10.5,36 10.5,36 C 9,37.5 11,38.5 11,38.5 C 17.5,39.5 27.5,39.5 34,38.5 C 34,38.5 35.5,37.5 34,36 C 34,36 34.5,34.5 33,33.5 C 32.5,31 32.5,31.5 33.5,30 C 34.5,28 36,28 36,26 C 27.5,24.5 17.5,24.5 9,26 z "
      style="stroke-linecap:butt;" />
    <path
      d="M 11.5,30 C 15,29 30,29 33.5,30"
      style="fill:none;" />
    <path
      d="M 12,33.5 C 18,32.5 27,32.5 33,33.5"
      style="fill:none;" />
  </g>
    </defs>
<g id="gridlines"><path stroke="#d7d7d7" stroke-opacity="1" stroke-dasharray="3,3" shape-rendering="geometricPrecision" d="M0,0 L0,384 M48,0 L48,384 M96,0 L96,384 M144,0 L144,384 M192,0 L192,384 M240,0 L240,384 M288,0 L288,384 M336,0 L336,384 M0,0 L384,0 M0,48 L384,48 M0,96 L384,96 M0,144 L384,144 M0,192 L384,192 M0,240 L384,240 M0,288 L384,288 M0,336 L384,336 "/><path stroke="#00f50f" stroke-dasharray="3,3" shape-rendering="geometricPrecision" d="M0,0 L0,384 M384,0 L384,384 M0,0 L384,0 M0,384 L384,384 "/></g>
  <text alignment-baseline="baseline" text-anchor="start" id="cell_location" x="400" y="30">Hello</text>
</svg>

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

How to retrieve the value of an input field in Angular 2/Typescript without using ngModel

Currently, I'm utilizing Typescript in conjunction with Angular2, mirroring the structure of the Angular2 Tour of Heroes guide. There is a specific input field that I aim to associate a change event with, triggering custom logic whenever the value wi ...

javascriptangulartypescript

Using the PUT method in combination with express and sequelize

I am having trouble using the PUT method to update data based on req.params.id. My approach involves retrieving data by id, displaying it in a table format, allowing users to make changes, and then updating the database with the new values. Here is the co ...

javascriptdatabaserestexpresssequelize.js

Troubleshooting: Issues with VueJS Class Binding Functionality

In my form, I have an input field that is validated to check if it is empty or not. If the input field is empty, a red border is applied using class binding. However, when the user focuses on the input field after receiving the error, the error message sh ...

javascriptvue.js

Click on a button to display the corresponding DIV while hiding the rest, all achieved with the power of Vue

I'm seeking guidance as a newcomer to Vue, so please bear with me if my question appears simplistic. My scenario involves a set of buttons and corresponding div elements. The goal is to show a specific div when its associated button is clicked, while ...

javascriptvue.jsvuejs3

Bootstrap 5 - centering "padding" both internally and externally within the accordion

Need help aligning three Boostrap 5 grids: Header outside of accordion Overview in accordion header Details in accordion body The accordion header has margins and padding on the left and right, and the collapse icon also occupies some space. I want the ...

javascripthtmlcssbootstrap-5

Modifying an element in an array while preserving its original position

Currently, I am working on updating the state based on new information passed through response.payload. Here is my existing code snippet: if(response.events.includes('databases.*.collections.*.documents.*.update')) { setMemos(prevState => pre ...

javascriptreactjsappwrite

What is the alternative to using echo when outputting HTML?

I am working on a function... $post_text .= '<div style="font-size: 15px; color: blueviolet">'; $post_text .= "<br>"; $post_text .= 'Text number 1.'; $post_text .= "<br>"; $post_text .= 'Text number 2.'; $po ...

phphtmlreturnecho

Developing mobile-friendly applications with AngularJS, incorporating ngTouch into directives

Utilizing ngTouch to eliminate the delay on mobile devices has been effective, however, I have encountered an issue where clicking on an image does not trigger the expected behavior. In my application, clicking on an image is supposed to activate a directi ...

javascriptangularjsangular-touch

What benefits does the useCallback() hook offer in addressing function equality concerns within React?

Exploring useCallback() Hook In my quest to grasp the inner workings of the useCallback() hook in React and its significance in resolving function equality concerns, I came across a blog post shedding light on the topic. However, there are still some aspe ...

javascriptreactjsreact-hooksmemoization

Enhance user experience with dynamic color changes in JavaScript

Looking to create a navigation menu with unique colors for each selected state? Check out the code below! After searching extensively, I stumbled upon this snippet. While it only includes one selected state, you can easily customize it for three different ...

javascriptcss

The issue I encountered with Angular's Mat-Select component is that the openedChange

When a user opens the mat-select, I am attempting to set CSS style using custom code. However, I am encountering an undefined error. Upon checking in the console, I noticed that the panel value is returning undefined. Can someone please advise me on how to ...

htmlcssangularangular-material

Select the date that is three months from now using the datetimepicker feature of Bootstrap

I have two datetimepicker fields for selecting a start date and end date. I am utilizing the eonasdan datetimepicker plugin for Bootstrap. I am trying to set the range from the current date up to 3 months ahead. However, when I use maxdate:'+90d&apo ...

phphtmltwitter-bootstrapdatetimepicker

What is the best way to reposition the origin of the canvas to the center?

As a beginner in html and JavaScript, I am currently working on a program that involves points and lines in a coordinate system. However, the canvas for html5 has its origin at the upper corner, and I need to create a coordinate system with the origin at ...

javascripthtmlcanvas

I am in need of a efficient loader for a slow-loading page on my website. Any recommendations on where to find one that works

I'm experiencing slow loading times on my website and I'm looking to implement a loader that will hide the page until all elements are fully loaded. I've tested several loaders, but they all seem to briefly display the page before the loader ...

javascriptjqueryhtmlperformancegoogle-chrome

Choose a country from a modal in a React application

click here for image description I need help implementing the screenshot above. My goal is to change the default country name and flag when a user clicks on the country dropdown menu. I have been using headless UI so far, but I'm struggling to figure ...

javascriptreactjsnext.jsheadless-ui

Utilize MaxMind GeoIP2 to identify the city accurately

I have been using this simple code to retrieve the city name through the maxmind service (geoip2). It has been working flawlessly and I am grateful to a fellow member of this site who shared this code with me. However, there is an issue when the user&apos ...

javascriptjquerygeolocation

Validation of default values in contact forms

Obtained a free contact form online and hoping it works flawlessly, but struggling with validation for fields like "Full Name" in JS and PHP. Here is the HTML code: <input type="text" name="contactname" id="contactname" class="required" role="inpu ...

phpjavascripthtml

Is there a way to transfer multiple functions using a single context?

Having created individual contexts for my functions, I now seek to optimize them by consolidating all functions into a single context provider. The three functions that handle cart options are: handleAddProduct handleRemoveProduct handleC ...

javascriptjavahtmlcssreactjs

The functionality of aos.css seems to be malfunctioning on a Django-powered website

I recently set up a django backend website and attempted to incorporate CSS in my HTML using the following code snippet. {% load static %} <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid ...

cssdjangoaos.js

When I move to a different page, Javascript ceases to function

Currently, I am in the process of creating a user interface with the use of html, css, and javascript. One of the features in my project is an "Exit" menu item that triggers window.close(); when clicked to close the user interface. Strangely, this functio ...

javascripthtmlcss