How to add/remove Div from the DOM using Jquery on window resize

Question

I am trying to remove and add div back to the DOm on window resize .

I have two google adds generated in my mobile-web page at different position . According to the google policy the mobile page can have only one add.

But I had to show the google adds at diffenret place according to different window size/mobile device etc etc . So i was just hiding one of them using Media QUeries .

But as the other div was also in the dom it is against the policy . So I used following script

<script>
$(document).on('pagecreate','#outerPage',function(e) {
   var windowWidth = $(this).width();
   if(windowWidth <300)
   {
       $('.addBigphone').remove();
   }
   else
   {
       $('.addSmallphone').remove();
   }
});
</script>

the html looks like this

<div id="bloque" class="addSmallphone">
    <?php // if($showadslast==t rue){?>
    <div class="google_add">
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- resultmobile -->
<ins class="adsbygoogle" style="display:inline-block;width:320px;height:90px" data-ad-client="ca-pub-8" data-ad-slot=""></ins>

        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

<div id="bloque1" class="addBigphone">
        <?php // if($showadslast==t rue){?>
        <div class="google_add">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- resultmobile -->
    <ins class="adsbygoogle" style="display:inline-block;width:320px;height:90px" data-ad-client="ca-pub-8" data-ad-slot="04"></ins>

            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>

Now it works only on page load .

Note I want to save the content of the div and add it back on different resize. How can I do that

Thanks in advance

Answer 1

I think this is what you want. You should use detach rather than remove when you plan to re-insert the element in the DOM.

var $bigPhoneAdd = $('.addBigphone'),
    $smallPhoneAdd = $('.addSmallphone');

$(window).resize(function(e) {
   var windowWidth = $(this).width();

   if (windowWidth < 300) {
       $bigPhoneAdd.detach();

       //You should append at desired insertion point...
       //Perhaps it could be made dynamic by storing $('.addBigphone').parent()
       //when the page loaded.
       $smallPhoneAdd.appendTo(?);
   }
   else {
       $smallPhoneAdd.detach();

       //You should append at desired insertion point...
       $bigPhoneAdd.appendTo(?);
   }
});

Answer 2

Sounds like you should be using the resize event.

jquery http://api.jquery.com/resize/

You can detect the size of the window on resize, store any data you need, and take action as the window size changes.