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

4 Answers4

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,507
  • 1
  • 27
  • 46
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,853
  • 2
  • 21
  • 26
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
0

You could do this using JavaScript but I wouldn't recommend this approach as I believe this is achievable in most cases with plain HTML and CSS. One method would be using display: grid and placing the elements in the desired rows/columns on mobile (If you are of course utilizing a mobile-first approach) and then redistributing them on larger screens with media queries. Additionally, you could of course make use of position: absolute whenever this strategy does not completely do the job.

Here is a great article, in case you are not completely familiar with display: grid.

histefanov
  • 21
  • 1
  • 2