Why is my Jquery function not changing the height of my textarea?

Here are the stylesheet excerpts for the panel class which I am using to edit the text area and "textarea".

    .panel{

        float: left;
        width: 50%;
    }

    textarea{

        resize: none;
        border-top: none;
        border-color: grey;
    }

Below is the stylesheet excerpt for "topbar", the header above the text area.

        #topbar{

        width: 100%;
        background-color: #FFFFFF;
        padding: 5px;
        height: 20px;
    }

Here is the div that contains my textarea (The bodyContainer id is not styled)

<div id="bodyContainer">

    <textarea id="TextPanel" class="panel">Hello World</textarea>

    <iframe id="outputPanel" class="panel"></iframe>
</div>

Below are the Jquery computations intended to edit the textarea's height.

    $(".panel").height($(window).height() - $("#topbar").height() - 15) ;

    $(".panel").width($(window).width()/2 -10 ;