I am having trouble getting my cont.style line to work properly within this function

Why isn't my cont.style line working properly within each if condition?

I'm trying to update the height of my bars in the code where this function is called, but the main cont.style line under each if condition doesn't seem to be functioning correctly. Strangely, the one written under the else condition works perfectly fine.

I suspect there might be an issue with the if conditions or the parameters being passed to the update function. I even attempted passing array_size as a parameter, but the same error persists. The if condition is intended for mobile view, and within each nested if statement, the array size is adjusted to ensure that the bars are easily visible on mobile devices.

function update(cont, height, color) {
  window.setTimeout(function() {
    if (window.matchMedia("(max-width: 600px)").matches) {
      if (array_size > 20 && array_size < 30) {
        array_size = array_size % 10;
        cont.style = " margin: " + margin_size + "%; width:" + (100 / array_size - (2 * margin_size)) + "%; 
        height: " + (height) + "% ;
        background: " + color + ";
        ";
      }
      if (array_size > 30 && array_size < 40) {
        array_size = array_size % 10 + 10;
        cont.style = " margin: " + margin_size + "%; width:" + (100 / array_size - (2 * margin_size)) +
          "%; height:" + (height) + "%; background:" + color + ";";
      }
      if (array_size > 40 && array_size < 50) {
        array_size = array_size % 10 + 15;
        cont.style = " margin: " + margin_size + "%; width:" + (100 / array_size - (2 * margin_size)) +
          "%; height:" + (height) + "%; background:" + color + ";";
      }
      if (array_size == 30 || array_size == 40 || array_size == 50) {
        array_size = array_size % 10 + 12;
        cont.style = " margin: " + margin_size + "%; width:" + (100 / array_size - (2 * margin_size)) +
          "%; height:" + (height) + "%; background:" + color + ";";
      }

    } else {
      cont.style = " margin: " + margin_size + "%; width:" + (100 / array_size - (2 * margin_size)) +
        "%; height:" + (height) + "%; background:" + color + ";";
    }
  }, delay += delay_time);
}

Answer №1

Adjust the cont.style properties accordingly

   if (array_size > 20 && array_size < 30) {
            array_size = array_size % 10;
            cont.style.marginLeft = margin_size + "%";
            cont.style.width= (100 / array_size - (2 * margin_size))+"%"; 
            cont.style.height= height+"%" ;
            cont.style.background= color;
          }

Answer №2

It appears that you may be seeking to utilize the cssText property based on your objectives.

function enhanceLayout(cont, height, color) {
  window.setTimeout(function() {
    if (window.matchMedia("(max-width: 600px)").matches) {
      if (array_size > 20 && array_size < 30) {
        array_size = array_size % 10;
        cont.style.cssText = " margin: " + margin_size + "%; width:" + (100 / array_size - (2 * margin_size)) + "%; 
        height: " + (height) + " % ;
        background: " + color + ";
        ";
      }
      if (array_size > 30 && array_size < 40) {
        array_size = array_size % 10 + 10;
        cont.style.cssText = " margin: " + margin_size + "%; width:" + (100 / array_size - (2 * margin_size)) +
          "%; height:" + (height) + "%; background:" + color + ";";
      }
      if (array_size > 40 && array_size < 50) {
        array_size = array_size % 10 + 15;
        cont.style.cssText = " margin: " + margin_size + "%; width:" + (100 / array_size - (2 * margin_size)) +
          "%; height:" + (height) + "%; background:" + color + ";";
      }
      if (array_size == 30 || array_size == 40 || array_size == 50) {
        array_size = array_size % 10 + 12;
        cont.style.cssText = " margin: " + margin_size + "%; width:" + (100 / array_size - (2 * margin_size)) +
          "%; height:" + (height) + "%; background:" + color + ";";
      }

    } else {
      cont.style.cssText = " margin: " + margin_size + "%; width:" + (100 / array_size - (2 * margin_size)) +
        "%; height:" + (height) + "%; background:" + color + ";";
    }
  }, delay += delay_time);
}

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

What is the best way to conceal a modal using jquery?

Click button to open modal: <button type="button" class="btn" onclick="CountClass()" runat="server" data-toggle="modal" data-target="#inlineForm1">OPEN</button> The modal code: <div class="modal fade text-left" id="inlineForm1" tabindex=" ...

Creating a dynamic SlickGrid spreadsheet - a step-by-step guide

My curiosity has been peaked by the SlickGrid plugin. It caught my attention because of the spreadsheet example, but unfortunately I couldn't get it to work. Is it truly feasible to create a spreadsheet where you can select a range of cells and copy/p ...

Is the latest update of Gatsby incompatible with Material UI?

