Adjusting the size of elements and the dimensions of the browser window

My challenge involves a container with multiple buttons that are absolutely positioned. I would like these buttons to dynamically resize based on the width of the browser window. Essentially, I want both the size and position of the buttons to adjust accordingly. The layout resembles a checkboard pattern with some potential variations.

<div id="seats">
   <div class="row">
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   </div>
   <div class="row">
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   </div>
</div>

I suspect that using only CSS won't be sufficient in this case. The seat elements are being generated by server-side code, each one being absolutely positioned using inline CSS. Therefore, it appears that implementing some JavaScript code will be necessary.

javascriptjquerycsshtml

Answer №1

If you want to specify simple percentages in absolute coordinates, you can do so. However, assigning different positions to individual "seat" classes is not practical.

In this scenario, a better solution could be:

<style>
.seats {
   display: block;
   position: relative;
}

.seat {
   display: inline-block;
   position: static;
   width: 25%;
   height: 10%;
}
</style>
<div id="seats">
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
</div>

I recommend delving into fluid design for further understanding.

Alternatively, if you must use only absolute positioning for some obscure reason, here's a specific solution:

<style>
#seat1 {
   display: block;
   position: absolute;
   left: 13%;
   right: 19%;
   top: 17%;
   bottom: 29%;
}

#seat2 {
   display: block;
   position: absolute;
   left: 18%;
   right: 23%;
   top: 45%;
   bottom: 67;
}

// And include other seat declarations with their absolute coordinates!

</style>
<div id="seats">
   <input type="button" id="seat1"/>
   <input type="button" id="seat2"/>
   <input type="button" id="seat3"/>
   <input type="button" id="seat4"/>
   <input type="button" id="seat5"/>
   <input type="button" id="seat6"/>
</div>

This approach will replicate the intended layout.

Just a heads up: using absolute positioning extensively may lead to unforeseen issues.

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

developing an associative object/map in JavaScript

I have a form featuring various groups of checkboxes and I am attempting to gather all the selected values into an array, then pass that data into an Ajax request. $('#accessoriesOptions input').each(function(index, value){ if($(this).prop(& ...

javascriptjqueryajax

Automatically reconstructing local packages when changes occur

After installing a local package using npm local paths, I am looking for a way to automatically rebuild or re-install the package whenever I make changes to the file. Can anyone help me with this? I have searched online extensively but haven't come a ...

javascriptnpm

Multiple onClick events being triggered unexpectedly upon component re-render

My react component is a form that triggers a function to handle data saving and other tasks when the send/submit button is clicked. The issue arises when the component seems to re-render multiple times after the button click, most likely due to updated ex ...

javascriptreactjs

Transmitting live video to rtmp using the client's web browser

Is it feasible to stream video from a client browser to an RTMP server without using Flash? I am searching for an alternative solution. https://github.com/ahyswang/actionscript-publisher I found this to be effective, but it relies on Flash. Do I need to ...

htmlflashwebrtcrtmp

Loop through object in React

I have what seems to be a beginner question with potentially many answers available. The object named Country.js is defined as follows: const Country = { albania: { 'countryNo': 70, 'name': { ...

javascriptreactjs

"Fixing the issue of an undefined option being added to

In my controller, I have defined an object called tempScale: $scope.tempScale = { scaleType : [], deviations : [], intervals : 0 }; This object is connected to the HTML through this code: <select id="scales" ng-model="tempScale.scaleType" ...

javascripthtmlangularjs

Any property modified by an event handler will consistently appear in its original form

Every second, a simple function is called using setInterval, with the goal of determining mouse or keyboard activity. The variable that tracks the activity is updated, but it always remains set to 0 despite the fact that console.log statements are being e ...

javascriptnode.js

What is the best method for transforming JSON into JSONP?

I have written the following code to send JSON data to the front end. However, we are facing cross-domain security issues and need to convert it to JSONP. Can anyone suggest what modifications I should make for this conversion? Server-side Code JsonFac ...

javajqueryjsonjsonp

The issue with Ajax file upload is that it only processes the first file in the filelist array for

I am struggling with an issue while using jquery and materialize for asynchronous file upload and form submit. The code seems to work fine when I use get(0).files[0], but it only returns the first file at index [0]. However, when I attempt to loop through ...

javascriptphpjqueryajax

Optimal method of creating and initializing store items in Vue using Vuex

As a newcomer to Vue, I am exploring the best approach to manipulate a "master" store object by stripping keys, renaming others, and creating an altered version to save as a new store item. In my App.js file, I initiate a "loadData" action within the crea ...

javascriptvue.jsvuex

Error: The function clickHandler has been referenced before it was declared or it has already been declared

Since I started using JSLint, I have encountered the common issues of "used before defined" and "is already defined." While I found solutions for some problems, I am currently stuck. Here is a snippet of my code: var foo; foo = addEventListener("click" ...

javascriptjslint

Attempting to send an email through a contact form using jquery-validation, successfully passing all validation checks yet not receiving the email

My goal is to master the process of creating a form, validating the input, sanitizing the data, and sending it to myself via email. To kick things off, I crafted an HTML form and incorporated the fantastic jquery-validation plugin found here. The frontend ...

phpjqueryvalidationemail

How to retrieve the ID of a parent sibling using jQuery DataTables

I have encountered a peculiar issue while trying to retrieve the ID of a table's parent sibling. Prior to initializing jQuery DataTables, obtaining the table's ID poses no problem. However, once it is initialized and the table is built, retrievin ...

javascriptjquery

What happens to the npm package if I transfer ownership of a github repository to a different user?

I was considering transferring a GitHub repository to another user or organization, but I have concerns about what will happen to older versions of the npm package associated with it. Let's say my Node.js package is named node-awesome-package. Versi ...

javascriptnode.jsgithubnpm

Preventing audio from being muted using JavaScript requires the removal of audio tags through a MutationObserver

I attempted to utilize the script below to eliminate all audio from a specific website: // ==UserScript== // @name addicto // @namespace nms // @include http://* // @include https://* // @version 1 // @grant none // ==/UserScrip ...

javascripthtml5-audiomutation-observers

Implementing fancybox with an ajax call in jQuery/JS

Currently, to create a fancybox you set up a link and define some parameters: $("a#a_sendMail").fancybox({ 'titleShow' : false, 'width': 400, 'height': 120, 'autoDimensions': false, 'overlayOpacity&ap ...

jqueryajaxrequestfancybox

I want to incorporate a smoother transition into my code

Can someone assist me in incorporating an easein effect into my animate function? I have included my code below. $('.img_left').animate({ 'margin-left' : '180px', 'opacity' : '1'}, 3000); Your help will b ...

jquery

I will evaluate two arrays of objects based on two distinct keys and then create a nested object that includes both parent and child elements

I'm currently facing an issue with comparing 2 arrays of objects and I couldn't find a suitable method in the lodash documentation. The challenge lies in comparing objects using different keys. private parentArray: {}[] = [ { Id: 1, Name: &ap ...

javascriptangularjstypescriptlodash

Using angular2's ngRepeat to iterate over XML data

I have successfully transformed my XML data into JSON format to be utilized in Angular 2 within my view. However, as I attempt to loop through the data using a for(var... loop, I encounter an error message stating that it cannot find name array and that th ...

javascriptxmlforeachangular

Is that file or directory non-existent?

While working on developing a Discord bot, I keep encountering an error message stating: "Line 23: no such file or directory, open 'C:\Users\Owner\Desktop\Limited Bot\Items\Valkyrie_Helm.json']" even though the filep ...

javascriptnode.jsnpmdiscorddiscord.js