Updating css properties real-time using jquery

Question

I have two division classes in my responsive site: section_left1 and section_right1

section_right1 flows very well with the document, but section_left1 is the problem. Each time the document is ready or browser has been resized, i want to pass the height of section_right1 to section_left1.

How can i change the css properties with jquery or some other easy way?

You would use other css properties to achieve the goal. Like the [three column answer][1]. [1]: http://stackoverflow.com/questions/20566660/3-column-layout-html-css — Dmitry Sadakov, Aug 21 '15 at 00:26

score 3 · Accepted Answer · answered Aug 21 '15 at 00:26

Normally you would use

var height_foo = $('#selector_foo').height();

$('#selector_bar').css({
    height: height_foo,
    color: green
});

Is there any problem with using this approach?

PS. Obviously you can update height_foo on window resize, or scroll or whatever you need. You're really flexible...

score 1 · Answer 2 · edited May 23 '17 at 11:58

1

You would use other css properties to achieve the goal. Like the three column answer.

.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

edited May 23 '17 at 11:58

Community

1
1

answered Aug 21 '15 at 00:27

Dmitry Sadakov

2,128
3
19
34

score 1 · Answer 3 · answered Aug 21 '15 at 00:34

You can do this with regular Javascript: (this method uses ID's, not classes)

x=document.getElementById('id');
x.style.height='123px';

This is according to W3.

Or, you can use JQuery:

$('.class').css({
 height: 120px;
 color: 'red';
});

There are multitudes of other possible ways to do this, but these are the easiest.

Hope that helps!

Updating css properties real-time using jquery

3 Answers3