how to prevent loading html structure?

Question

I have 3 columns: left center right and would like to drop loading the left when the @media screen maxwidth less than 768px.

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

I don't want to use display:none to just hide the column but to prevent it from loading, so it doesn't have to run server code that might slow things down.

What's the best elegant way to do that ?

I think this question has already an answer. There are multiple ways to prevent these elements from hiding. But I don't think there is a way of preventing it from loading. For alternatives you can visit this question: http://stackoverflow.com/questions/15855826/css-alternatives-to-style-displaynone
You have to understand that the browser will download the whole html-file, build the website and then check the css-code that styles the css. You will not be able to provide the browser from loading things with css. — , May 03 '14 at 07:45

PhistucK · Accepted Answer · 2014-05-03T08:03:01.310

CSS cannot prevent regular HTML content from loading and the server cannot know whether a media query matches.

You can get the matching media query using JavaScript (window.matchMedia("only screen and (min-width: 480px)")) and then load the content that you want from the server (using AJAX, or by navigating to a URL, with, say, ?screen-width=1024 appended to it).

It is not elegant, it is pretty ugly and not dynamic at all (unless you check this for every page load and if the query string does not match the media query that matches this session, you change the query string and reload the page), but it should work.

thanks for your input. I might use matchMedia for only the layout/master page. — nam vo, May 03 '14 at 07:49

score 0 · Answer 2 · answered May 03 '14 at 07:51

You can't detect the page width of the client from the server.

if you wanted the server to the div then you would first need to call a page that captures the screen width and then passes it to the server in a request for your page:

Example javascript (using JQuery):

window.location.href = 'www.site.com/mypage.php?page_width=' + $(window).width();

This could then be accessed in php through $_GET['page_width']

Alternatively you could do the whole thing in JavaScript which would be a good and dynamic way to handle it that would also take account of resizing of the browser window during page use.

I would strongly recommend using a library like JQuery as it makes your code much neater and is very powerful. This can simply be done using the following line of code: (for a web connected site, if it is for local use you would need to download the file locally)

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

Then it would be a simple matter of inserting the following code:

$(function(){
    if($(window).width() < 768){
        $('div.left').hide();
    }
});

The $(function(){ }); runs the code when the page has loaded.

If you wanted it to work when the page was resized as well then you could put that inside a function

function checkSize(){
    if($(window).width() < 768){
        $('div.left').hide();
    }else{
        $('div.left').show();
    }

}

and call it when the page is loaded and when the screen is resized, like so:

$(function(){
    checkSize();
});

$( window ).resize(function() {
    checkSize();
});

score -1 · Answer 3 · answered May 03 '14 at 07:51

-1

It's not really elegant, but you could make the entire div a string and put it in an if statement within a script block. that way you check the window size and if it's not big enough, it just skips over all that html:

    <script>
      if ($(window).width() > 768) {
        $("body").prepend("<div class='left'> Whatever stuff is in your div </div>");
      }
    </script>

answered May 03 '14 at 07:51

eriese

175
7

The original poster wants to prevent the server from doing some heavy processing, so this would not work, as the content is meant not to even be prepared in such cases. – PhistucK May 03 '14 at 08:02
In either case, the html has to exist somewhere. Instead of removing the content (i.e. preparing and not using it) if the window is too small, I'm advising that OP check to see if the window is large enough to prepare and add the content. Nothing within the if statement will load if the window is too small. – eriese May 03 '14 at 08:56
It does not have to 'exist' somewhere. If you load it using AJAX, the content simply does not exist (the server has not processed anything and there is no result) unless you actually send the AJAX request. – PhistucK May 03 '14 at 09:02

how to prevent loading html structure?

3 Answers3