javascript to jquery

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>

Nick Craver · Accepted Answer · 2010-09-13 23:36:53Z

3

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.

edited Sep 13, 2010 at 23:36

answered Sep 13, 2010 at 23:30

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dan_vitch Over a year ago

Thanks for the reply. As you can tell I am new to this. I will try your updates and let you know how they work out.

trrrrrrm · Accepted Answer · 2010-09-13 23:44:29Z

1

try this code..

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

answered Sep 13, 2010 at 23:44

trrrrrrm

11.9k25 gold badges88 silver badges131 bronze badges

1 Comment

AKB Over a year ago

<SCRIPT type="text/javascript"> var input = $("input[submitted]");if (input.val() == "false") { input.val("true"); setTimeout(function(){ $("#safeForm15").submit()}, 100);}else { $("#toHide").hide();}</SCRIPT> java script error in IE: Object doesnt support this property or method.

Collectives™ on Stack Overflow

javascript to jquery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related