Adjusting Column Widths with JavaScript

Currently, I am attempting to find a solution on how to adjust column widths and heights using JavaScript so that they can be set based on the browser window size. I have tried the code below, but it does not seem to be working as expected. Any assistance would be greatly appreciated.

<script type="javascript">
function size()
{
    document.getElementById("body").style.width = window.innerWidth;
    document.getElementById("body").style.height = window.innerHeight;
    
    var width = document.getElementById("body").style.width;
    var height = document.getElementById("body").style.height;

    document.getElementById("header").style.height = (.15 * height);
    document.getElementById("loginbox").style.height = (.15 * height);
    document.getElementById("navigation").style.height = (.05 * height);
    document.getElementById("leftpanel").style.height = (.70 * height);
    document.getElementById("contentarea").style.height = (.75 * height);
    document.getElementById("addcolumn").style.height = (.75 * height);
    document.getElementById("footer").style.height = (.10 * height);

    document.getElementById("header").style.width = (.75 * width);
    document.getElementById("loginbox").style.width = (.25 * width);
    document.getElementById("navigation").style.width = width;
    document.getElementById("leftpanel").style.width = (.20 * width);
    document.getElementById("contentare").style.width = (.65 * width);
    document.getElementById("addcolumn").style.width = (.15 * width);
    document.getElementById("footer").style.width = width;
}    
</script>

I utilize CSS to properly align the columns based on requirements, and then call the function `size()` within the body tag ( onload=size() ). However, the output is not as expected.

If anyone could offer guidance or solutions, I would be grateful!

javascriptcss

Answer №1

When working with style attributes, it's important to remember that they are strings and require a unit at the end:

document.getElementById("addcolumn").style.width = (width + "px");

It is also likely that you will need to set width and height like this:

var width = window.innerWidth;
var height = window.innerHeight;

Answer №2

Here is an alternative approach to achieve the same result, making it easier to maintain:

function adjustSize() {
    var dimensions = {
        header: {
            width: .75,
            height: .15
        },
        loginbox: {
            width: .25,
            height: .15
        },
        navigation: {
            width: 1,
            height: .05
        },
        leftpanel: {
            width: .2,
            height: .7
        },
        contentarea: {
            width: .65,
            height: .75
        },
        addcolumn: {
            width: .15,
            height: .75
        },
        footer: {
            width: 1,
            height: .1
        }
    },
        bodyEl = document.getElementById('body'),
        viewportWidth = bodyEl.style.width = window.innerWidth,
        viewportHeight = bodyEl.style.height = window.innerHeight;

    for (var key in dimensions) {
        if (!dimensions.hasOwnProperty(key)) continue;
        var el = document.getElementById(key),
            values = dimensions[key];
        el.width = (viewportWidth * values.width) + "px";
        el.height = (viewportHeight * values.height) + "px";
    }
}

Please note: This code has not been tested yet, but it is expected to function correctly.

Answer №3

Instead of using complex styling, consider utilizing basic CSS by setting the width to a percentage value.

width: 50%;

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

Adding HTML and scripts to a page using PHP and JS

Currently, I am utilizing an ajax call to append a MVC partial view containing style sheets and script files to my php page. Unfortunately, it seems that the <script> tags are not being appended. After checking my HTTP request on the network, I can ...

javascriptphpjqueryhtmlajax

What's the reason behind JavaScript's Every method not functioning properly?

