smoothState.js: Add class to #main wrapper

Question

I am using smoothStates default settings and I wanted to know if I can add a class to the main wrapper so I can change the background color of the site? I don't want to add another div under main as its just extra markup.

At the moment I can only add page-index and then the rest of the pages don´t change as smoothState doesn't load the page again.

EDIT: So I want to add a class for each page, like: page-index, page-about and so on.

I have a div like so:

<div id="main">
 // stuff here
</div>

When you click on /news:

<div id="main" class="page-news">
 // stuff here
</div>

My functions:

$(function(){
'use strict';
var options = {
  prefetch: true,
  cacheLength: 2,
  onStart: {
    duration: 250, // Duration of our animation
    render: function ($container) {
      // Add your CSS animation reversing class
      $container.addClass('is-exiting');

      // Restart your animation
      smoothState.restartCSSAnimations();
    }
  },
  onReady: {
    duration: 0,
    render: function ($container, $newContent) {
      // Remove your CSS animation reversing class
      $container.removeClass('is-exiting');

      // Inject the new content
      $container.html($newContent);

    }
  }
},
smoothState = $('#main').smoothState(options).data('smoothState');
});

When do you want to add the class? After, before, in the middle of the animation? — heroxav, Mar 20 '17 at 18:54
What do you mean by that? After all animations are complete? — heroxav, Mar 20 '17 at 18:57
If you want to add the class when the visitor loads your site, then do not do that via smoothState. Then use `window.onload` — heroxav, Mar 20 '17 at 18:58
The thing is smoothState does not reload the page again, I can get the class names to change if I do a F5 then sure I see the changes, its just when you click from page to page it only shows me the page-index class. — Emma Stone, Mar 20 '17 at 18:59

heroxav · Answer 1 · 2017-03-21T19:17:04.047

1

To achieve what you want, you can use onAfter.

The function to run when the new content has been injected into the page and all animations are complete. This is when to re-initialize any plugins needed by the page.

Create a function:

function addClass() {
    $('#main').addClass('your_class second_class');
};

Then inject this into your smoothState initialization:

$(function(){
'use strict';
var options = {
  prefetch: true,
  cacheLength: 2,
  onStart: {
    duration: 250, // Duration of our animation
    render: function ($container) {
      // Add your CSS animation reversing class
      $container.addClass('is-exiting');

      // Restart your animation
      smoothState.restartCSSAnimations();
    }
  },
  onReady: {
    duration: 0,
    render: function ($container, $newContent) {
      // Remove your CSS animation reversing class
      $container.removeClass('is-exiting');

      // Inject the new content
      $container.html($newContent);

    }
  },
  onAfter: function($container, $newContent) {
    addClass();
  }
},
smoothState = $('#main').smoothState(options).data('smoothState');
});

Update: How to dynamically set classes:

<!-- HTML -->
<div id="cms-classes" class="Put your classes in here">
</p>

/* CSS */
#cms-classes { display: none }

// JavaScript
function addClass() {
    cmsClasses = $('#cms-classes').attr('class');
    $('#main').addClass(cmsClasses);
};

Hope this helps!

Reference

edited Mar 21 '17 at 19:17

answered Mar 20 '17 at 19:00

heroxav

1,387
1
22
65

@EmmaStone Sorry, I have no idea why I changed my answer from `onAfter` to `onReady` :) – heroxav Mar 20 '17 at 19:56
No worries @jonhue :) I will try the code sample out tomorrow, just one quick question again, when you say: ".addClass('your_class second_class');" I don´t know all of the classes as the class names come from the CMS I am working from... Can it not see if there is a class change and then add that change to the new page load? I am new to all of this for please forgive the silly questions :) – Emma Stone Mar 20 '17 at 20:52
Well "CMS" I will use WordPress but also tried Jekyll but also no lucky ( – Emma Stone Mar 21 '17 at 18:53
I appended a way to 'dynamically' add classes to the answer. – heroxav Mar 21 '17 at 19:17
Oh I see that's one way of doing it as well. I was playing around with jquery to change the page class and append it to the body but it didn't work for all pages ( – Emma Stone Mar 21 '17 at 19:22
Hi I tried it again today and still no luck, I need to see what is wrong with my code and to see if I have missed something, I appreciate your help! – Emma Stone Mar 22 '17 at 20:28
The above snippet is working for me in my application – heroxav Mar 23 '17 at 06:17

smoothState.js: Add class to #main wrapper

1 Answers1