Using ajax with .load() to load page contents.
The formatting of my HTML pages is as follows:
For the home page:
<html>
<head></head>
<body class="HOME">
<header></header>
<div id="content">
//CONTENT
</div>
</body>
</html>
For article pages:
<html>
<head></head>
<body class="ARTICLE">
<header></header>
<div id="content">
//CONTENT
</div>
</body>
</html>
Loading only the content inside the div element with id #content. When transitioning from an article page to the home page, I need the body element to update the class from #HOME to #ARTICLE.
After loading the content, manually setting the new body class like this:
jQuery('body').attr('class', 'HOME');
Desiring a method to automatically retrieve and set the class of the new body when loading content. Something along the lines of:
var newBodyClass = jQuery('body').load('/ body').attr('class');
jQuery('body').attr('class', newBodyClass);