CODEWITHSUNDEEP
javascriptjquerycss
jfrye
jfrye

Reputation: 437

Calculate width for each list item with jquery

I need a new jquery function to do what this line of CSS does now:

#progressbar li {width: calc(100% / 5); /* divide by number of steps */}

This jquery code I created does not work:

var count = $("#progressbar").children().length
result = parseInt(100) / parseInt(count);
$( "#progressbar > li" ).css( "width", "result%" );

This is to set the width of multi-page form progress bars for forms of varying lengths and steps. Thanks!

EDIT:

Thanks all. Its working now, but if you have a better way let me know. I am creating several new forms online. I have the first two linked here:

http://new-site.autouplinktech.com/forms/form-video360.html http://new-site.autouplinktech.com/forms/form-inteliPhoto.html

I am also running into a lot of issues implementing jquery Validation on my forms since it also uses multi-step to show each fieldset separately, but that can be the topic of another post here.

Upvotes: 0

Views: 434

Answers (1)

Diana Nassar
Diana Nassar

Reputation: 2303

$( "#progressbar > li" ).css( "width", "result%" );

Should be:

$( "#progressbar > li" ).css( "width", result + "%" );

Also, add a semi-colon to the first statement:

var count = $("#progressbar").children().length;

[This isn't the source of the problem of course though :)].

Upvotes: 1

Related Questions