jQuery unbind to everything, when window size <= 800

Asked

Viewed 103 times

3

I would like all actions programmed with Javascript to be effective when the $(window).width() <= 800 to avoid conflicts between Mobile layout and desktop. 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 is set in jQuery. I have the following code but it doesn’t 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 website.

jquery

  • What makes the jQuery you want to block? are click events or also change? If you click only, you can use CSS Pointer Events... (this link does not work)

  • All because I will use the same elements (id’s and classes) for window <= 800. and I wouldn’t want there to be any conflicts, the only thing that will change is the css file. I would like for window < 800 to be a new jquery

  • "A new jQuery" seems difficult and/or laborious. In this case the safest is to have a flag and check this condition on all pieces of code. If you put the jQuery that you want to "hang up" the question becomes clearer.

  • Is it possible to specify, as I did with the css files above, . js files for different window sizes? If it’s possible, it sounds like a great solution. Or wrap all of my js code in the condition: 'if(($window).width() > 800) { // All code made for desktop } Else { //Mobile layout }'

  • Miguel added an answer. Your suggestion to do if(($window).width() > 800) { // Todo o codigo feito para desktop } else { //layout Mobile } is also an alternative, or pointer-event: none; within a media query. Put jQuery here to see which of the variants is the best and easiest to maintain.

2 answers

2


You can test this idea inside the page’s HEAD tag:

<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 that ternary operator gives desktop if the condition screen.width > 800 be true and mobile if it’s fake.

  • 1

    Very Obgado @Sergio, plus 'one' in my 'toolbox'. But yes, I think I will opt for the top solution.

  • 1

    Hello @Sergio, just to say that I have advanced this solution. my final implementation is down. Obgado

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 resize we are adding 'script type ="' +type+ '" src="' +src+ '", remove function is to avoid this, ie at the 'start' of resize will delete the current link to the file (desktopLayout or mobileLayout).

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.