Home > DeveloperSection > Forums > Change div order to suite responsive viewport
jacob rasel
jacob rasel

Total Post:88

Points:616
Posted on    December-31-2014 11:04 PM

 JQuery JQuery  HTML  Responsive Design  CSS 
Ratings:


 1 Reply(s)
 808  View(s)
Rate this:
Im using the script below to change the order of two divs - my document's html has the div class "imagepanel ip-middle" preceeding the div class "bgimagescale image2". When viewing on a viewport smaller than 768px wide - I want the divs reversed. The script below does not reverse the divs on page load. Only on resize - as I guess the script indicates!: .bind("resize", listenWidth). I have been unable to locate the right way to change the order of the divs using jquery on page load as well as resize. Many thanks.

<script type="text/javascript">
jQuery(document).load($(window).bind("resize", listenWidth));

function listenWidth( e ) {
    if($(window).width()<767)
    {
        $("div.imagepanel.ip-middle").remove().insertAfter($("div.bgimagescale.image2"));
    } else {
        $("div.imagepanel.ip-middle").remove().insertBefore($("div.bgimagescale.image2"));
    }
}
</script>


Hugh Jackman
Hugh Jackman

Total Post:52

Points:366
Posted on    December-31-2014 11:25 PM

Use load and resize together, something like this:


$(window).on("load resize",function(e){


Don't want to miss updates? Please click the below button!

Follow MindStick