Using resize to getScript if above x pixels (jQuery)

Posted by user1065573 on Stack Overflow See other posts from Stack Overflow or by user1065573
Published on 2012-07-09T01:47:39Z Indexed on 2012/07/09 3:16 UTC
Read the original article Hit count: 231

Filed under:
|
|
|
|

So I have an issue with this script. It basically is loading the script on any resize event.

I have it working if lets say...
- User has window size above 768 (getScipt() and content by .load() in that script)
- Script will load (and content)
- User for some reason window size goes below 768 (css hides #div)
- User re-sizes again above 768, And does not load the script again! (css displays the div)

Great. Works right.

Now.. (for some cray reason)
- User has window size below 768 (Does NOT getScript() or nothing)
- User re-sizes above 768 and stops at any px (getScript and content)
- User re-sizes again anything above 768 (It getScript AGAIN)

I need it to only get script once. Ive used some code from here

jQuery: How to detect window width on the fly?

(edit - i found this, which he has the same issue of loading a script once.)

Problem with function within $(window).resize - using jQuery And others i lost the links to :/

When i first found this problem I was using something like this, then i added the allcheckWidth() to solve problem. But it does not.

var $window = $(window);
function checkWidth() {
    var windowsize = $window.width();
////// LETS GET SOME THINGS IF IS DESKTOP 
var $desktop_load = 0;
    if (windowsize >= 768) {
    if (!$desktop_load) {

            // GET DESKTOP SCRIPT TO KEEP THINGS QUICK
            $.getScript("js/desktop.js", function() { 
            $desktop_load = 1;
    });

    } else {
    }
    }
////// LETS GET SOME THINGS IF IS MOBILE
    if (windowsize < 768) { 
    } 
}
checkWidth();

function allcheckWidth () {
var windowsize = $window.width();
//// IF WINDOW SIZE LOADS < 768 THEN CHANGES >= 768 LOAD ONCE
var $desktop_load = 0;
    if (!$desktop_load) {
    if (windowsize < 768) {
            if ( $(window).width() >= 768) { 

        $.getScript("js/desktop.js", function() { 
            $desktop_load = 1;
        });

            }
    }   
        }

}
$(window).resize(allcheckWidth);

Now im using something like this which makes more sense?

$(function() {   
    $(window).resize(function() {
var $desktop_load = 0;
    //Dekstop
    if (window.innerWidth >= 768) {
    if (!$desktop_load) {
            // GET DESKTOP SCRIPT TO KEEP THINGS QUICK
            $.getScript("js/desktop.js", function() { 
            $desktop_load + 1;
    });
    } else {
    }
    }
if (window.innerWidth < 768) {
    if (window.innerWidth >= 768) {
    if (!$desktop_load) {
                // GET DESKTOP SCRIPT TO KEEP THINGS QUICK
                $.getScript("js/desktop.js", function() { 
        $desktop_load + 1;
        });
    } else {
        }
    }
    }
    }) .resize(); // trigger resize event
})

Ty for future response.

Edit - To give an example, in desktop.js i have a gif that loads before "abc" content, that gets inserted by .load(). On resize this gif will show up and the .load() in desktop.js will fire again. So if getScript was only being called once, it should not be doing anything again in desktop.js. Confusing?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about load