Run a JavaScript depending on a stylesheet

Question

I have the JavaScript below and it only runs when the width of the screen is under 1024px which is what I want and it works fine. However I really need to make it run when only the width of the screen is below 1024px AND when the following style-sheet is called: <link rel="stylesheet" media="screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi)" href="assets/css/tablet-and-mobile.css" />

//Apply swipping//
    function applySnap() {
        var width = window.innerWidth;
        if (width <= 1024) {
        if (window.snap) {
            window.snap.enable();
        } else {
            window.snap = new Snap({
            element: document.getElementById('page')
            });
        }
        } else {
        if (window.snap) {
            window.snap.disable();

        if( window.snap.state().state !=='closed' ){
            window.snap.close();
            }
        }
        }

        //Close slider when orientation changes//
        window.addEventListener("orientationchange", function () {
        if (window.snap.state().state !== 'closed') {
            window.snap.close( 0 );

        }
            }, false);
        }
        window.onresize = applySnap;
        applySnap();


        //Swipping (Open/Close Button)//
        $('.secondHeader-menuButton').on('click', function (e) {
            e.preventDefault();
        if (window.snap.state().state === "closed") {
            window.snap.open('left');
        } else {
            window.snap.close('left');
        }
    });

Why? right it is really complex but take a look at my previous question HERE As you can see I am using the solution but also did this:

<link rel="stylesheet" type="text/css" href="assets/css/core.css">
<link rel="stylesheet" media="screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi)" href="assets/css/tablet-and-mobile.css" />
<link rel="stylesheet" media="screen and (max-width: 1000px)" href="assets/css/tablet-and-mobile.css" />

That fixed the problem! however I have a sliding navigation that need to be shown only on tablets, ie when the tablet-and-mobile.css is enabled only! but because I have the following line: <link rel="stylesheet" media="screen and (max-width: 1000px)" href="assets/css/tablet-and-mobile.css" /> the slider js will run as it runs when the screen size is below 1024px.

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

You can use jQuery, write a function (check what is a current width if width is =< 1024 do something), create another function to check a DPI)

for dpi function -> jsfile or dpi function

write main function and set if dpi is > 120 and width is =< 1024px - do something

edited May 23 '17 at 10:32

Community

1
1

answered Dec 05 '13 at 20:18

mcmac

1,042
9
13

Can you please help me implement this to my current script above? I am not very good at JS – Dec 05 '13 at 20:19
Can you please implement it to my script tho? please it may be the answer! – Dec 05 '13 at 20:53

score 1 · Answer 2 · answered Dec 05 '13 at 20:50

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(window).on("load resize",function(e){
        // current window width
        var outer_width = $(window).width();

        function getPPI(){
            // create an empty element
            var div = document.createElement("div");
            // give it an absolute size of one inch
            div.style.width="1in";
            // append it to the body
            var body = document.getElementsByTagName("body")[0];
            body.appendChild(div);
            // read the computed width
            var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
            // remove it again
            body.removeChild(div);
            // and return the value
            return parseFloat(ppi);
        } 

        if(outer_width < 1024 && getPPI() > 120){
            //do somethink - this is a place for you function
        }

        //console.log(outer_width, getPPI()); 
    });       
});
</script>

score 0 · Answer 3 · answered Dec 05 '13 at 20:04

0

You should check out twitter bootstrap and it's responsive features.

answered Dec 05 '13 at 20:04

Mike Devenney

1,758
1
23
42

score 0 · Answer 4 · answered Dec 05 '13 at 20:08

0

Modernizr has some great features to apply js based on media queries. Documentation here.

answered Dec 05 '13 at 20:08

essmahr

676
4
15

score 0 · Answer 5 · answered Dec 06 '13 at 21:21

try that

$(document).ready(function() {
    $(window).on("load resize",function(e){
        // current window width
        var outer_width = $(window).width();

        function getPPI(){
            // create an empty element
            var div = document.createElement("div");
            // give it an absolute size of one inch
            div.style.width="1in";
            // append it to the body
            var body = document.getElementsByTagName("body")[0];
            body.appendChild(div);
            // read the computed width
            var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
            // remove it again
            body.removeChild(div);
            // and return the value
            return parseFloat(ppi);
        } 

        if(outer_width < 1024 && getPPI() > 120){
            //do somethink - this is a place for you function

                if(window.snap){
                    window.snap.enable();
                }
                else{
                    window.snap = new Snap({
                        element: document.getElementById('page')
                    });
                }
        }
        else{
            if(window.snap){
                window.snap.disable();
                if( window.snap.state().state !=='closed' ){
                    window.snap.close();
                }
            }
        }
        //Close slider when orientation changes//
        window.addEventListener("orientationchange", function () {
            if (window.snap.state().state !== 'closed') {
                window.snap.close( 0 );
            }
        }, false);

        //console.log(outer_width, getPPI()); 
    }); 

    $('.secondHeader-menuButton').on('click', function (e){
        e.preventDefault();
        if(window.snap.state().state === "closed"){
            window.snap.open('left');
        } 
        else{
            window.snap.close('left');
        }
    });     
});

Run a JavaScript depending on a stylesheet

5 Answers5