Load different CSS files on sequential user clicks, without reloading HTML page? CSS Layout must change onclick

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.

Roy Rico · Accepted Answer · 2011-01-27 05:09:36Z

2

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.

answered Jan 27, 2011 at 5:09

Roy Rico

3,8496 gold badges38 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load different CSS files on sequential user clicks, without reloading HTML page? CSS Layout must change onclick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related