advanced code snippet search

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.

Expand | Embed | Plain Text 
  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.