jQuery to set css value of one element to another

Question

I need a little help with setting "padding left" of <div id="menu"> to equal the width of <ol>

Here's an example code for reference

<ol style="width:80%">some code</ol>

<div id="menu">some text</div>

I'm trying to do it with jQuery, I don't know it well so this is my attempt

$("#menu").css({"paddingLeft": "$('ol').width()"});

It works only if I enter a value myself like 400px in here $("#menu").css({"paddingLeft": "400px"});

But this is for a responsive design and I want it to automaticaly get the value of <ol> element and in pixes

Thanks for the answers, it works. One thing though, when I re-size the browser it doesn't change the value to the new width. Only if I refresh. How do I make it update automatically? — mr.data1
– mr.data1, Commented Oct 11, 2014 at 5:24

Pranav C Balan · Accepted Answer · 2014-10-11 05:26:33Z

1

Remove the " from "$('ol').width()" otherwise it will not work

$("#menu").css({"paddingLeft": $('ol').width()});

If you want to change the padding while changing the size then put it inside window resize() event

$(window).resize(function() {
    $("#menu").css({"paddingLeft": $('ol').width()});
});

edited Oct 11, 2014 at 5:26

answered Oct 11, 2014 at 5:19

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

Comments

brian · Accepted Answer · 2014-10-11 05:19:56Z

1

So close!

$("#menu").css({"paddingLeft": $('ol').width()});

answered Oct 11, 2014 at 5:19

brian

2,7852 gold badges21 silver badges33 bronze badges

Comments

sanjeev · Accepted Answer · 2014-10-11 05:22:13Z

1

$("#menu").css({"paddingLeft": $('ol').width()});

answered Oct 11, 2014 at 5:22

sanjeev

4,6512 gold badges22 silver badges28 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

From jQuery API

you can check the method .css( propertyName, value ) and figure it out.

By the way, when you refresh your window size. code like this:

$(window).resize(function (){
   $("#menu").css({"paddingLeft": $('ol').width()});
})

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 11, 2014 at 5:26

Todd Mark

1,88513 silver badges25 bronze badges

1 Comment

mr.data1 Over a year ago

That did it. Thank you for that last bit of help.

Collectives™ on Stack Overflow

jQuery to set css value of one element to another

4 Answers 4

Comments

Comments

Comments

From jQuery API

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related