I'm struggling to understand why the array method 'every' is not functioning properly in my project (working on a roguelike dungeon crawler game). Here's an example of the array of objects I am working with: { x: newrm.x, ...

javascriptarrays

Refresh Twitter Bootstrap Tooltip after deactivating/removing

I have a quick question. I am currently dealing with data that is constantly changing and displayed from a selected item in a table. To monitor for overflow, I have implemented the following code: if (event.target.offsetWidth < event.target.scrollW ...

javascriptjquerytwitter-bootstrap

Express Vue Production Problem

I've been attempting to implement SSR in my Vue app, and to achieve this I've incorporated the vue-plugin-ssr extension. To run it with express, I created a new file named server.mjs containing the following code: import express from "expres ...

javascriptvue.jsexpressserver-side-rendering

Having trouble getting the AJAX script to change the background in Internet Explorer?

I'm currently experiencing an issue with an ajax script. Here is the code I am using: <script type="text/javascript"> $(document).ready(function() { $('#savecolor').click(function(){ var myVar = 'data= ...

javascriptjquerycssajax

The component 'AddPlaceModal' could not be located in the path '~/components/AddPlaceModal.vue'

Recently, I started incorporating Nuxt for Vue into my projects. In an attempt to enhance my page, I added a new component within the /components folder. However, I encountered a warning during compilation: "export 'AddPlaceModal' was not found ...

javascriptvue.jsnuxt.js

Tips for Modifying the Color of a Progress Bar with Angular Directive

I am trying to incorporate an angular progress directive into my application. Although I have found a progress bar directive that serves the purpose, I am struggling to modify the color of the progress bar. I would like to assign a custom color to the pro ...

htmlcssangularjsangularjs-directivedirective

Alternative names for Firefox's "error console" in different browsers

Are there similar tools to Firefox's "Error console" available in other web browsers? I rely on the error console for identifying JavaScript errors, but I haven't found a straightforward way to view error messages in other browsers like Internet ...

javascriptbrowser

How to link external css files in a Node.js project

Can I add an external CSS file in node.js using EJS? I attempted to do so, but encountered difficulties: app.use('/static', express.static('/view')) I included the CSS in EJS like this: <link rel="stylesheet" type="text/css" href ...

cssnode.jsexpresssassejs

obtain access token using JavaScript

I am trying to obtain an access token using my refresh token in JavaScript. Here is the code snippet I am using: $.ajax({ type: "POST", contentType: "application/x-www-form-urlencoded", url: "https://accounts.google ...

javascriptjqueryoauth-2.0google-oauth

Building an effective HTTP request for an API using Node.js and Express

As a newcomer to HTTP, I'm venturing into making my first HTTP request. Below is the API reference: https://i.sstatic.net/vPdzU.jpg My attempt at constructing the request goes like this: let reqString = 'GET https://login.yandex.ru/info?format ...

javascriptnode.jshttpexpress

The issue with MaterialUI Select's set value is that it consistently falls outside the expected

I'm currently working on a MaterialUI Select component where I am dynamically handling the value parameter. However, I'm facing an issue where even though I set a valid value from the available options, it always shows as out of range. SelectInp ...

javascriptreactjsmaterial-ui

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

I have a specific div element identified by the id #id1 that contains clickable links. Upon clicking on these links, an AJAX call is made to retrieve additional links from the server. My current approach involves replacing the existing links within #id1 w ...

javascriptjqueryhtmlajax

Tips for identifying the correct selectedIndex with multiple select elements present on one page

How can I maintain the correct selectedIndex of an HTMLSelectElement while having multiple select elements in a loop without any IDs? I am dynamically loading forms on a webpage, each containing a select element with a list of priorities. Each priority is ...

javascriptjqueryhtmlcss

Tips on organizing columns in Vue when sorting is needed for computed values

I have come across various resources for sorting data that is contained within an array, but I am unable to locate any information on how to sort dynamically generated data. <table> <thead> <tr> <th>Program</th& ...

javascriptvue.jsvuejs2vue-component

Running the JavaScript function prior to its interval being triggered

I'm in the process of developing a PHP dashboard page with various features, but there's one particular issue that bothers me, although it's not too major. The problem I'm facing is that I have a JavaScript function that fetches data a ...

javascriptphpajax

Scroll bar malfunction in Highcharts

I am struggling to get the scroll bar working so that all categories can be displayed. I have tried different approaches but haven't been able to figure out where I'm going wrong. See the code in action here: http://jsfiddle.net/manraj/7racxxu0/ ...

javascriptjqueryhighcharts

What is the best way to change an object into a string in node.js?

Recently, I've delved into the world of node js and I'm eager to create a basic coap client and server using this technology. Successfully, I managed to set up a server hosting a text file, but now I aim to access it from the client. var coap = ...

javascriptnode.jsclient-server

Express server encounters a 404 error while processing a POST request

Recently, I encountered an issue while trying to post data to my express server using a function that is triggered by clicking a button. Here's the code snippet of the function: const fetchData = async () => { const response = await fetch(&apos ...

javascriptnode.jsexpresscors

Scss - Only one for mobile devices

Just dipping my toes into scss and I've got a quick question. Here's the snippet of scss code I'm working with: .page { max-width: 1200px; position: relative; width: 100%; ul{ background-color: black; width ...

csssass