search

Mobideck / appdeck

AppDeck is a mobile hybrid application engine for iOS and Android.
http://www.appdeck.mobi/
47 stars 22 forks source link

Window height #98

Open AIMMOTH opened 6 years ago

AIMMOTH commented 6 years ago

Hello, I'm using the awesome Zurb's Foundation 6.4.3 and had trouble using their XY Grid layout.

It seems that $(window).height() is 0, and XY layout (and others) use this for its height.

The height can be found in window.innerHeight/outerHeight. To fix this I use interval and set elements to this height.

Example

  <html>
  <head></head>
  <body>
    <div class="grid-frame grid-y" id="fix-height">
    </div>
    <script>
      setInterval(function() {
        var min = Math.min(window.innerHeight, window.outerHeight);
        if ($("#fix-height").height() < min) {
          $("#fix-height").height(min);
        }, 1000);
    </script>
  </body>
  </html>
AIMMOTH commented 6 years ago

This is another way to seems safe

var bodyAdjusted = false;

setInterval(function() { var windowHeight = $(window).height(); var documentHeight = $(document).height(); var bodyHeight = $("body").height(); var ngHeight = $("#ngView").height(); var userAgent = navigator.userAgent; var href = document.location.href; var wrapper = $("#wrapper").height(); var children = $("#ngView").children().toArray().map(function(element) { return element.tagName; }); // $("#output").text("href:" + href + ", window:" + windowHeight + ", document:" + documentHeight + ", body:" + bodyHeight + ", ng:" + ngHeight + ", wrapper:" + wrapper + ", children:" + children + ", user agent:" + userAgent); var min = Math.min(window.innerHeight, window.outerHeight); if (ngHeight < min) { $("#ngView").height(min); } if (bodyHeight < min) { $("body").height(min); bodyAdjusted = true; } if (wrapper < min) { $(".wrapper").height(min); } }, 1000);