Media Query width-based CSS not rendered after AJAX rewrites some content

Question

This page http://www.erica2013.dreamhosters.com/ (built with Zurb Foundation Framework) at widths over 425 px has a row of books on a div with a bookshelf background image.

In phone or browser when width is under 425px the background is not used and inner divs become rows.

CSS

#homeBookshelfRow {
    margin-top:50px;
    background:url(../img/homepage/hmpg-mini-shelf/hmpg-shelf.png) bottom center no-repeat; 
    height:160px;
    padding:19px 0 0 11px;
    text-align:center;
}

#homeBookshelfHeadline {
    display:none;   
}

.phoneBookGroup {
    margin:0;
    padding:0;
    display:inline;
}

#homeBookshelfRow .phoneBookGroup .homebook {
    padding-right:10px; 
    cursor:pointer;
}

Width Based CSS

@media only screen and (max-width: 425px) {  
    #homeBookshelfRow {
        background:none;
        height:auto;
        margin:0 0 20px 0;
    }

    #homeBookshelfHeadline {
        display:block;  
        font-family: 'Open Sans Condensed', sans-serif;
        font-size:2.25em;
        color:#b11717;
        padding:0;
        margin:0;   
    }

    .phoneBookGroup {
        display:block;
        margin-bottom:10px;     
    }


}

HTML

<div class="row" id="homeBookshelfRow">
    <p id="homeBookshelfHeadline">
    Bookshelf
    </p>

    <div class="phoneBookGroup">
        <img src="/bookshelf/HCcovers/21_199.jpg" alt="Justice for Sara" width="88" height="141" rel="21" data-urlname="Justice-for-Sara" class="homebook">
        <img src="/bookshelf/HCcovers/22_199.jpg" alt="Storm Season" width="88" height="141" rel="22" data-urlname="Storm-Season" class="homebook">
        <img src="/bookshelf/HCcovers/23_199.jpg" alt="Wishing Moon" width="88" height="141" rel="23" data-urlname="wishing-moon" class="homebook"></div>
  <div class="phoneBookGroup">    
        <img src="/bookshelf/HCcovers/18_199.jpg" alt="Watch Me Die" width="88" height="141" rel="18" data-urlname="Watch-Me-Die" class="homebook">
        <img src="/bookshelf/HCcovers/19_199.jpg" alt="Slices of Night" width="88" height="141" rel="19" data-urlname="Slices-of-Night" class="homebook">
        <img src="/bookshelf/HCcovers/17_199.jpg" alt="Blood Vines" width="88" height="141" rel="17" data-urlname="blood-vines" class="homebook"></div>
   <div class="phoneBookGroup">    
         <img src="/bookshelf/HCcovers/16_199.jpg" alt="Breakneck" width="88" height="141" rel="16" data-urlname="breakneck" class="homebook">
        <img src="/bookshelf/HCcovers/24_199.jpg" alt="Chances Are" width="88" height="141" rel="24" data-urlname="chances-are" class="homebook">           
    </div>   
   </div>

It renders fine initially but the following AJAX calls change the big book image and the sidebar content. When that happens in all tested browsers the width-based CSS is no longer rendered and the regular CSS is rendered.

Why is that happening? How do I fix it?

$('.homebook').click(function() {
  var id = $(this).attr('rel');
  var urlname = $(this).attr('data-urlname');
  //console.log("Book id " + id);
  $('#bigHomeBook').attr( 'src' , '/bookshelf/hmpg-mini-shelf/large/'+id+'.jpg'  );
  $('#bigHomeBookLink').attr( 'href' , '/bookshelf/' + urlname );

  $.ajax({
      url: 'inc/home_book_ajax.php?bID=' + id,
      success: function(data) {
        if (data == 'bad') {

        } else {
            $('#rightSidebar').html( '' );
            $('#rightSidebar').addClass( 'reviewRed' );
            $('#rightSidebar').html( data );
        }
      }
    }); 
});

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

