Grow your CSS skills. Land your dream job.

Rearranging DOM elements with jQuery

  • # March 21, 2013 at 11:17 am

    Hey,

    I am having a bit of trouble making jQuery rearrange two divs when the browser width is mobile.

    At the moment I am using this code:

    But in my console I am getting “Uncaught ReferenceError: mobile is not defined”

    Any ideas?

    http://oandg.co.uk.s156312.gridserver.com/

    # March 21, 2013 at 11:23 am

    Is ‘mobile’ a JQ hook?

    I can’t find it referenced in the documentation?

    # March 21, 2013 at 11:25 am

    If it is….and I confess to being a JS/JQ noob….don’t you have to wrap the js you are using in a self invoking function?

    [script]
    if (mobile == true) {
    $(‘#bottom’).insertBefore($(‘#top’));
    }
    [/script]

    # March 21, 2013 at 11:25 am

    I assumed it must be considering there is jQuery mobile?

    # March 21, 2013 at 11:27 am

    Not as far as I know.

    See caveats above though.

    # March 21, 2013 at 11:48 am

    @jshjohnson, call me crazy, but why use jQuery at all? You could use display instead..

    #bottom {
    display: table-header-group;
    }

    #top {
    display: table-footer-group;
    /* OR display: table-row-group; */
    }

    # March 21, 2013 at 2:49 pm

    Genius, that worked.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".