javascript - Responding to resize events in jQuery -
this i've tried:
if (jquery(document).width() < 1024) { jquery('.anywhere_div').insertafter('#a_fixed_position_div'); }
i don't know how write else
because take div
placed randomly on page , position under fixed div
.
i don't know put if resize window again.
also how can add timer http://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/ wont use resources.
thank in advance.
well can use below:
demo here , 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 original place , moves in place dom positioning.
update
to take 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 saving it's previous
, next
element , if has insert accordingly otherwise append parent
, hope need:
working demo , 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); } }
Comments
Post a Comment