Determine CSS property according to a certain condition

When a condition is met based on the length of the variable usecase, a CSS grid class is set using the following code:

jQuery(".uc"+useCases).addClass((landingPageData.description.useCases.length == 2) ?  'ibm-col-12-6' : 
 (landingPageData.description.useCases.length == 3) ? 'ibm-col-12-4' : 'ibm-col-12-3').attr('style','display:block');

Similarly, I aim to adjust the width percentage of a CSS class .ibm-columns based on the same condition as mentioned above.

The syntax provided below is just for representation purposes and needs to be corrected:

jQuery(".ibm-columns").css((landingPageData.description.useCases.length == 2) ? 'width: 60%;' : 
 (landingPageData.description.useCases.length == 3) ? 'width: 70%;' : 'width: 95%;');
javascripthtmljquerycss

Answer №1

Your problem lies in the syntax error. Instead of providing two separate arguments to css(), you are passing them as a single string.

To resolve this issue, input the values within an object:

jQuery(".ibm-columns").css((landingPageData.description.useCases.length == 2) ? 
   { 'width': '60%' } : 
   (landingPageData.description.useCases.length == 3) ? 
      { 'width': '70%' } : 
      { 'width': '95%' });

It is recommended to break down the ternary operator and save the value in a variable for better code readability:

let width = landingPageData.description.useCases.length == 2 ? '60%' :
    landingPageData.description.useCases.length == 3 ? '70%' : '95%';

jQuery(".ibm-columns").css('width', width);

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

Utilizing JavaScript to conceal div elements within a ul container

How can I hide specific div tags inside a ul tag using JavaScript? All div tags are currently getting hidden when I use the id of the ul tag. However, I need only the first div tag to be shown and the rest to be hidden. Here is the HTML code: <ul clas ...

javascriptjqueryhtml

Filter JSON data deeply for specific values

I am attempting to filter JSON data based on user checkbox selections in JavaScript. The challenge I'm facing is implementing multi-level filtering. The data has two dimensions that need to be filtered: first by OS selection and then by a selected que ...

javascriptjqueryangularjs

Disorganized jQuery Animation

Looking for some help with an animation I have on my website. The animation is supposed to smoothly move in and out when the mouse cursor hovers over it, but as you can see, it's a bit messy. This project involves HTML, CSS, and jQuery <!DOCTYPE ...

jquerycsshtmlanimation

Protect the integrity of string output while maintaining the original spacing

When working with Angular, I often utilize the string output method like this: <div>{{stringWithValue}}</div> However, a problem arises when my string is either just a whitespace or empty - the value does not get rendered. To address this issu ...

htmlangular

Utilizing Javascript / Jquery for Storing Data Locally (Bypassing the Use of HTML

I am interested in creating a storage mechanism like Local Storage found in HTML5 using JavaScript or jQuery. However, I am feeling clueless about how to kickstart this project. Is there anyone who can provide guidance on how to incorporate local storage ...

javascriptjquery

Can CSS actually generate accurate inches?

Can you accurately set the width of an element, like a div, in inches and expect it to maintain that width across different devices? Or will it simply scale at a ratio like 1in = 96px? Edit: Try using CSS to set an element's width in inches and then ...

javascriptcsshtml

Unable to modify the chosen option within a select dropdown

I am trying to change the selected option of a select element using jQuery, but I can't seem to make it work. Here is the code I have: $("#ID option[value=grpValue]").prop('selected', 'selected').change(); If I manually type in a ...

javascriptjqueryhtml-select

A guide to extracting text from HTML elements with puppeteer

This particular query has most likely been asked numerous times, but despite my extensive search, none of the solutions have proven effective in my case. Here is the Div snippet I am currently dealing with: <div class="dataTables_info" id=&qu ...

javascripthtmlnode.jspuppeteerinnertext

Run a series of functions with arguments to be executed sequentially upon the successful completion of an ajax request

I am currently working on implementing a couple of jQuery functions to assist me in testing some api endpoints that I am developing in php. While I have limited experience with Javascript and jQuery, I am struggling to figure out what additional knowledge ...

javascriptjqueryajax

Tips and techniques for breaking down a URL to trigger a click event using jQuery

When the URL in a browser address bar is http://fiddle.jshell.net/ynts/s5S6U/show/light/#header2-tab3-p2, the following actions should take place: Click on the element with a href="#header2" attribute Click on the element with a href="#tab3" attribute Cl ...

jqueryparsingtabs

Align the content to the right and center it within the table

One common issue I face is working with tables that contain numbers requiring right alignment to ensure the ones/tens/hundreds/thousands places line up correctly. Here's an example: 2,343 1,000,000 43 43,394 232,111 In these tables, ...

javascriptjquerycss

Side navigation bar with a fixed position

My side nav bar has a strange behavior. I set the float to be right and then added position: fixed; but it suddenly floated to the left. Can anyone explain why this happened? This is my HTML: <div id="navbar"> <ul> <li><a href="def ...

htmlcsswebnavbar

Deciphering the output from json_encode using Jquery

As someone who is relatively new to working with JSON, I'm facing a challenge in figuring out how to parse a specific JSON response. I've done quite a bit of research on this topic, but I haven't come across anything that directly addresses ...

phpjquerymysqljson

The Z Index will not be effective because the position is already set to relative or absolute

I'm having an issue with a tooltip on my website. Despite adding the necessary CSS positions, the tooltip does not display correctly. The problem arises when the tooltips from the icons on the left don't show up properly on top of the content to ...

htmlcssz-indexcss-position

Efficient Voting System Implementation with Rails Ajax Partial Rendering

I've encountered an issue with re-rendering a partial using an Ajax request. Oddly enough, I can successfully execute other functions through the js file, such as alert() and modifying the html within the current div. However, when attempting to rende ...

jqueryajaxruby-on-rails-3.2

How can we develop an AJAX chat with enhanced scrolling capabilities?

Could someone provide me with some examples on how to achieve this task? I already have some HTML code: <div id="chatDisplay"> </div> <input type="text" id="message" /><input type="button" id="send" value="Send" /> Next, I have so ...

htmlajaxjquery-pluginsjquery

Issue with the <authorization> node in the Web.config file

Whenever I include <authorization>, the page is displayed without the CSS. Does anyone have any thoughts on why this might be happening? Below is my web.config: <?xml version="1.0"?> <configuration> <connectionStrings> <a ...

asp.net.netcssweb-configauthorization

Top method for centering a flexible SVG vertically once the page width becomes too narrow

Currently, I have two SVG images displayed side by side on a webpage. One SVG needs to maintain a fixed size while the other should scale as needed, and I have achieved this functionality. However, I am facing an issue where I want the two SVGs to align v ...

javascriptjqueryhtmlcss

Is there a way to use CSS to break one word at the end of a line and move the next word to the next line?

My desired format: _________ Thanks fo|r your answ|er! not the following: _________ Thanks | for your | answer! | also not this: _________ Thanks fo|r your answer! ...

htmlcss

Transforming dates in JavaScript

So I have a situation where I need to call php from javascript. The URL address is Jun 18 18:00:00 UTC+0200 in the year 2013, but that format is not suitable for my needs. I want to convert it to the format YYYY-MM-DD, either using JavaScript or PHP. An ...

phpjavascript