Encountering an issue while running this command portfolio % npm install gatsby-theme-material-ui npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class= ...

The result of using `path.dirname()` on a Windows path will simply return a period

While developing a Vue JS application within electron JS, I encountered an issue specific to Windows operating systems. It seems that the path.dirname() function is returning just a dot . instead of the expected directory path on Unix systems. For example ...

Are multiple .then(..) clauses in Javascript promises better than just using one .then(..) clause?

In this particular scenario, I have set up a basic 'toy' node.js server that responds with the following JSON object: { "message" : "hello there" } This response is triggered by making a GET request to "http://localhost:3060/" So, it's reall ...

Guide on passing HTML strings as elements within an array to Jade using Node.js

As I work on developing a blog engine using Nodejs with express4 and jade, my goal is to pass posts as strings of HTML to jade and then loop through them. I've created an array filled with valid HTML strings such as console.log(items[0]); // prints: ...

Exploring the benefits of utilizing Ajax for posting data into

UPDATE: Here's the code I've put together, but unfortunately it's still not functioning... $(document).ready(function(){ $("tr").click(function(){ txt=$("input[name=path]").val(); $.ajax({ type: "POST", url: contract.php, ...

Compiling this HTML template in dev mode with Vue is agonizingly slow

I've been working with a template app setup that was bootstrapped using vue CLI. Within one of my components, I have 20 nested div tags. During development mode, it's taking roughly 10 seconds to compile this component. The more deeply I nest HTM ...

What could be causing my scrollable div to not function properly within a Bootstrap modal?

I am facing a frustrating issue. I have a simple DIV element that I want to make scrollable, containing a table inside it. The process should be straightforward as I have a separate .html file with the code that functions correctly. Here is an excerpt of ...

Import JSON Data into Angular-nvD3 Chart (AngularJS)

I am seeking help to load encoded JSON Data retrieved from a database via queries into an Angular-nvD3 graph. I am unsure about the best approach to achieve this task. The encoded JSON data is fetched using API queries from a database table called PRODUCT ...

What methods can be used to modify the appearance of the cursor depending on its position?

Is there a way to change the cursor to a left arrow when on the left half of the screen and switch it to a right arrow when on the right half, using JavaScript? I am trying to achieve something similar to what is shown on this website. I attempted to acco ...

Obtaining a pdf file using javascript ajax is a straightforward process

Looking to access my JavaScript file generated by a microservice (byte[]): public int retrieveLabel(Request request, Response response) throws IOException { response.header("Access-Control-Allow-Origin", "*"); ArrayList<JSONObject> orders = ...

Adding static JSON array data to the results received from an API call

Within my code snippet below, I am able to retrieve a JSON Response: respArray = [] respArray = respBody.classifiers respBody = respArray if (respBody.length > 0) { respBody = applyPagination(respBody, reqParams.filter, option ...

A boolean remains constant in its value

I'm facing a challenge with my code and am struggling to understand why it's not behaving as I anticipated. The issue arises when the boolean variable "x" changes its value each time I click on the #btn: $(document).ready(function() { var x = ...

The trick to getting VSCode to resolve the "@" symbol in imports

In a Vue.js project that utilizes Webpack, the imports use @ as an alias for the src directory. How can I configure VSCode to properly resolve this alias and enable intellisense for those imports? I have come across various methods online on setting up al ...

How to include multiple lines within an HTML text box

I need help making my text box display multiple lines while maintaining the current design. I am new to HTML/CSS, so any advice on how to achieve this would be greatly appreciated! Additionally, I want to center the button at the bottom of the text box. H ...

Executing a function from within a promise in JavaScript

Understanding the Code In this code snippet, there is a function named placeDecode that takes an HTML input element as a parameter. Inside this function, there is a promise used to convert the input value into a formatted address. The function placeDecod ...

Having difficulty incorporating custom JavaScript files into a testing framework

I am facing a unique challenge while integrating the Page Object design pattern into my test suite using selenium-webdriver and node.js. The first page object, pageObject/admin/login/index.js, works seamlessly. It contains selectors and methods to fill ou ...

Utilizing AJAX with jQuery to transmit information to a PHP script

I am trying to extract data from HTML using JavaScript, send it to PHP, and then receive the result back in JavaScript. After searching extensively, I have been unable to find a code snippet that works for my specific case. Here is the JavaScript code I ...

Custom JavaScript code in Bootstrap Navbar Toggler results in closing the menu when a dropdown is clicked

As a newcomer to JavaScript, I am currently learning the language while working on a website. I have customized a template that I found online but am struggling with the JS code that I'm not very familiar with. Here's my issue: When using the na ...