Question

How can I use JavaScript to display one of two different layouts based on a JS conditional?

For example, I am using the uStream API to check if a particular channel is live. If it is, then I want one layout to be displayed, if it’s not live then another layout would be displayed.

Might look a little like this:

function decideLayout(responseJson){
    var response = jQuery.parseJSON(responseJson);

    if(response.results == "live")
    {
        SHOW LIVE LAYOUT
    } else {
        SHOW OTHER LAYOUT 
    }
}

EDIT: The only part of the site that needs to be dynamic is below the header. Maybe I could use php includes inside the conditional?

Answer 1

There are many different angles you could take, but you have only 2 real options.

1. Supply a different set of HTML for each layout (with things like JQuery Templates)
2. Load the appropriate CSS file after choosing which to use. (This is often helped by loading both the CSS and the HTML content after the “page” with the code has loaded and run.)