Question

I’m building a small website, where.. when a user clicks on one of the menus, the current css layout must change and new css layout must be formed without page reload. what i meant to say was, the banner remains the same but the complete css layout below it is re-deployed[the CSS file containing the layout below the banner reloads]. This must happen without a HTML page reload. How can i achieve this? I’m currently thinking of having 2 different CSS files. But how to apply CSS without reloading a page?

Thanks in advance.

Answer 1

You can use 1 css file, such as below

BODY.Template1  H1 {
}
BODY.Template1  P {
}
BODY.Template1  A {
}

BODY.Template2  H1 {
}
BODY.Template2  P {
}
BODY.Template2  A {
}

In your jquery, onload, u pick a template

$(document).ready(function() {
    $('BODY').addClass('Template1');
});
$(element).click(function() {
    $('BODY').removeClass('Template1').addClass('Template2');
});

Depending on size, number of templates you’re going to have, you may want to put them into separate files. Then you’ll have to dynamically download each file as the user clicks it, which may lead to a delay for the user when they click the button.