Question

I am trying to update my javascript to be jquery.

Here is the javascript (this is working correctly)

<script type="text/javascript">

    function getWindowHeight() {
        var windowHeight = 0;
        if (typeof (window.innerHeight) == 'number') {
            windowHeight = window.innerHeight;
        }
        else {
            if (document.documentElement && document.documentElement.clientHeight) {
                windowHeight = document.documentElement.clientHeight;
            }
            else {
                if (document.body && document.body.clientHeight) {
                    windowHeight = document.body.clientHeight;
                }
            }
        }
        return windowHeight;
    }
    function setContent() {
        if (document.getElementById) {
            var windowHeight = getWindowHeight();
            if (windowHeight > 0) {
                var contentElement = document.getElementById('content')
                var contentHeight = contentElement.offsetHeight;

                if (windowHeight - contentHeight > 0) {
                    contentElement.style.position = 'relative';
                    contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
                    contentElement.style.visibility = 'visible';
                }
                else {
                    contentElement.style.position = 'static';

                    contentElement.style.visibility = 'visible';
                }
            }
        }
    }

    window.onload = function () {
        setContent();
    }
    window.onresize = function () {
        setContent();
    }

</script>

Here is the jquery (this just returns a blank screen without errors)

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

    function getWindowHeight() {
        var windowHeight = 0;
        if (typeof (window.innerHeight) == 'number') {
            windowHeight = window.innerHeight;
        }
        else {
            if ($.documentElement && $.documentElement.clientHeight) {
                windowHeight = $.documentElement.clientHeight;
            }
            else {
                if ($.body && $.body.clientHeight) {
                    windowHeight = $.body.clientHeight;
                }
            }
        }
        return windowHeight;
    }
    function setContent() {
        if ($) {
            var windowHeight = getWindowHeight();
            if (windowHeight > 0) {
                var contentElement = $('content')
                var contentHeight = contentElement.offsetHeight;

                if (windowHeight - contentHeight > 0) {
                    contentElement.style.position = 'relative';
                    contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
                    contentElement.style.visibility = 'visible';
                }
                else {
                    contentElement.style.position = 'static';

                    contentElement.style.visibility = 'visible';
                }
            }
        }
    }

    $(document).ready= function () {
        setContent();
    }
    $(document).onresize = function () {
        setContent();
    }

</script>

Answer 1

Your function bindings at the end are a bit off, they should look like this:

$(setContent);
$(window).resize(setContent);

This will lead to other errors though, $ isn’t a replacement for document, overall I think this is what you’re looking for:

function setContent() {
  var windowHeight = $(window).height();
  if (windowHeight > 0) {
    var contentHeight = $('#content').height();

    if (windowHeight - contentHeight > 0) {
      $('#content').css({ position: 'relative', 
                          top: ((windowHeight / 2) - (contentHeight / 2)) + 'px',
                          visibility: 'visible' });
    }
    else {
      $('#content').css({ position: 'static',
                          visibility: 'visible' });
    }
  }
}

$(setContent);
$(window).resize(setContent);​

You can give it a try here, a few notes on this compared to the code in the question:

• document.getElementById('content') is $('#content'), notice the # for an #ID selector.
• $(window).height() uses .height() to take care of the cross browser/various case heights.
• You can’t replace document with $, they’re very different things 🙂
• .css() takes an object, so you can shorten you style setting above.