A Pen by Moritz Gießmann.

Conditional-loading-uncomment-technique.markdown

Conditional loading uncomment technique

Show content (in this example slides of a slideshow) only if there is enough horizontal space (e.g. 900px) for them by uncommenting the html. Why would you do this? Because you want to save traffic on mobile devices and make the site loading faster. And you maybe don't want to place image paths or other content in your javascript files.

A Pen by Moritz Gießmann on CodePen.

License.

index.html

<h2>Brought to you by:</h2>
<a href="http://twitter.com/moritzgiessmann">@MoritzGiessmann</a><br>
<a href="http://moritz-giessmann.de">moritz-giessmann.de</a>
  <p class="window-size"></p>
<div class="container">
 
  <div class="slideshow">
    <!--<img class="slide" src="http://dummyimage.com/900x400/ffed00/000.jpg&text=Slide+1">-->
    <!--<img class="slide" src="http://dummyimage.com/900x400/dc0050/fff.jpg&text=Slide+2">-->
    <!--<img class="slide" src="http://dummyimage.com/900x400/009ee0/fff.jpg&text=Slide+3">-->
  </div>
  <p>Alternate mobile content, small image, whatever.</p>
  
</div>

script.js

/* 
 * Conditional uncomment technique
 * --------------------------------------------------------------
 * Show content (in this example slides of a slideshow)
 * only if there is enough horizontal space (e.g. 900px) for them 
 * by uncommenting the html. Why would you like to do this? Because you 
 * want to save traffic on mobile devices and make the site loading faster.
 * You perhaps also don't want to place image paths or other    
 * content in your javascript files for conditional loading.
 *
 * This technique lets you put your html where it belongs to and 
 * not inside an external js or json file.
 * You want to see the effect? Make your browserwindow smaller than 900px
 * in width and then make it bigger, at least 901px wide. You'll see that  
 * the comments around the images will disappear.
 */


/* First we need this awesome little "jQuery uncomment" plugin
 * Author: Romuald Brunet <[email protected]>
 * http://chivil.com/uncomment/
 */
(function($) {
  $.fn.uncomment = function(recurse) {
    $(this).contents().each(function() {
      if ( recurse && this.hasChildNodes() ) {
      	$(this).uncomment(recurse);
			} else if ( this.nodeType == 8 ) {
				// Need to "evaluate" the HTML content,
				// otherwise simple text won't replace
				var e = $('<span>' + this.nodeValue + '</span>');
				$(this).replaceWith(e.contents());
			}
		});
	};
})(jQuery);


/* 
 * Next up a very simple slideshow approach, just to demonstrate the behavior
 * Simple jQuery Slideshow 
 * http://codepen.io/MoritzGiessmann/pen/kIGvs
 * @author @MoritzGiessmann
 */

$(document).ready(function() {
  
  $(".slideshow :first-child").appendTo(".slideshow");
  setInterval(function() {
    $(".slideshow :first-child")
        .hide()
        .appendTo(".slideshow")
        .fadeIn(2000);
    }, 4000);


/* 
 * Now we check how much space we have and uncomment the images (could also be 
 * HTML or whatever) 
 */
  
  function uncommentIfBigEnough () {
    $('.window-size').text('Client width: ' + document.documentElement.clientWidth+'px');
    
    if (document.documentElement.clientWidth > 900) {
      $('.slideshow').uncomment(true); // uncomments everything inside of the given element
    }
  }
  
  // Initial function call
  uncommentIfBigEnough();
  
  // Call if window gets resized
  $(window).resize(function(){
    uncommentIfBigEnough();
  });

});

style.scss

@import "compass/css3";
.container {
  margin:0 auto;
  max-width:900px;
}

.slideshow {
    position: relative;
    width: 900px;
    height: 400px;
  
  > .slide {
    position: absolute;
    top: 0;
    left: 0;
  } 
}

@media screen and (max-width: 900px) {
  .slideshow {
    height:auto;
  }
}

/* Some styles to make it look nice ;) */
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
body {
  background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png);
  font-family:"PT Sans";
  font-size:1.2em;
  color:#222;
}