CODEWITHSUNDEEP
jqueryresizeresponsive-designprepend
Mathias Kaisner
Mathias Kaisner

Reputation: 31

jQuery - Move div when resize browser

I want to change this:

<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>

to this(order: MENU, LEFT, RIGHT) when I resize the window below 481px, with;

jQuery(document).ready(function($) {

$(window).resize(function() {
    var responsive_viewport = $(window).width();
    if (responsive_viewport < 481) {
            $('#inner-content').parent().prependTo('middle');
    }
});

Upvotes: 3

Views: 5067

Answers (2)

Nick
Nick

Reputation: 1869

I'm note sure if this is complete. I have faced few issues when i set view port width to 481. So i set it to 350

jsfiddle.net/CKfqv

Upvotes: 0

bhb
bhb

Reputation: 2561

Use this

$(window).resize(function() {

   var responsive_viewport = $(window).width();

   //console.log(responsive_viewport);
   if (responsive_viewport < 481) {
      var middle_div = $('#main-middle').clone().remove();
      $("#main-1").before(middle_div);
   }
});

You div ids have space which is not allowed. I guessing there was either an hyphen or underscore which you have missed out. I have added hyphen in my code.

Also the above code keeps adding the menu when the viewport < 481. So try setting a flag or something once it has already moved. Otherwise you are going to have multiple menus.

Cheers!!

Upvotes: 1

Related Questions