jQuery setting css widths for classes, but not updating widths upon jQuery-initiated class change

Question

I'm not sure there's a quick way to explain what I'm doing, so bear with me on this...

I'm setting up a series of column elements (li.element), and, upon clicking any one li.element, I want it to expand to a given percentage width and have all other column elements revert to the standard size (basically, an accordion).

The tricky part is, I have a variable number of columns to account for, and a variable width of the parent element to fill up (based on viewport width).

I've worked out the math to dynamically set both the "collapsed" and the "expanded" column widths with jQuery:

var TotalWidthInPixels = $("ul.parent").width();
var PercentageWidthOfExpandedColumn = .50
var TotalColumnCount = $("li.element").length;
var ExpandedColumnWidthInPixels = TotalWidthInPixels * PercentageWidthOfExpandedColumn
var CollapsedColumnWidthInPixels = (TotalWidthInPixels * (1.0 - PercentageWidthOfExpandedColumn)) / (TotalColumnCount - 1);

I've used the result to set widths for standard (unclassed) and collapsed (.collapsed) columns (li.element).

$("li.element").css("width", ExpandedColumnWidthInPixels);
$(".collapsed").css("width", CollapsedColumnWidthInPixels);

I also have some jQuery to add .collapsed to every li.element by default, and to remove the .collapsed from any given column when it is clicked (while also adding .collapsed to every other li.element; but I run into this error even when I don't re-add .collapsed).

//// WHEN A COLLAPSED COLUMN IS CLICKED, COLLAPSE ALL OTHERS, THEN EXPAND IT
$(".collapsed").click(function(){
    $("li.element").addClass("collapsed");
    $(this).removeClass("collapsed");
});

The rest of my stylesheet-set CSS (background color, etc.) works as expected with the class switches, so I can be sure that the .collapsed class is, in fact, being added and removed via click()... but the jQuery-set CSS widths are not updating. The columns remain at the value which jQuery originally established when the document was ready.

I've removed all mention of width from the stylesheet-set CSS for the elements in question, so I can be sure jQuery is the only thing driving these style widths.

Note: I had this interaction up and running as expected when the expanded and collapsed column widths were explicitly and statically set via stylesheet — even with the classes being updated via jQuery on click. The only thing that has changed is I'm now setting the widths for my classes dynamically via jQuery.

Why are my jQuery-set CSS widths not updating when jQuery updates the corresponding CSS classes?

I guess I'm hoping the code is irrelevant and there's some inherent problem to updating jQuery-set CSS attributes +/ values via a jQuery-driven class switch that I'm just not aware of... but I'll work on getting a fiddle up for reference. — jasonmklug
– jasonmklug, Commented Jul 27, 2013 at 0:12

Jason P · Accepted Answer · 2013-07-27 00:25:56Z

1

After a couple times reading this, it looks like maybe you are expecting $(".collapsed").css("width", CollapsedColumnWidthInPixels); to actually change the definition of the collapsed class.. Is that so? If yes, it doesn't work that way. That line sets the widths of the selected elements, it doesn't change class definitions.

I think maybe you need to ExpandedColumnWidthInPixels and CollapsedColumnWidthInPixels are saved to the window scope and do this instead:

$(".collapsed").click(function(){
    $(this).css("width", ExpandedColumnWidthInPixels);
    $("li.element").css("width", CollapsedColumnWidthInPixels);
});

edited Jul 27, 2013 at 0:25

answered Jul 27, 2013 at 0:18

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jasonmklug Over a year ago

While not a direct answer to the question, I used this line of thought (circumventing using class switching as a basis for width control, and just setting the widths of affected elements directly) as a basis, and got it up and running as desired — thanks!

Collectives™ on Stack Overflow

jQuery setting css widths for classes, but not updating widths upon jQuery-initiated class change

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related