Dynamically changing CSS properties

http://jsfiddle.net/U6gWx/1/

$("div.ttt").css('display','block');

There is a filter that might empty the first column, which is set to float:left. When the first column is empty, I want to update the second column's CSS style to float:left as well so they align left when needed. In my fiddle, you can see an overview of my code structure. I'm attempting to achieve this using jQuery with a condition like: 

if(!$('.ab div.ttt').css('display') == 'block'){
- this code is meant to select elements where display is not block and change the style of .cd (second column) accordingly. However, this approach doesn't seem to work for me. Additionally, I need a way to reset it once the items in the left column are back. Essentially, I'm filtering items between left and right columns based on user input.

jquerycss

Answer №1

Give this a shot:

let ttt = $(".ab div.ttt"),
    cd = $(".col.cd");

$("div#click-me").click(function () {
    if (ttt.is(':visible')) {
        ttt.hide();
        cd.css('float', 'left');
    } else {
        ttt.show();
        cd.css('float', 'right');
    }
});

Check out the jsFiddle demo here.

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

Steps to enable an image to be clickable using the Keydown function

I need assistance with my code for an image that moves over divs. After each div is clicked, certain methods are called. How can I simulate a mouse click on the image after it has been moved? Here's my current code snippet: if (e.keyCode == 39) { ...

javascriptjquery

Is it possible to modify the inline onkeyup function?

Looking for a solution to change the onkeyup function in a textarea element from 255 characters to 150 characters without directly editing the code? <textarea cols="50" rows="4" id="textbox" onkeyup="limitArea(this, 255, '')"></textarea ...

javascriptjqueryhtml

Struggling with modifying class in HTML using JavaScript

I've been attempting to replicate a JavaScript code I came across on the internet in order to create a functioning dropdown menu. The concept is quite straightforward - the div class starts as xxx-closed and upon clicking, with the help of JavaScript, ...

javascriptjqueryhtml

Typeahead AJAX in Bootstrap 3

I have implemented the Bootstrap 3 Typeahead plugin This is my current code: <input type="text" class="typeahead" autocomplete="off"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script&g ...

jqueryajaxtwitter-bootstrapbootstrap-typeahead

There seems to be a problem with displaying two div elements side by side using Html/CSS

Recently, I've delved into the world of html/css/javascript just for fun. I've encountered a little roadblock and I could use some help. In my html code, I'm trying to display two div elements on the same line but for some reason, it's ...

htmlcss

CSS parsing through regular expressions

I trust this message finds you in good health. I understand that a one-size-fits-all regular expression for CSS may not work in every scenario. However, I am currently analyzing a specific CSS segment and can customize the expression to meet my requiremen ...

pythoncssregexparsing

Remove the background color from a semi-transparent circular CSS div when it is being dragged

My circular div is being dragged for a drag and drop operation, but there's always a translucent square around it. How can I remove this unwanted effect? body{ background : #BBD1DF; } .dragdemo { width: 170px; height: 170px; line-hei ...

javascripthtmlcss

Is there a way to modify my function expression without using any state variables?

Currently working on a jQuery game where the player is generated upon clicking a button. Below is the function expression I'm using to store the player's information: var getPlayerData = function() { return { name: $("#name").val(),/ ...

javascriptjquery

Issue with Sass @use failing to load partial

I'm currently facing an issue while trying to import a sass partial called _variables.scss into my main stylesheet named global.scss. Every time I compile the sass code, I encounter the following error message: Error: Undefined variable. Here is the ...

csssass

How can I transmit data to a jQuery web-service request?

I have been following various online tutorials but haven't had any luck so far. My goal is to create a basic example that successfully passes a value to a web service call. What am I missing here? I can achieve this easily with HttpHandlers...why is ...

jqueryweb-services

Utilizing the Jquery index() function to retrieve the position of a specific child within

I recently discovered the query index() method, which allows me to obtain the index of an element in relation to its parent. Let's take a look at two different code snippets: Code1 <div id="check1"> <p> <span> ...

jqueryindexingparent-child

What is the process for activating a button after a checkbox has been selected? Additionally, how can a value be dynamically transferred from a checkbox to the rezBlock_1 block?

What could be the reason for my code not functioning properly? How can I enable a button once a checkbox is selected? Also, is there a way to dynamically move text from a checkbox to the rezBlock_1 block? CODPEN https://codepen.io/RJDio/pen/RwPgaaZ doc ...

javascripthtmlcss

Can you please tell me the font size specified as 20px/26px?

Recently stumbled upon the 20px/26px value in a codebase I'm currently working on. Wondering if anyone has encountered this before and knows what its purpose is. Interestingly, it renders with the latter pixel value (26px) in Chrome. #action { font: ...

css

Exploring the implications of Content Security Policy in conjunction with mod_pagespeed evaluations

I am currently in the process of configuring CPS rules for my website. One issue I have encountered is that mod_pagespeeds often uses 'unsafe-eval' for scripts, which goes against my security settings. An example of code generated by mod_pagespee ...

javascripthtmlcsswordpress

Reposition the origin when scaling SVG

Can anyone assist me in repositioning the smoke group origin to the center so that it scales along with the rocket? I've attempted utilizing the following: transform-origin: center; translate-box: box-fill; but it doesn't seem to resolve the i ...

htmlcsssvgcss-animationssvg-animate

Converting and storing information as JSON feed using fullcalendar

Is there a way to save the objects created to the json-feed file using $.ajax? I have tried, but nothing seems to be getting saved. Even though the object appears on the calendar, checking the JSON feed in my .php file shows that nothing has changed. va ...

jqueryajaxfullcalendar

Enable compatibility with high resolution screens and enable zoom functionality

My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements prop ...

javascriptcssresponsive-design

Variables for Angular Material themes

My app has multiple theme files, and I select the theme during runtime. .client1-theme{ // @include angular-material-theme($client1-theme); @include all-component-colors($client1-theme); @include theme-color-grabber($client1-theme, $client1-a ...

cssangularthemesscss-mixins

Creating a scrollable div with a fixed background using HTML

Attempting to create a full-screen image background with a scrollable div in its center, I crafted the following code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Bio</title> <link href="../css/layout ...

javascriptjqueryhtmlcss

JavaScript refuses to execute

I am facing an issue with a static page that I am using. The page consists of HTML, CSS, and JavaScript files. I came across this design on a website (http://codepen.io/eode9/pen/wyaDr) and decided to replicate it by merging the files into one HTML page. H ...

javascriptjquerylinker