how to prevent loading html structure? - css

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 ?

Answer 1

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.

Answer 2

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();
});

Answer 3

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>