Change DOM stacking order for mobile

Question

want to know how to change the DOM stacking order for mobile using jQuery so we dont have to use php. Currently I am trying:

jQuery(document).ready(function(){

jQuery(window).resize(function() {

if (jQuery(window).width() < 768) {
    var sidebar1 = document.getElementById("sidebar1");
    var body = document.getElementById("right");
    jQuery(sidebar1).after( jQuery(right) );
    } 

    });
});

The HTML:

<div class="row-fluid">
   <div id="sidebar1" class="span3">
   <div id="right" class="span9">

I might need to use insertAfter or prepend, but not sure. Thanks

WAIT! Before you resume, please consider the performance. DOM changes on a mobile phone is a very intensive task. You would be better off by serving a site mobile first and change the DOM if the client is a tablet or desktop. — Tim S., Sep 09 '13 at 15:13
Good to know tim. We actaully use the m detect php class to load only what we need for mobile, but I think its worth more time than a quick jQuery fix. https://code.google.com/p/mobileesp/source/browse/PHP/mdetect.php — cpk, Sep 09 '13 at 15:42

pawel · Accepted Answer · 2013-09-09T15:24:19.547

3

You don't have to reorder these elements in the DOM, you can achieve what you need using CSS and media queries:

@media screen and(max-width: 768px){
    #sidebar1 { float:right; }
    #right { float: left; }
}

[edit] I see you probably use bootstrap, so the conent may be linearized and #sidebar appears above #right (which I assume is the main content) on small screens. If that's the case then swap them in the original source, because it's generally a good practice to put main content higher up in the document source. Then use floats to create columns for tablet/desktop version. Bootstrap even has a class name for this:

<div class="row-fluid">
   <div id="right" class="span9 pull-right">
   <div id="sidebar1" class="span3">

edited Sep 09 '13 at 15:24

answered Sep 09 '13 at 15:13

pawel

35,827
7
56
53

I agree this would work, but we use a huge php file that has a number of templates that are structured this way, plus the site is live so I can't redesign code at the moment. – cpk Sep 09 '13 at 15:39
1

See the answers here: http://stackoverflow.com/questions/624519/css-layout-use-css-to-reorder-divs and here http://stackoverflow.com/questions/220273/css-positioning-div-above-another-div-when-not-in-that-order-in-the-html - not only the accepted, but others with nice solutions using modern CSS features. – pawel Sep 09 '13 at 15:44
i knew this has been done/asked before. when i created these templates I was a bit new to bootstrap and css best practices. thanks a lot pawel. – cpk Sep 09 '13 at 15:54

score 0 · Answer 2 · answered Sep 09 '13 at 16:41

0

So based on your comment, I read some existing posts and came up with this, which works.

jQuery(window).resize(function(){

var windowsize = jQuery(window).width();
if (windowsize < 768) {
    jQuery("#right.span9").insertBefore(jQuery("#sidebar1.span3"));
    } else {
        jQuery("#sidebar1.span3").insertBefore(jQuery("#right.span9"));
    }
});

thanks again pawel for pointing me in the right direction.

answered Sep 09 '13 at 16:41

cpk

809
1
6
20

1

I'd be hesistant to use the .resize() event as this will be triggering ALOT as the user navigates the page. – wkdshot Feb 13 '15 at 10:28

Change DOM stacking order for mobile

2 Answers2