How to re-order HTML via Javascript/ JQuery

Question

I have the following in my HTML. <div class="header"> appear on top of the page. I would like to place it just after the footer <div class="footer"> if the page is displaying on a mobile device.

<script type="text/javascript">
   $(document).ready(function(){   
        var isMobile = false; //initiate as false
   // device detection
   if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
   || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
   isMobile = true;
   }

   if (is_mobile == true) {
          $( "footer" ).first().after( $( "header" ) );
      }

   });
</script>

This attempt does not make any changes in the HTML ordering. What am I doing wrong?

Thank you all in advance.

I would use the document resize function and then test for desired screen size. It's more of a responsive method vs actually detecting devices. — DraganAscii
– DraganAscii, Commented Jun 29, 2017 at 17:13
Device sniffing is never a good pattern to follow. While you can't move elements directly in CSS, you can make them appear in other places if you use absolute positioning. For that reason I'd suggest you use a stylesheet with a media rule for small devices to re-organise your page. It would perform better, be more reliable and future proof, not to mention a better separation of concerns. — Rory McCrossan
– Rory McCrossan, Commented Jun 29, 2017 at 17:16

Shanil Fernando · Accepted Answer · 2017-06-29 17:17:34Z

5

I would recommend you to use Media Queries over jquery for this purpose

/* For mobile phones: */
.header-top {
    display:block;
}
.header-bottom {
    display:none;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .header-top {
    display:block;
    }
    .header-bottom {
    display:none;
    }
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .header-top {
    display:none;
    }
   .header-bottom {
    display:block;
    }
}

for more info: Media Queries

answered Jun 29, 2017 at 17:17

Shanil Fernando

1,31211 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Louys Patrice Bessette · Accepted Answer · 2017-06-29 17:17:47Z

1

It looks like the dots are missing in your selectors.

Try this:

$( ".footer" ).first().after( $( ".header" ) );

answered Jun 29, 2017 at 17:17

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Collectives™ on Stack Overflow

How to re-order HTML via Javascript/ JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related