Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Media Queries for JS?

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #169164
    Shaz3e
    Participant

    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.

    #169171
    Anonymous
    Inactive

    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

    #169172
    Shaz3e
    Participant

    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.

    #169175
    Anonymous
    Inactive

    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.

    #169184
    Shaz3e
    Participant

    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/

    #169192
    Anonymous
    Inactive

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

    #169195
    Shaz3e
    Participant

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

    #169221
    Chromawoods
    Participant

    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

    #169249
    maxisix
    Participant

    $( document ).ready(function() {

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

    });

    #169473
    Shaz3e
    Participant

    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

    #169831
    maxisix
    Participant

    If you want you can inject the code with Ajax

    #169891
    dyr
    Participant

    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.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.