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, Sep 03 '12 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, Sep 03 '12 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, Sep 03 '12 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, Sep 03 '12 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, Sep 03 '12 at 12:54
There are quite a few things you could do to improve the performance of what you already have. By the looks of it each time you are calling the resize event you are re-searching the DOM for all the elements you want to change, again and again. First off, save this list to a variable. i.e. `$gr2 = $('.gr2');` and then inside your resize function access using `$gr2.css('width', ...);`. Better still don't use jQuery for a simple operation as setting width or height. Use something like `var i = $gr2.length, h = (window.innerWidth / 2 - 12) + "px"; while(i--){$gr2[i].style.height = h;}` — Pebbl, Sep 03 '12 at 12:58

score 6 · Answer 1 · answered Sep 03 '12 at 12:51

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 03 '12 at 12:51

Rory McCrossan

331,213
40
305
339

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? – Mahdi Ghiasi Sep 03 '12 at 12:54
Yep, the normal way to do this in CSS would be to create a fluid layout. – feeela Sep 03 '12 at 12:55
@MahdiGhiasi to get the +12/-150 use `margin` to amend the width. – Rory McCrossan Sep 03 '12 at 13:01
@RoryMcCrossan I didn't understand what you said. Can you make a simple example code and make a link to it in your answer? – Mahdi Ghiasi Sep 03 '12 at 13:02
Here's an example: http://jsfiddle.net/R4PCb/ resize the browser window to see it in action. – Rory McCrossan Sep 03 '12 at 13:06
In your example, width of boxes are `25%` and `50%`. How to have a box with width `25% - 20px` or `window.innerWidth / 4 - 20`) for example? – Mahdi Ghiasi Sep 03 '12 at 13:19

score 4 · Answer 2 · answered Sep 03 '12 at 12:51

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 03 '12 at 12:51

Mark

6,762
1
33
50

I have tried this, but still slow... It is just a little slow on my Windows PC, but too slow on iPad... – Mahdi Ghiasi Sep 03 '12 at 12:52
remove the toString(), use mathRound() – Mark Sep 03 '12 at 12:54
1

Are you defining the vars outside of your resize function? because if not you are not making any saving... – Pebbl Sep 03 '12 at 12:56

Ana · Accepted Answer · 2012-09-03T13:05:24.277

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 03 '12 at 13:05

answered Sep 03 '12 at 12:54

Ana

35,599
6
80
131

No. As I've said in my answer, it only works in IE9+ and FF4+. – Ana Sep 03 '12 at 12:56
Yup, tested it now, it also works in Chrome. I'll edit my answer. – Ana Sep 03 '12 at 13:02

Alexander Wigmore · Answer 4 · 2012-09-03T13:53:19.950

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 03 '12 at 13:53

answered Sep 03 '12 at 12:52

Alexander Wigmore

3,157
4
38
60

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

4 Answers4

Linked