Hi all:

Please go here and use username "admin" and password "endlesscomic" (without wrapper quotes) to see the web app demo.

Basically what I am trying to do is to incrementally integrate my work to this web app, say, every nightly, for the client to check the progress. Also, he would like to see, at the very beginning, a mockup about the page layout.

I am trying to use the 960 grid system to achieve this. So far, so good.

Except one issue that when the "mockup.css" is loaded dynamically by jQuery, it "extends" the window to the bottom, something I do not wanna have...

As an inexperienced web developer, I don't know which part is wrong. Below is my js:

/* master.js */
$(document).ready(function()
{
    $('#addDebugCss').click(function()
    {
    alertMessage('adding debug css...');
    addCssToHead('./css/debug.css');
    $('.grid-insider').css('opacity','0.5');//reset mockup background transparcy
    });

    $('#addMockupCss').click(function()
    {
    alertMessage('adding mockup css...');
    addCssToHead('./css/mockup.css');
    $('.grid-insider').css('opacity','1');//set semi-background transparcy for mockup
    });

    $('#resetCss').click(function()
    {
    alertMessage('rolling back to normal');
    rollbackCss(new Array("./css/mockup.css", "./css/debug.css"));
    });
});

function alertMessage(msg)  //TODO find a better modal prompt
{
    alert(msg);
}

    function addCssToHead(path_to_css)
{
    $('<link rel="stylesheet" type="text/css" href="' + path_to_css + '" />').appendTo("head");
}

    function rollbackCss(set)
{
    for(var i in set)
    {
    $('link[href="'+ set[i]+ '"]').remove();
    }
}

Something should be added to the exteral mockup.css? Or something to change in my master.js?

Thanks for any hints/suggestions in advance.