Question

There seems to be a problem with my DOM, in that the style of elements are all appearing blank.

My jQuery is simply

// JavaScript Document
$(document).ready(function(){
    $(#mainContent).css("min-height", function(){
        return $(window).height() + 'px';
    });
});

Nothing happens on page load.

I suspect there is not a problem with the syntax, or if there is, this is not what is causing my problem. I have tried to script this myself in javascript and it yielded similar results which is why I turned to jQuery in the first place.

if I

alert("text") 

it works fine but if I try

$(#mainContent).css("min-height")

then nothing happens.

I have, in a separate javascript file created a variable which is simply

var mainCon = document.getElementById("mainContent");

and using firebug, put a breakpoint in after the variable is declared, then when inspecting the variable using firebug, everything within styles is blank, eg

height ""
width ""
color ""

etc.

I have absolutely no idea what is causing this problem and I am losing sleep over it, I have scraped the hell out of google and can’t seem to find anything relevant.

Any help you can find will be massively appreciated,
Thanks in advance

Answer 1

You need to quote your selectors (specifically #mainContent):

$(document).ready(function(){
    $("#mainContent").css("min-height", function(){
        return $(window).height() + 'px';
    });
});