Javascript using media queries

programming web dev
1

I’m trying to make a function that adjusts to screen changes using media queries. To me it seems logical, but it’s just not working :pensive:
http://www.grundfastlaw.com/dev/general-representation/

//media query for (max-width: 1172px)
// finds the innerheight and adjusts the $pInjury accordingly.
function mediaQry(num)
{
var $scrolldown,
$scrollup,
$scrolltiming,
mq = window.matchMedia( “(max-width:” + num +“px)” ),
$pInjury = q(’#row0 h2’),
$colLeft = q(’.rowOne_ColL’),
$colRight = q(’.rowOne_ColR’),
yPos = q(‘body’);
if(mq.matches)
{

    var animator = function()
    {
        $pInjury.animate([
        {
            transform: "translate3d(0," + (window.innerHeight - 4) + "px, 0)",
            outline: "2px dotted red"
        },
        {
            transform: "translate3d(0," + (window.innerHeight - 105) + "px, 0)",
            outline: "2px dotted green"
        },
        ],
        {
            duration: 1000,
            delay: 2000,
            easing: "ease-in-out",
            fill: "both"
        });
    }
    return animator;
}

}

function evalWidth()
{
var inWx = window.innerWidth;
if(inWx === 1200)
{
mediaQry(1200);
}
else if(inWx === 1024)
{
mediaQry(1024);
}
else if(inWx === 768)
{
mediaQry(768);
}
else if(inWx === 480)
{
mediaQry(480);
}
else if(inWx === 320)
{
mediaQry(320);
}
}

window.addEventListener(‘load’, evalWidth, true);

2

Have you set breakpoints and figured out where exactly the code is failing? For example, is the right media query (mediaQry) function being called with the appropriate width value?

:slightly_smiling:

3

Kirupa,
Thank you for getting back to me. To be honest I’m not sure where it’s failing. I feel like logically it should all be working…I never work with breakpoints, but I guess now’s a good time to start learning since I know enough to become “dangerous…”

Brad

4

Hey what do you know…it turns out one Mr. Kirupa has a video covering breakpoints :slightly_smiling:

1 Like
5

haha, I was just about to post that one. It is a bit outdated, but the general ideas still apply :stuck_out_tongue:

6

This may sound weird…but if you ever saw My Cousin Vinny your video reminds me of the scene where Vinny discovers he can interview the witnesses :slightly_smiling:

So yeah it definitely helped clarify some things, but I would really prefer to keep it all in Chrome…so if you feel like posting a video on Dev tools ; )

7

The Chrome Dev Tools are very similar. The Sources tab allows you to specify which JS file you want to set a breakpoint into. I will record a video on it eventually, but I’m too deep into finishing up my upcoming ReactJS book!

(My Cousin Vinny is an awesome movie! I’m glad breakpoints remind of you of that. I think it was the same for me when I used the Dev Tools for the first time haha)

8

It really is a classic. I’m sometimes referring to it for a smile. Awesome thank you for the tips! I will fiddle around with the Dev Tools.

I keep hearing that term React. They’re talking about it at work since Parse is going bye bye. And also on job postings. Kirupa from an employment finding perspective…is it fare to say that gaining a solid foundational understanding of JS should be my focus first before I start playing around with these libraries? Or is there just not enough time because these libraries seem to be coming out every couple of years. The industry as you know is always looking for developers who have experience with a Node.js, or a jQuery…etc.

9

Getting a solid understanding of JS should be your first focus. All of these libraries enhance your day-to-day JS development experience, but they are not a full replacement for JS. You will be mixing and matching JS and library code all the time. For example, glance through the code in my latest React article: https://www.kirupa.com/react/dealing_with_state.htm If it wasn’t for the explanation, it’s hard to know where React ends and JavaScript begins (and vice-versa).

The more you know about JS, the better you will be at understanding the many ways you have for building your app’s functionality. A good yardstick that I was told a long time ago (by Marvin Minsky actually when I took his class) is that you need to have three good ways to solve any problem. If you don’t have that, you don’t fully understand what you are dealing with.

Some of those ways may involve relying on a library. Other ways may involve writing JavaScript straight-up. Since JavaScript is the foundation for the web programming we all do, learning as much as you can about JavaScript first is my answer. Once you’ve figured out the edges of what you can do with JavaScript easily, you’ll be much better prepared for using 3rd party libraries and the quirks they bring to the table!

:smiley_cat:

10

Good I’m glad to hear this validation that I’m on the right track and not be pivoting ever time a new library goes viral. I want to be a good coder so that I can be an even better designer ; ). Thanks Kirupa! Not that you may need it, but do you accept donations?

11

Thanks for asking, but no - I don’t accept donations!

Instead, if you want, please write a review of the JS book on Amazon so that others can find out about it. Even a short two-word review would be much appreciated! :slight_smile:

12

Absolutely that’s the least I can do! And I’ll do the same for animations. You know I read your books in non-sequential order so I don’t get overwhelmed, but I actually read the section that outlines debugging JS in Chrome :slightly_smiling: