Forums

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

Home Forums JavaScript How to run a jquery function but only when the browser window width is > 1024px?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #41119
    vitaliyg
    Member

    This is a functionality I’d like to add to my responsive one-page website, but only when the browser width is greater than 1024px.

    My knowledge of jQuery is minimal, but this is the code I have now:

    $(document).ready(function() {
    var pageWidth = $(window).width();
    if (pageWidth > 1024) {

    $(‘.footer a’).mouseenter(function() {
    $(this).effect(“bounce”, { times:1, distance:4 }, 250);
    });

    });
    });

    Another question, when this function isn’t firing—for example when a user loads the site on a device that has < 1024px width, do they still have to load the javascript file?

    #116138
    JoniGiuro
    Participant

    you could do:

    $(document).ready(function() {
    var pageWidth = $(window).width();
    var body= document.getElementsByTagName(‘body’)[0];
    var script= document.createElement(‘script’);
    script.type= ‘text/javascript’;
    if (pageWidth > 1024) {
    script.src= ‘desktop.js’;
    }else{
    script.src= ‘mobile.js’;
    };
    body.appendChild(script);
    });

    that way you only load the needed script (it makes sense if the scripts are big in filesize)

    #116178
    vitaliyg
    Member

    Thank you for your responses! I’ve been battling this thing all last night, but finally a buddy suggested I use CSS animation. I think it does the job pretty well. The only downside I see so far is that the animation abruptly stops if the mouse leaves the block it’s applied to.

    What do you guys think? Check out the navigation-
    http://vitaliyg.com

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