Question

I am giving the if else statements a stab, not sure if I am writing this correctly… Trying to get it so that if the popupHeight dimension is bigger than the windowHeight dimension, then it would position it to the top of the viewport + 10px…

$("#data").load("/content/" + htmlName + ".html", null, function(){
    //Set Variables
    var container = $(".container");
    var project = $(".project");
    var popupWidth = container.find(".project img:first").width();
    var popupHeight = container.find(".project img:first").height()+35;
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var x = ($(window).width() / 2 - popupWidth / 2) + $(window).scrollLeft();
    var y = ($(window).height() / 2 - popupHeight / 2) + $(window).scrollTop();

    //Set popup dimensions
    container.css("width" , popupWidth);
    container.css("height" , popupHeight);

    //Set popup CSS
    container.css({"position": "absolute", "left": x + "px", "z-index": "2" });
    project.css({"width": (popupWidth), "height": (popupHeight) });

    //Determine Position
    if(popupHeight>windowHeight) {
        container.css{("top": $(window).scrollTop(); + 10 + "px") 
        }else{
        container.css({"top": y + "px"});
        return;
        }
});

Answer 1

Get rid of the semi-colon after scrollTop() and put it at the end of the line-

container.css{("top": $(window).scrollTop(); + 10 + "px")

Should look like-

container.css({"top": $(window).scrollTop() + 10 + "px"});

Your css function needs to be reformatted too, It should like the above.