Setting fixed height panes based on window's width

Question

I have a webapp that follows responsive design and has following layout structure. The left layout appears when the window's width > 768px and right layout shows otherwise.

Based on preliminary research I think there are no modern pure CSS ways of doing it, so I implemented some jQuery code to solve it.

$(window).resize(function() {
    if (window.innerWidth > 768) {
        fixedHeight = window.innerHeight - $('.search__results').position().top;
        $('.search__results').addClass('overflow-y-scroll').height(fixedHeight);
    } else {
        $('.search__results').removeClass('overflow-y-scroll').height('auto');
    }
});

My CSS class is as follows:

.overflow-y-scroll {
    overflow-y: scroll;
}

I would like to leave my code up here for review and seek for DRY-er code, some spots I think may be up for improvement.

768px being fixed, should it be called from a global variable where it is the single point for setting the breakpoints? If so, I wonder where it should be placed so CSS & JavaScript can both use it?

Should I name $('.search__results') as a variable? Perhaps even make it a more generic helper function? If so, does any one have any tips on how to write it?

I'm also curious as to what is usually the best practice when creating such responsive layouts.

Answer 1

Your provided code is fairly small, so there's not much to review, but nevertheless.

---

Your comment on making 768 a constant is a valid idea,

const MAX_WINDOW_WIDTH = 768;

...

if (window.innerWidth > MAX_WINDOW_WIDTH) {

for magic numbers (unexplained numbers meaning unexplained things), it's best to declare as a const, but your version of JavaScript may not support this, so you can also use var.

---

I don't particularly understand why you have double underlines in '.search__results', and to answer your question: you could declare it as a variable if you like, but it really wouldn't matter either way.

I think 'overflow-y-scroll' is a bad name for a CSS class as it's, basically the content of the class.

where it is the single point for setting the breakpoints?

You can set breakpoints in the relevant debugger on your browser, usually labelled Developer Options, or something similar.

---

You don't really need to worry about your code violating DRY principles, the if-else loop cases aren't really similar enough for that. If you had something like twenty identical lines in there, maybe so.

---

Good questions, and clean code, good work!