Give help. Get help.

  • # December 3, 2012 at 12:56 am

    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?

    # December 3, 2012 at 3:58 am

    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’;
    script.src= ‘mobile.js’;

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

    # December 3, 2012 at 3:42 pm

    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-

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.