jQuery unbind to all, when window size = 800

Navigation
3

I would like all actions programmed with JavaScript to go down when $(window).width() <= 800 to avoid conflicts between Mobile and desktop layout. But the truth is that it runs out of CSS but the actions (events) defined in JavaScript continue to happen and I would like it to stop everything, as if nothing was set in jQuery. I have the following code but it does not work:

HTML: 

....
<link rel="stylesheet" media='screen and (min-width: 801px)' href ="css/styles.css">
<link rel="stylesheet" media='screen and (max-width: 800px)' href ="css/stylesMob.css">

<!-- HTML -->

....

//JQUERY

....

//isto no final da página

if ($(window).width() < 800) {
    $('*').off();
}
$(window).resize(function(){
    if ($(window).width() < 800) {
        $('*').off();
    }
})

For a more detailed view, here is the site.

    
asked by anonymous 23.10.2014 / 13:57

2 answers

2

You can test this idea inside the HEAD tag of the page: 

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = screen.width > 800 ? 'scriptDesktop.js' : 'scriptMobile.js';    
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

This script inserts code from an external file. Which file to insert is chosen here: 

script.src = screen.width > 800 ? 'scriptDesktop.js' : 'scriptMobile.js';

and this ternary operator gives desktop if the screen.width > 800 condition is true and mobile if it is false.

    
23.10.2014 / 14:19
0

My final implementation, with the help of @Sergio turned out to be:

Inside the head tag, in HTML: 

<script type="text/javascript">

        var type = 'text/javascript';
        var src = ($(window).width() > 800) ? "js/desktopLayout.js" : "js/mobileLayout.js";
        $('head').append('<script type ="' +type+ '" src="' +src+ '">');

    $(window).resize(function(){
        $('script[src $= "Layout.js"]').remove();
        var type = 'text/javascript';
        var src = ($(window).width() > 800) ? "js/desktopLayout.js" : "js/mobileLayout.js";
        $('head').append('<script type ="' +type+ '" src="' +src+ '">');
    })

</script>

PS: Each time we do resize we are adding 'script type="' + type + '" src="' + src + '"', remove function is to avoid this, ie at ' delete the current link to the file (desktopLayout or mobileLayout).

    
24.10.2014 / 11:05
Is it possible to detect the key pressed in Lua? Python packages with dependency installation