Swapping div position depending on screen width

I'm trying to create a responsive website and would like two div's to swap position depending on the screen width (on start and when resizing).

I have done some research and tried a few options but had no luck. I'm fairly new to JQuery and JS so any help would be greatly appreciated.

html

<div id="div1">facebook</div>
<br/>
<div id="div2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY"/></div>

jquery

$(document).ready(function(){
div1 = $('#div1');
div2 = $('#div2');
tdiv1 = div1.clone();
tdiv2 = div2.clone();
.resize()
});

$(window).resize(function() { //Fires when window is resized
    if($(window).width() < 800){
    div1.replaceWith(tdiv2);
    div2.replaceWith(tdiv1);}
    else{
    div1.replaceWith(tdiv1);
    div2.replaceWith(tdiv2);}  
    });

Answers:

Answer

The easiest way to achieve this is to put it in a wrapper and append() and prepend() the divs within the wrapper:

JS Fiddle

HTML

<div class="wrapper">
  <div id="div1">facebook</div>
  <br/>
  <div id="div2">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY" />
  </div>
</div>

Jquery

$(window).on('load resize', function() { //Fires when window is loaded or resized
  var div1 = $('#div1');
  var div2 = $('#div2');
  var wrapper = $('.wrapper');

  if ($(window).width() < 800) {
    wrapper.prepend(div1).append(div2); // move div 1 to start & div2 to end
  } else {
    wrapper.prepend(div2).append(div1); // move div 2 to start & div 1 to end
  }
});

And in case you want to write it in a different way:

JS Fiddle

$(window).on('load resize', function() { //Fires when window is loaded or resized
  var windowWidth = $(window).width(),
      div1 = $('#div1'),
      div2 = $('#div2'),
      first = windowWidth < 800 ? div1 : div2,
      last = windowWidth >= 800 ? div2 : div1;

      $('.wrapper').prepend(first).append(last); 
});
Answer

try this :

<script type="text/javascript">

    var run = false;

    $(window).on("resize",function(){

        if($(window).width()<800 && !run) {

            $("#div2").remove();

            $('<div id=div2><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY"/></div>').insertBefore($("#div1"));

            run = !run;

        }

        else if($(window).width() >= 800 && run){

            $("#div1").remove();

            $('<div id=div1>facebook</div>').insertBefore($("#div2"));

            run = !run;

        }
    })
</script>

Final code :

NOTE : when want run snippet, click full page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="div1">facebook</div>
<br/>
    
<div id="div2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY"/></div>
    
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
<script type="text/javascript">
    
    var run = false;
    
    $(window).on("resize",function(){
        
        if($(window).width()<800 && !run) {
            
            $("#div2").remove();
            
            $('<div id=div2><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY"/></div>').insertBefore($("#div1"));
            
            run = !run;
                
        }
        
        else if($(window).width() >= 800 && run){
            
            $("#div1").remove();
            
            $('<div id=div1>facebook</div>').insertBefore($("#div2"));
            
            run = !run;
               
        }
    })
    </script>
    </body>
</html>

NOTE : when want run snippet, click full page.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.