Media Queries for JS?

[Shaz3e]

I hope anyone could help me here to use Media Queries for my JS Code what exactly I want to do is to load the JS code when @media (min-width: 980px) if its not true I don’t want browser to load the code.

[Anonymous]

Something like this? you can run js code when the browser width is bellow or above a certain point. changing the background to blue if above, and to red when below is an example. You can put any JS code between.

http://codepen.io/Jarolin/pen/jvkwF

[Shaz3e]

Thank you @elkrocke, but I am trying to accomplish something similar to hide the JS Code when browser window is lower than the defined width in my case 980px, I tried your method but its still calling JS Code I want browser to ignore the code when the browser window is lower than the defined size.

[Anonymous]

You can put the code you want to remove in a separate js file, than append the file link when the browser width is above 980px, and then remove the file when its bellow 980px. I updated the pen.

Although i’m not even sure if that will work. I don’t know if removing a js file will also remove the js on the website in real-time. Also its likely theres an easier way of doing what your asking for.

[Shaz3e]

Well the updated’s pen code is not working here actually I am trying to slideUp/slideDown my header with scroll Up/Down but when I test it on my tablet and mobile the JS Code is still hide the header here is the link http://www.shaz3e.com/

[Anonymous]

You shouldn’t hide the navbar when the user scrolls. Thats bad UX.

[Shaz3e]

but it shows up when the user scrolls up, so what’s so bad in it?

[Chromawoods]

I’ve used jRespond on several projects and it is working very well. Might be overkill if you only have one single function to trigger, but once your project grows and more JS needs to trigger on breakpoints, it’s a nice lib to have.

Plus, it also does some nice things for performance, like window resize event throttling.

https://github.com/ten1seven/jRespond

[maxisix]

$( document ).ready(function() {

if (window.matchMedia(“(min-width: 1000px)”).matches) {
console.log(“yaaa bro”);
}

});

[Shaz3e]

my CSS Code for Media Query

    <style type="text/css">
        @media (min-width: 980px) {
            .dc-fixed{position:fixed;}
            .dc-fixed-header{
                margin:0 !important;
                top:0;
                display:block;
                width:100%;
                z-index:9999;
            }
        }
    </style>

My Js Code

    <script type="text/javascript">
        var dcHeader = $(window);
        var dcHeaderPosition = dcHeader.scrollTop();
        var up = false;
        var newscroll;
        dcHeader.scroll(function () {
            newscroll = dcHeader.scrollTop();
            if (newscroll > dcHeaderPosition && !up && newscroll > 250) {
                $('.dc-fixed-header').stop().slideUp({duration:1000);
                up = !up;
                console.log(up);                
            } else if(newscroll < dcHeaderPosition && up) {
                $('.dc-fixed-header').stop().slideDown({duration:1000);
                up = !up;
            }
            dcHeaderPosition = newscroll;
        });
        
        var  dcFixedHeader = $('.dc-fixed-header');
            dcFixed = "dc-fixed";

        $(window).scroll(function() {
            if( $(this).scrollTop()) {
                dcFixedHeader.addClass(dcFixed);
            }else{
                dcFixedHeader.removeClass(dcFixed);
            }
        });

    </script>

I just want this code to be loaded when the browser window is higher than 980px I don’t want to run the code when the browser window is lower than 980px any solution for this. because when I re-size my browser window the code is still load and I have huge menu list in my header which hides after 250px becuase that’s what I have defined. I am calling these before </body> tag

[maxisix]

If you want you can inject the code with Ajax

[dyr]

There are two easy ways to accomplish this.

Set a property in your CSS at whichever breakpoints you need and read that property in your javascript to determine which breakpoint you’re in.

OR use modernizr http://modernizr.com/docs/. <- scroll down to near the bottom, look for Modernizr.mq().

Modernizr has a mq() method which takes a media-query like you would write it in css and returns true or false based on whether that media query applies to the current view. I’ve used this before to handle logic which differs on small and large screens and it worked great.

[Author]

Posts