Move elements at different breakpoints

A useful javascript snippet that lets you move elements to a new location at different breakpoints. Perfect if you can only have 1 instance of an element on the page but it needs to change position.

 <script> 

/*
This code is used to append items to different divs at different breakpoints.
It allows us to be more consistent with the development and align it to the design
without back and forth from designers.
*/

function swap(breakpoint, element, location) {
    if (window.innerWidth < breakpoint) {
        // Append 'location' to 'element' if the current window width is less than 'breakpoint'
        element.appendChild(location);
    } else {
        // Log an error if 'element' or 'location' are not valid HTMLElements
        console.error('Invalid element or location');
    }
}


</script>

Similar Code Snippets

Calculate sizes in CSS

CSS's calc() function allows you to perform calculations to determine CSS property values. It's incredibly useful for responsive design, such as when you need to adjust sizes dynamically. For example, if you want a div to be 100% of the viewport width minus a certain margin, you can use calc():

View Snippet

Fade non-hovered links

A fun animation where hovering over links will fade out all the items except the hovered item.

View Snippet

Balance text wrapping

‍‍Headings are crucial for grabbing attention and conveying key messages. However, unbalanced text lines can make headings less impactful. The text-wrap: balance; property helps distribute text more evenly across lines, reducing the occurrence of "widows" - a single word or short line at the end of a paragraph:

View Snippet

View All Snippets