I am using CSS media queries to deliver different views of my website. Basically just depending on the width i show/hide certain elements.

Now I also need to move stuff around depending on this width. That means a DOM element must move to a different place in the DOM tree.

Since it contains forms and other unique stuff, I can not just have it in the DOM tree twice and toggle visibility. I really need to move it around, preferably with jQuery.

I have already found this: / But is it really the only way?

I am using CSS media queries to deliver different views of my website. Basically just depending on the width i show/hide certain elements.

Now I also need to move stuff around depending on this width. That means a DOM element must move to a different place in the DOM tree.

Since it contains forms and other unique stuff, I can not just have it in the DOM tree twice and toggle visibility. I really need to move it around, preferably with jQuery.

I have already found this: http://css-tricks./media-query-change-detection-in-javascript-through-css-animations/ But is it really the only way?

• javascript
• jquery
• html
• css

5 Answers 5

No. It isn't the only way :)

enquire.js - A lightweight, pure JavaScript library for responding to CSS media queries.

intention.js - Offers a light-weight and clear way to dynamically restructure HTML in a responsive manner

No, not the only way.

You can always use js to make the page responsive.

Another good js plugin is response.js

But the most important thing is the concept of how to make effective media queries.

Now the good tendency is making media query based on your page content rather than some fixed width break points.

Here is some interesting articles on this.

1. 7 Habits of Highly Effective Media Queries
2. Determining breakpoints for a responsive design

You can use the window.onResize event to detect a change in width and work accordingly with that.

You don't need to move the element to a different place in the DOM tree - you need to move it to a different location on the screen. Proper web development has separation of content and presentation - the location of information in the HTML document can have little to do with where it is found on screen. This is not much space to talk about CSS positioning, but I would check out position: absolute, position: fixed and float.

you can use use vanilla js

if (window.innerWidth < 768) 
{
    
//do something here 
   
 }