You would want max-device-width as the browser is changing the current width to match the content (leading to scrolling or scaling and no longer matching your media rule.)

Take a look at: What is the difference between max-device-width and max-width for mobile web?

EDIT: Here is a much better link on more options and iphone specific oddities: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

I also made a little detector to get at the actual numbers: http://jsfiddle.net/JztA4/2/

<html>
<head>
  <script>
    var s = "";
    for (var i = 0; i < 4096; i++) {
      var dev = i % 2 ? "device-" : "";
      s += "\n @media all and ( min-" + dev +
        "width:" + i / 2 +
        "px) {\n#" + dev + "width:before {\ncontent:'" + Math.floor(i / 2) +
        "';\n}}\n";
    }
    s += "\n#sanity:before{content:'youbet';display:inline;}\n";

    l = document.createElement("link");
    l.setAttribute("type", "text/css");
    l.setAttribute("rel", "StyleSheet");
    l.setAttribute("href", "data:text/css," + s);
    document.head.appendChild(l);
  </script>
</head>

<body>
<ul>
    <li>sanity: <span id="sanity"></span>
    </li>
    <li>width: <span id="width"></span>
    </li>
    <li>device-width: <span id="device-width"></span>
    </li>
</ul>
</body>
</html>

But my use of data uri's etc also will upset older browsers, so you would need to copy the style into a real css sheet or maybe style element(s).

I have no pressing need to create a fully dynamic site, so I wont be mapping out results, but if anyone does please consider updating the jsfiddle and/or this question.

edited May 23 '17 at 12:05

Community

1
1

answered Jun 25 '13 at 18:31

lossleader

13,182
2
31
45

Hmm using `@media only screen and (max-device-width: 816px) {` had effect on all devices of width-based CSS not ever rendering at all. – jerrygarciuh Jun 25 '13 at 18:58
From the link you referenced "max-device-width refers to the viewport size of the device regardless of orientation, current scale or resizing. This will not change on a device so cannot be used to switch style sheets or CSS directives as the screen is rotated or resized." – jerrygarciuh Jun 25 '13 at 18:59
I think if you follow up that quote it goes to iphones specifically, while android and ipads present the width based on current orientation. Looking from the javascript debugger I think you can examine screen for the device width/height and window.innerWidth for the width value. My sense is that the device values will remain constant while the non-device will fluctuate with contents, leading to your problem. But I think you would have to test on specific mobile browsers to see how they adapt to the larger content. – lossleader Jun 25 '13 at 19:25
OK, I'm trying to get my head around it. I tried checking `$('#homeBookshelfRow').width()` and also `$('body').width()` before and after the script runs and the widths are constant. – jerrygarciuh Jun 25 '13 at 20:49
as lame as this may be I am using this script to get the css at the start and reapply at the end of the run... http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element and it's working great. – jerrygarciuh Jun 25 '13 at 21:14
Interesting solution! That still implies to me that the width is changing based on the content. If you have chrome on a desktop, you can manually set the device width in the debugger overrrides, then watch the window.innerwidth, window.screen and document.width (I get 454px on your site with a 400 device-width..) Personally, I would probably figure out which value I like to indicate minimal devices, and then use it to set a class on the body during the initial load. – lossleader Jun 25 '13 at 21:37

score 0 · Answer 2 · answered Jan 02 '15 at 19:31

I had this problem as well - none of my @media CSS styles were being applied after any Ajax update.

For me, I'm using ASP.NET and Telerik controls, and the solution I found was to disable page head updates on Ajax requests:

www.telerik.com/help/sitefinity/developer-manual/radajax.net2-telerik.webcontrols.radajaxutils.radajaxcontrol-enablepageheadupdate.html

I hope this helps you or others find an appropriate solution for your technology.

Media Query width-based CSS not rendered after AJAX rewrites some content

2 Answers2