Posted By

depiction on 03/07/13


Tagged

elements jquery move divs


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

lk_gahlot


Move Page Elements in Code Based on Browser Width


 / Published in: jQuery
 

When building responsive sites, you may find the need to move elements on the page around. Instead of creating multiple instances and toggling them on/off, move the entire divs using jQuery. When the browser width increases again, move it back to the original spot.

  1. // Optimization: Store the references outside the event handler:
  2. var $window = $(window);
  3.  
  4. function checkWidth() {
  5. var windowsize = $window.width();
  6. if (windowsize < 767) {
  7. //if the window is greater than 767px wide move the entire div.
  8. $(".awards-row").appendTo(".home-subfeature-row");
  9. } else {
  10. //move the div back
  11. var awardsRow = document.getElementById('awards-row');
  12. $('.home-featured-row').before(awardsRow);
  13. }
  14. }
  15. // Execute on load
  16. checkWidth();
  17. // Bind event listener
  18. $(window).resize(checkWidth);

Report this snippet  

You need to login to post a comment.