StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I wrote a <a href="http://www.benlesh.com/2012/11/angular-js-directive-basics.html" rel="noreferrer">blog entry not too long ago about the basics of directives</a> if you're interested in that.</p> <p>As far as converting what you have there into a directive, it's not too crazy.</p> <p>All you would do is use the code you already have, but inject $window instead of using window. (Mostly for testing purposes). I also added a check to make sure it didn't get applied twice.</p> <p>So it would look a little something like this:</p> <pre class="lang-js prettyprint-override"><code>app.directive('windowResizeThingy', function($window) { return { restrict: 'A', link: function(scope, elem, attr) { // make sure this doesn't get applied twice. if($window.windowResizeThingyApplied) return; $window.windowResizeThingyApplied = true; // hide the url bar var page = elem[0], ua = $window.navigator.userAgent, iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'), ipad = ~ua.indexOf('iPad'), ios = iphone || ipad, // Detect if this is running as a fullscreen app from the homescreen fullscreen = $window.navigator.standalone, android = ~ua.indexOf('Android'), lastWidth = 0; if (android) { // Android's browser adds the scroll position to the innerHeight. // Thus, once we are scrolled, the page height value needs to be corrected in case the page is loaded // when already scrolled down. The pageYOffset is of no use, since it always // returns 0 while the address bar is displayed. window.onscroll = function () { page.style.height = window.innerHeight + 'px' } } var setupScroll = $window.onload = function () { // Start out by adding the height of the location bar to the width, so that // we can scroll past it if (ios) { // iOS reliably returns the innerWindow size for documentElement.clientHeight // but window.innerHeight is sometimes the wrong value after rotating // the orientation var height = document.documentElement.clientHeight; // Only add extra padding to the height on iphone / ipod, since the ipad // browser doesn't scroll off the location bar. if (iphone && !fullscreen) height += 60; page.style.height = height + 'px'; } else if (android) { // The stock Android browser has a location bar height of 56 pixels, but // this very likely could be broken in other Android browsers. page.style.height = (window.innerHeight + 56) + 'px' } // Scroll after a timeout, since iOS will scroll to the top of the page // after it fires the onload event setTimeout(scrollTo, 0, 0, 1); }; ($window.onresize = function () { var pageWidth = page.offsetWidth; // Android doesn't support orientation change, so check for when the width // changes to figure out when the orientation changes if (lastWidth == pageWidth) return; lastWidth = pageWidth; setupScroll(); })(); } }; }); </code></pre> <p>And to apply it, you'd find your #page element you were applying it to before:</p> <pre class="lang-html prettyprint-override"><code> <div id="page" window-resize-thingy></div> </code></pre> <p>... and that should be it really. Presuming the code you have works, it should be run pretty much the same way.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload