I am trying to set the minimum-height of my div element by referring to its class name but it comes back with an error: TypeError: cannot read property 'css' of null.

HTML element:

<div class="container contentContainer" id="topContainer">
        <div class="row">
            <div class="col-md-6 col-md-offset-3" id="topRow">
                <p class="bold">Please scroll down for more information </p>
            </div>
        </div>
    </div>

Javascript:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src=".11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

<script>
    $(function () {
        var x = document.getElementsByClassName("contentContainer");
        alert(x);
        if(x != null)
        {
            $(".contentContainer").css('min-height',$(window).height());
        }
    });
</script>

Any suggestions as to why am I getting this error? Kindly let me know.

The problem occurs when I include my external javascript file:

<!-- <script type="text/javascript" src="js/monthly.js"></script> -->

I am trying to set the minimum-height of my div element by referring to its class name but it comes back with an error: TypeError: cannot read property 'css' of null.

HTML element:

<div class="container contentContainer" id="topContainer">
        <div class="row">
            <div class="col-md-6 col-md-offset-3" id="topRow">
                <p class="bold">Please scroll down for more information </p>
            </div>
        </div>
    </div>

Javascript:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

<script>
    $(function () {
        var x = document.getElementsByClassName("contentContainer");
        alert(x);
        if(x != null)
        {
            $(".contentContainer").css('min-height',$(window).height());
        }
    });
</script>

Any suggestions as to why am I getting this error? Kindly let me know.

The problem occurs when I include my external javascript file:

<!-- <script type="text/javascript" src="js/monthly.js"></script> -->

• javascript
• jquery
• html
• css
• twitter-bootstrap

• 2 Have you added a script tag with jQuery? – Thomas Bormans Commented Jan 11, 2015 at 14:04
• Yes I did. Is that incorrect? – Neophile Commented Jan 11, 2015 at 14:05
• jQuery is apparently not loaded, as you have had to remove the $(function () {...} to get your code to work. – Teemu Commented Jan 11, 2015 at 14:06
• My code does not give any errors when I uncomment the $(function() .. {} but it doesn't work the way I expect it to i.e. set the minimum height. – Neophile Commented Jan 11, 2015 at 14:08
• Can you post your full code? And have you tried it with a document.ready()? – Thomas Bormans Commented Jan 11, 2015 at 14:09

6 Answers 6

You're loading jQuery and Bootstrap at the same time and they both clobber the $ symbol; to use only jQuery you would use the canonical name:

jQuery(".contentContainer")
    .css('min-height', jQuery(window).height());

Or, use a wrapper:

jQuery(function($) {
    $(".contentContainer").css('min-height',$(window).height());
});

This is the jQuery syntax.

$(window).height();

You will need to include jQuery or use the native JavaScript version:

window.innerHeight;

In order to use jQuery, you will need to include the jQuery library

You were getting the error on the JSFiddle because you hadn't included jQuery.

Updated Fiddle

On the left nav-bar, there is a section which says "Frameworks & Extensions". You need to select

jQuery (edge)

Or any jQuery version from that drop-down list.

Because you hadn't included jQuery, the $ constructor didn't exist, so the error

TypeError: cannot read property 'css' of null.

was thrown because you were trying to access a property of a non-existent (null) object.

var x = document.getElementsByClassName("contentContainer");

Returns an array of elements having that class. Access the required element as you would in a normal array.

x[0]     //The first element, if there is any.

If you type $ [ENTER] on your browser console do you get something like

function (a,b){return new e.fn.init(a,b,h)

If the selector $('.contentContainer') returns null and not an object containing function css, maybe $ is not referencing to jQuery or has been changed beetween where you include jquery.js and the code you are trying to run.

If your error is occurring in the use of bootstrap-dialog, comment out the following line of code in the bootstrap-dialog.js file:

$backdrop.css('z-index', zIndexBackdrop + (dialogCount - 1) * 20);

This stops the "TypeError: cannot read property 'css' of null" error.

If your error is not occurring in the use of bootstrap-dialog, open the relevant js file, then comment out all of the css file references in it and re-run the web page. It should run successfully. Then uncomment the lines of code one by one and re-test the page until it breaks again. This will eventually lead you to the villain line of code, then you can comment it out and avoid this error going forward.