1

I am adding an element in the dom using javascript. I have added an using insertBefore() to place it where I want it on the mobile view. But in desktop it is supposed to be placed on a different space on the website. How can i solve this?

Just using CSS is not an option due to already existing elements that i cant't move.

    var priceWrapper = document.querySelector('.price-info-wrap')
    var mainContainer = document.querySelector('.price-info')
    var addUrgency = document.getElementById('urgency')
    priceWrapper.insertBefore(addUrgency, mainContainer)

The code provided is how I have placed "addUrgency" witch is the div I need to put elsewhere on desktop.

C. Doe
  • 19
  • 3
  • 2
    The problem with doing something like this is that if the user resizes the browser on the desktop, the element will end up somewhere other than where you want it. I'd almost recommend having it in both places in your markup, and then using CSS media queries to hide one of the two based on the width of the page. – Anish Goyal May 22 '19 at 12:29

3 Answers3

1

You can do it, but it's a bad idea.

Lay out your elements starting with smallest screen width you need, then work outwards from there using CSS Media queries to adjust the layout at specific screen widths as and when you need to.

In this case, if you can't do it any other way you could have both elements where you like them and then show/hide depending on the viewport width. Something like:

@media (min-width:800px)  { 
   //your non-mobile styles and classes go here
   .desktop-element{
      display: inline-block;
   }
   .mobile-element{
      display:none;
   }
}
Will Jenkins
  • 9,025
  • 1
  • 25
  • 42
0

You could use navigator.userAgent and determine if the browser is a mobile browser. There is also an question with really good answeres on doing that on StackOverflow: Detecting a mobile browser

Another option is to check the viewport-size with javascript. Which can be a better solution in the case you have css-rules in place that are responsive to the viewport-size , like: @media (width):

let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

After that it is a simple if-else to decide where to place your element.

Jan
  • 2,780
  • 2
  • 19
  • 25
0

You can use the onresize event. But, I have to note, that having two identical elements (perhaps using clone() to copy #addUrgency) in the DOM on their right places and display/not display them using CSS media queries instead of using Javascript to re-lay elements every time the viewport is resized is a better solution. However, to answer your question here is the most straightforward approach using your code. It also worth to note, that resize event can fire pretty fast, so you probably will want to throttle the function relay (answers are on StackOverflow). 

function relay(){
    var addUrgency = document.getElementById('urgency');
    if(`mobile view`){ //here goes a condition to determine what view you have. 
         var priceWrapper = document.querySelector('.price-info-wrap');
         var mainContainer = document.querySelector('.price-info');
         priceWrapper.insertBefore(addUrgency, mainContainer);
    }else{
         // Insert where you want it on desktop view
    }
}
window.onload = function() {
    relay();
    document.body.addEventListener("resize", relay);
};
Jaro
  • 117
  • 7