#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    2
    Rep Power
    0

    Move Div when resize window


    http://pastebin.com/qryPc77W

    Original window size (desktop, laptop) it's like this:

    left, menu, right.

    When I resize to to below 481px I wan't the #middle first, so it ends up like this:

    menu, left, right.

    My Code:

    Code:
    jQuery(document).ready(function($) {
        
    $(window).resize(function() {
        var responsive_viewport = $(window).width();
        if (responsive_viewport < 481) {
                $('#inner-content').parent().prepend('<div id="main middle"></div>');
        }
    });
    
    
    HTML:
    
    <div id="inner-content" class="wrap clearfix">
                                   
                                        
    <div id="main 1" style="background: #ccc;" class="fourcol first clearfix" role="main">
    left
    </div>
                                        
    <div id="main middle" style="background: #ddd;" class="fourcol middle clearfix" role="main">
    menu
    </div>  
        
    <div id="main 3" style="background: #eee;" class="fourcol last clearfix" role="main">
    right
    </div>    
    
    </div>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    24
    Rep Power
    0
    You might want to look at something called 'media queries'.

    https://developer.mozilla.org/en-US/.../Media_queries

    Léon
    Last edited by Kravvitz; October 19th, 2012 at 01:47 PM. Reason: made the URL into a link
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Welcome to DevShed Forums, Ottolaisner.

    To add to what Léon said, there seem to be multiple instances of two serious errors in your code:

    Within any document or application, the author SHOULD mark no more than one element with the main role.

    IDs must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). In other words, spaces are not allowed in IDs.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo