Can I use javascript to place one element on different places, one for mobile and one for desktop?

Related searches

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.

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;
   }
} 

Show and Hide Different Content On Mobile Devices & Desktops, Learn how to use a few snippets of CSS to show and hide content on In the example above I'm just using a one simple sentence but you can put ANYTHING in between Look at your web page on a desktop and then on your phone. Just a few lines of CSS in a few places will show and hide different� To use positioning on an element, you must first declare its position property, which specifies the type of positioning method used for an element. Using the position property values, the elements are positioned using the top, bottom, left, and right properties. They also work differently depending on their position value.

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.

Detailed Positioning, When floated, an element's position is dependent on the other elements positioned around it. Will that element run into the one next to it? Will it appear on a new� Minimize the use of global variables. This includes all data types, objects, and functions. Global variables and functions can be overwritten by other scripts. Use local variables instead, and learn how to use closures.

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);
};

How To Use CSS3 Media Queries To Create a Mobile Version of , Rachel Andrew has written another article on the current state of In this article I' ll explain how, with a few CSS rules, you can create an The dConstruct 2010 website in Safari on a desktop computer To make it easier to read on a phone I have decided to linearize the entire design making it all one� Definition and Usage. The toFixed() method converts a number into a string, rounding to a specified number of decimals. Note: if the desired number of decimals are higher than the actual number, zeros are added to create the desired decimal length.

Creating a Mobile-First Responsive Web Design, E-commerce sites can have many use cases across contexts. accessible and utilize the user's location to enhance the mobile experience. and can be accessed by many mobile devices, tablets, desktop browsers and future <meta name="viewport" content="width=device-width, initial-scale=1" />. If you really value the clarity of using .mjs for modules versus using .js for "normal" JavaScript files, but don't want to run into the problem described above, you could always use .mjs during development and convert them to .js during your build step.

Responsive Web Design Media Queries, Media query is a CSS technique introduced in CSS3. Desktop. Tablet. Phone. We do this by adding one more media query (at 600px), and a set of new� There is not study proves this, but JavaScript is probably the most common language around the world, of course because the Internet and the progress of HTML 5 that supports tablets and mobile devices. So this is the reason I choose to post this article explaining how to develop games using HTML 5 and JavaScript.

Ignoring inline styles, the other approach that we can use to introduce elements to the goodness that is CSS styling involves JavaScript. We can use JavaScript to directly set a style on an element, and we can also use JavaScript to add or remove class values on elements which will alter which style rules get applied.

Comments
  • 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.