Can I do this in pure CSS instead of using jQuery?

Question

Currently, I'm setting width and height of some elements with jQuery in window resize event, based on window.innerWidth and window.innerHeight.

Something like this:

$(".gr1").css("height", (window.innerHeight - 150) + "px");

And these are some other examples:

$(".gr2").css("width", ((window.innerWidth / 2) - 12).toString() + "px");
$(".box1").css("height", ((window.innerHeight - 150) / 3 - 12).toString() + "px");
$(".box2").css("height", ((window.innerHeight - 150) / 2 - 12).toString() + "px");

And this is rendering a little slow in Chrome 21 (Windows) and renders too slow in iPad and Nexus 7 tablet. (Since there are many elements with gr1, gr2, box1 and box2 classes)

Can I do this in Pure CSS to give better performance? How?

Please show us your DOM. Are the elements unique, which styles do they already have? — Bergi
– Bergi, Commented Sep 3, 2012 at 12:50
@Bergi My DOM is messy, also it has many other things. Anyway, I'll post a link to it in a few minutes. But, Why you need DOM? — Mahdi Ghiasi
– Mahdi Ghiasi, Commented Sep 3, 2012 at 12:51
Why would a mechanic need a car to see what's wrong with it? "My car has a problem, here's a description of it, now fix it!" — Kyle
– Kyle, Commented Sep 3, 2012 at 12:54
@MahdiGhiasi: There is no layout with nothing to display. What are these elements you want to resize, where are they in your page? Only their contents is irrelevant — Bergi
– Bergi, Commented Sep 3, 2012 at 12:54
Maybe if you would optimized your selectors the performance would be satysfactory. This may be possible - but depends on your DOM and/or usecase. — WTK
– WTK, Commented Sep 3, 2012 at 12:54

Rory McCrossan · Accepted Answer · 2012-09-03 12:51:29Z

6

Without seeing your HTML or CSS I can't give you a definitive answer, but the best solution if you need the elements of your page to react to the browser window being resized is to use % widths, combined with min-width and max-width to set concrete size limits.

answered Sep 3, 2012 at 12:51

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

6 Comments

Mahdi Ghiasi Over a year ago

If it was .css("height",(window.innerHeight / 3)), I could use percents. but there is an extra + 12 or - 150 in the height. How do I implement these with percents?

feeela Over a year ago

Yep, the normal way to do this in CSS would be to create a fluid layout.

Rory McCrossan Over a year ago

@MahdiGhiasi to get the +12/-150 use margin to amend the width.

Mahdi Ghiasi Over a year ago

@RoryMcCrossan I didn't understand what you said. Can you make a simple example code and make a link to it in your answer?

Rory McCrossan Over a year ago

Here's an example: jsfiddle.net/R4PCb resize the browser window to see it in action.

|

Mark · Accepted Answer · 2012-09-03 12:51:37Z

4

you could try to cache your jQuery selectors, improve performance:

var gr1 = $('.gr1');
var gr2 = $('.gr2');
var box1 = $('.box1');
var box2 = $('.box2');
$(gr1).css("height", (window.innerHeight - 150) + "px");
$(gr2).css("width", ((window.innerWidth / 2) - 12).toString() + "px");
$(box1).css("height", ((window.innerHeight - 150) / 3 - 12).toString() + "px");
$(box2).css("height", ((window.innerHeight - 150) / 2 - 12).toString() + "px");

answered Sep 3, 2012 at 12:51

Mark

6,8731 gold badge35 silver badges51 bronze badges

3 Comments

Mahdi Ghiasi Over a year ago

I have tried this, but still slow... It is just a little slow on my Windows PC, but too slow on iPad...

Mark Over a year ago

remove the toString(), use mathRound()

Pebbl Over a year ago

Are you defining the vars outside of your resize function? because if not you are not making any saving...

Ana · Accepted Answer · 2012-09-03 13:05:24Z

3

You could try using calc(), but the support is not very good (limited to IE9+, FF4+, Safari 6, Chrome 19+ & Firefox for Android).

Test: http://dabblet.com/gist/3609183

edited Sep 3, 2012 at 13:05

answered Sep 3, 2012 at 12:54

Ana

37.6k7 gold badges88 silver badges149 bronze badges

2 Comments

Ana Over a year ago

No. As I've said in my answer, it only works in IE9+ and FF4+.

Ana Over a year ago

Yup, tested it now, it also works in Chrome. I'll edit my answer.

Alexander Wigmore · Accepted Answer · 2012-09-03 13:53:19Z

2

Media Queries Would possibly be the way to go, though it depends on your definition of "Pure" CSS, as media queries are new to CSS3, and don't work fully in IE 6/7/8.

If you don't know, they work by only applying certain styling based upon the screen/devices current resolution. You can see an example, resize the window and see how the content changes?

This is referred to as responsive web design

edited Sep 3, 2012 at 13:53

answered Sep 3, 2012 at 12:52

Alexander Wigmore

3,1864 gold badges41 silver badges60 bronze badges

Collectives™ on Stack Overflow

Can I do this in pure CSS instead of using jQuery?

4 Answers 4

6 Comments

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related