CODEWITHSUNDEEP
javascriptjquery
Kal-El
Kal-El

Reputation: 31

Responding to resize events in jQuery

This is what I've tried:

if (jQuery(document).width() < 1024) {
    jQuery('.anywhere_div').insertAfter('#a_fixed_position_div');
}

I don't know how to write the else because I take a div which is placed randomly on the page and I position it under a fixed div.

I don't know where to put it back if I resize the window again.

Also how can I add a timer like this http://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/ so it wont use much resources.

Thank you in advance.

Upvotes: 0

Views: 90

Answers (2)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Well you can use as below:

DEMO HERE and FULL SCREEN DEMO HERE

HTML

<div id="a_fixed_position_div">
    Fixed Div
</div>

<div class='originalPlace'>
    Original Place
    <div class='anywhere_div'>AnyWhere Div</div>
</div>

JS

$(window).on('resize',function(){
if ($(window).width() < 1024) {
    jQuery('.anywhere_div').detach().insertAfter('#a_fixed_position_div');
}
else
{
    jQuery(".anywhere_div").detach().appendTo('.originalPlace')
}
});

.detach() detaches it from original place and moves it in place DOM positioning.

UPDATE

To take it from random place - 

var originalPlace=$('.anywhere_div').parent();
$(window).on('resize',function(){
    if ($(window).width() < 1024) {
        jQuery('.anywhere_div').insertAfter('#a_fixed_position_div');
    }
    else
    {
        jQuery(".anywhere_div").detach().appendTo(originalPlace);
    }
});

UPDATE 2

Here we are saving it's previous and next element too and if it has any it will insert accordingly otherwise it will append it to its parent and hope this is what you need:

WORKING DEMO and WORKING DEMO FULL RESULT

HTML

<div id="a_fixed_position_div">
    Fixed Div
</div>

<div class='originalPlace'>
    Original Place
    <div class="firstElem">Prev Div</div>
    <div class='anywhere_div'>AnyWhere Div</div>   
</div>

JS

var originalPlace=$('.anywhere_div').parent();
var previousElement=$('.anywhere_div').prev();
var preLength=$('.anywhere_div').prev().length;
var nextElement=$('.anywhere_div').next();
var nextLen=$('.anywhere_div').next().length;

$(document).ready(function(){
    checkresize();
    $(window).on('resize',function(){
        checkresize();
    });
});
function checkresize()
{
    if ($(window).width() < 1024) {
        jQuery('.anywhere_div').insertAfter('#a_fixed_position_div');
    }
    else
    {
        if(preLength!=0)
             jQuery(".anywhere_div").detach().insertAfter(originalPlace.find(previousElement));
        else
            if(nextLen!=0)
                 jQuery(".anywhere_div").detach().insertBefore(originalPlace.find(nextElement));
            else
                jQuery(".anywhere_div").detach().appendTo(originalPlace);
    }
}

Upvotes: 1

SharpEdge
SharpEdge

Reputation: 1762

Based on what you've posted this is a working snippet

$(function(){
  
  var resizeId;
  var size="big";
  var $placeholder = $("<!-- myElement -->");
  $(window).resize(function() {
      clearTimeout(resizeId);
      resizeId = setTimeout(doneResizing, 500);
  });
 
 
  function doneResizing(){
    
    if ($(document).width() < 1024 && size=="big") {
      
      size="small";
      
      $('.anywhere_div')
        .before($placeholder)
        .insertAfter('#a_fixed_position_div');
      
    } else if(size=="small") {
      
      size="big";
      
      $placeholder
        .after( $('.anywhere_div') )
        .remove( );
      
    }
  }

  doneResizing();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a_fixed_position_div" style="height:100px; width:100px;"></div>
<div id="another_fixed_position_div" style="height:100px; width:100px;">
  <div class="anywhere_div" style="height:100px; width:100px; background-color:#ff0000;"></div>
</div>

Upvotes: 0

Related Questions