CODEWITHSUNDEEP
javascriptjquerymobile
phil
phil

Reputation: 174

Detect position:fixed with javascript

I am trying to use Kangax's script from here: http://kangax.github.com/cft/ to detect those browsers that "properly" implement position:fixed as desktop browsers do, compared to mobile browsers so I can use jQuery to fake it on mobile browsers.

The code from Kangax works fine. However when I incorporate it into my page it doesn't. I think it must be some obvious mistake. Any help would be really appreciated!

////Detect whether position:fixed works (mobile browsers). Use JS to position #navwrap if not.
  //Kangax's script - begins at "function" on the next line.
function detected() {
    var container = document.body;
    if (document.createElement &&
    container && container.appendChild && container.removeChild) {
        var el = document.createElement("div");
        if (!el.getBoundingClientRect) {
            return null;
        }
        el.innerHTML = "x";
        el.style.cssText = "position:fixed;top:100px;";
        container.appendChild(el);
        var originalHeight = container.style.height, originalScrollTop = container.scrollTop;
        container.style.height = "3000px";
        container.scrollTop = 500;
        var elementTop = el.getBoundingClientRect().top;
        container.style.height = originalHeight;
        var isSupported = elementTop === 100;
        container.removeChild(el);
        container.scrollTop = originalScrollTop;
        return isSupported;
    }
    return null;
};
if (detected()) {
    alert ('non-mobile');
}
    else {
        alert ('mobile');
    }

In case it helps, the original code (stripped as much as possible):

<body>
<h2>Position Fixed Test</h2>    

<script>    
(function(__global){
// make sure `window` resolves to a global object
var window = this;
var features = { };
features.IS_POSITION_FIXED_SUPPORTED = (features.__IS_POSITION_FIXED_SUPPORTED = function () {
var container = document.body;
if (document.createElement &&
  container && container.appendChild && container.removeChild) {
  var el = document.createElement("div");
  if (!el.getBoundingClientRect) {
      return null;
  }
  el.innerHTML = "x";
  el.style.cssText = "position:fixed;top:100px;";
  container.appendChild(el);
  var originalHeight = container.style.height, originalScrollTop = container.scrollTop;
  container.style.height = "3000px";
  container.scrollTop = 500;
  var elementTop = el.getBoundingClientRect().top;
  container.style.height = originalHeight;
  var isSupported = elementTop === 100;
  container.removeChild(el);
  container.scrollTop = originalScrollTop;
  return isSupported;
}
return null;
})();
__global.__features = features;
})(this);

(function(){
function detect() {
 for (var i=0; i<1; i++) {
  var testResult = __features['IS_POSITION_FIXED_SUPPORTED'];
  alert ( testResult );
  i++;
 }
};
detect(); 
})();
</script>

</body>

Upvotes: 2

Views: 1153

Answers (2)

phil
phil

Reputation: 174

Sorted. Thanks for the input.

Turns out my version of the code runs fine, but it has to be placed in the body of the page. If it is in the Head, even within a DOM Ready call it doesn't.

Just have to find out why now! But at least the code works.

Upvotes: 0

detaylor
detaylor

Reputation: 7280

I guess that you are always getting non-mobile. You are checking that detected exists not executing the function. Change the end of your JavaScript to

if (detected()) {
  alert ('non-mobile');
}
else {
    alert ('mobile');
}

Is there a reason that you are creating the function as an anonymous function assigned to a variable and not as a named function e.g.

function detected(){
  // Function content.
}

Upvotes: 1

Related Questions