Creating responsive HTML page text and table with the use of JavaScript

Question

Creating responsive HTML page text and table with the use of JavaScript

Trying to create a responsive webpage has been a bit challenging. I experimented with height,style.height, style.OffsetHeight, etc. but still struggling to dynamically make a square table.

Although the code below changes the height, the table's width and height do not align.

var width = table.offsetWidth;
table.setAttribute("style","height:"+ width + "px;");

Should the logic be applied to cells or the table itself?
How can text (font-size) and other elements be made responsive?
Is there a way to calculate 60% of the screen height so the minimum of width and height can be set as the table parameters?

Design Pattern : Design

Code : jsfiddle

Thank you in advance.

javascript html css cordova

Answer 1

Answer №1

1. When applying logic to a table, the following code can be used for dynamic resizing:

window.addEventListener('resize', handlersize);

function handlersize(){
  width = table.offsetWidth;
  table.setAttribute("style", "height:" + width + "px;")
}

To adjust the font size, utilize the CSS style font-size: 3vw; or another appropriate value.

3. To obtain 60% of the screen height:

var element = document.getElementsByTagName("BODY")[0];
height = element.offsetHeight;
height = height * 0.6;

Answer 2

1. When applying logic to a table, the following code can be used for dynamic resizing:

window.addEventListener('resize', handlersize);

function handlersize(){
  width = table.offsetWidth;
  table.setAttribute("style", "height:" + width + "px;")
}

To adjust the font size, utilize the CSS style font-size: 3vw; or another appropriate value.

3. To obtain 60% of the screen height:

var element = document.getElementsByTagName("BODY")[0];
height = element.offsetHeight;
height = height * 0.6;

Answer 3

Answer №2

Take a look at this JSFiddle example

To make sure your tables resize properly when the window size changes, you'll need to include an resize event listener on the window element. When the window is resized, the function handlersize will be triggered, updating the height of your tables accordingly.

window.addEventListener('resize', handlersize);

function handlersize() {
  width = table.offsetWidth;
  table.setAttribute("style", "height:" + width + "px;");
}

Answer 4

Take a look at this JSFiddle example

To make sure your tables resize properly when the window size changes, you'll need to include an resize event listener on the window element. When the window is resized, the function handlersize will be triggered, updating the height of your tables accordingly.

window.addEventListener('resize', handlersize);

function handlersize() {
  width = table.offsetWidth;
  table.setAttribute("style", "height:" + width + "px;");
}

Answer 5

Answer №3

Consider using a separate div-based HTML structure for mobile views rather than tables, as divs are more responsive and can be styled using media queries.

Check out this example: https://codepen.io/amwill04/pen/QNPpqx

Here's an example of the code:

<div class="table" id="results">
  <!-- Table content here -->
</div>

CSS :

.table {
    display: table;
    text-align: center;
    width: 60%;
    margin: 10% auto 0;
    border-collapse: separate;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
  }

  /* More CSS styles here */

  @media screen and (max-width: 900px) {
    /* Media query CSS styles */
  }

  @media screen and (max-width: 650px) {
    /* Additional media query CSS styles for smaller screens */
  }

By implementing a div-based structure with appropriate CSS styling, you can ensure better responsiveness on various devices. Feel free to explore the provided example for a clearer understanding.

Answer 6

Consider using a separate div-based HTML structure for mobile views rather than tables, as divs are more responsive and can be styled using media queries.

Check out this example: https://codepen.io/amwill04/pen/QNPpqx

Here's an example of the code:

<div class="table" id="results">
  <!-- Table content here -->
</div>

CSS :

.table {
    display: table;
    text-align: center;
    width: 60%;
    margin: 10% auto 0;
    border-collapse: separate;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
  }

  /* More CSS styles here */

  @media screen and (max-width: 900px) {
    /* Media query CSS styles */
  }

  @media screen and (max-width: 650px) {
    /* Additional media query CSS styles for smaller screens */
  }

By implementing a div-based structure with appropriate CSS styling, you can ensure better responsiveness on various devices. Feel free to explore the provided example for a clearer understanding.

Creating responsive HTML page text and table with the use of JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Slider with Dual Images: A Visual Comparison

Tips for implementing FontAwesome in Nuxt3

Challenges encountered with the "load" event handler when creating a Firefox Extension

Managing the ERR_NAME_NOT_RESOLVED issue

Using HapiJs in Node.js to communicate data back and forth with the client

navigating through an array with a loop (for)

Is it possible for Vue Router to remember the scroll position on a route and return to the same position when navigating back?

Determining the current element's index as I scroll - using Jquery

The functionality of the `next-auth` signOut button click does not seem to accept a variable as input, although

Shorten a string once a particular word is found in either Smarty or JavaScript/jQuery

Ways to ensure the footer sticks to the bottom of the page when there is minimal content

Develop a seamless user experience by creating dynamic forms using Jquery, PHP, and

How can I access the fourth div element within the initial row of a multirow div container?

Koajs functions yield their return values

Adjusting the display property using the CSS plus symbol operator

Using both PHP and jQuery to add a class upon changing the URL

Modifying the Ext.js TreePanel checkbox component

Adding individual flag icons for each country in your Datatables can be a significant enhancement to

Tips on displaying a successful message and automatically refreshing the page simultaneously

What is the best way to create a deep clone of an XMLDocument Object using Javascript?