Detect width using Javascript

Question

I am looking to obtain the width of each <li> within the main navigation bar which can be obtained from the main LI. Whilst the below code works it seems to apply the same width to the following LI's rather than detecting it's own individual size.

How would I go about making this dynamic please?

$('.navbar-nav-middle li').width($('.navbar-nav-middle a').parent().width());

Can you post your HTML as well?

Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman

2017-01-04 10:21:49 +00:00
Commented Jan 4, 2017 at 10:21 — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jan 4, 2017 at 10:21

Praveen Kumar Purushothaman · Accepted Answer · 2017-01-04 10:20:43Z

2

You need to use contextual this enclosed with a function here:

$('.navbar-nav-middle li').width(function () {
  return $(this).find("a").parent().width()
});

This might still give the same thing, as <li> takes up its content's width.

answered Jan 4, 2017 at 10:20

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

4 Comments

Bradley Over a year ago

This is fantastic, thank you very much. Worked a treat!

Praveen Kumar Purushothaman Over a year ago

@Bradley Glad to help mate.

Bradley Over a year ago

I'd like to ask, if the user was to resize the screen viewport if we could have this redetect the new LI width if at all possible? as when it hits certain breakpoints the LI may have a smaller font size setting so the width might be slightly less?

Praveen Kumar Purushothaman Over a year ago

@Bradley You can detect the resize of window: $(window).resize(function () { ... })... Using @media queries is the best for this.

Collectives™ on Stack Overflow

Detect width using Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related