Error on change style of page with jquery

Question

I use jquery-style-switcher.js for changing style of some elements. When I click on the colors style of page doesn't change and in source of this page added this classjssError error level0 to ul tag that contain colors. This codes worked in HTML page but in CMS no! I debug this js file by chrome and understand that When this js file on the general html file runed : an event call it addClickEvents executed but in my website that used this template for skin of website : addClickEvents function don't executed. Function that call addClickEvents is init function

    init: function ($root, config) {
        this.$root = $root;
        this.config = config ? config : {};
        this.setDefaultTheme();
        if(this.defaultTheme) {
            // try cookies
            if (this.config.cookie) {
                this.checkCookie();
            }
            // try hover
            if (this.config.hasPreview) {
                this.addHoverEvents();
            }
            // finally, add click events
            this.addClickEvents();
        } else {
            this.$root.addClass('jssError error level0');
        }
    }

In this function(init) : defaultTheme value is undefined !!!!

Why defaultTheme is undefined ? if you can answer this question , The problem will be solved.

Github link

jquery-style-switcher.js :

(function ($) {
    var jStyleSwitcher,
        _defaultOptions = {
            hasPreview: true,
            defaultThemeId: 'jssDefault',
            fullPath: 'css/',
            cookie: {
                expires: 30,
                isManagingLoad: true
            }
        },
        // private
        _cookieKey = 'jss_selected',
        _docCookies = {};

    /*\
    |*|
    |*|  :: cookies.js ::
    |*|
    |*|  A complete cookies reader/writer framework with full unicode support.
    |*|
    |*|  revision #1
    |*|
    |*|  https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
    |*|
    |*|  This framework is released under the GNU Public License, version 3 or later.
    |*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
    |*|
    |*|  Syntaxes:
    |*|
    |*|  * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
    |*|  * docCookies.getItem(name)
    |*|  * docCookies.removeItem(name[, path[, domain]])
    |*|  * docCookies.hasItem(name)
    |*|  * docCookies.keys()
    |*|
    \*/
    _docCookies = {
        getItem: function (sKey) {
            if (!sKey) {
                return null;
            }
            return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
        },
        setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
            if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) {
                return false;
            }
            var sExpires = "";
            if (vEnd) {
                switch (vEnd.constructor) {
                    case Number:
                        sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
                        break;
                    case String:
                        sExpires = "; expires=" + vEnd;
                        break;
                    case Date:
                        sExpires = "; expires=" + vEnd.toUTCString();
                        break;
                }
            }
            document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
            return true;
        },
        removeItem: function (sKey, sPath, sDomain) {
            if (!this.hasItem(sKey)) {
                return false;
            }
            document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
            return true;
        },
        hasItem: function (sKey) {
            if (!sKey) {
                return false;
            }
            return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
        },
        keys: function () {
            var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
            for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) {
                aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]);
            }
            return aKeys;
        }
    };

    jStyleSwitcher = function ($root, config) {
        return this.init($root, config);
    };

    jStyleSwitcher.prototype = {

        /**
         * {Object} DOM reference to style option list
         */
        $root: null,

        /**
         * {Object} configs for the style switcher
         */
        config: {},

        /**
         * {Object} jQuery reference to <link> tag for swapping CSS
         */
        $themeCss: null,

        /**
         * {String} default theme page was loaded with
         */
        defaultTheme: null,

        init: function ($root, config) {
            this.$root = $root;
            this.config = config ? config : {};
            this.setDefaultTheme();
            if(this.defaultTheme) {
                // try cookies
                if (this.config.cookie) {
                    this.checkCookie();
                }
                // try hover
                if (this.config.hasPreview) {
                    this.addHoverEvents();
                }
                // finally, add click events
                this.addClickEvents();
            } else {
                this.$root.addClass('jssError error level0');
            }
        },

        setDefaultTheme: function () {
            this.$themeCss = $('link[id=' + this.config.defaultThemeId + ']');
            if(this.$themeCss.length) {
                this.defaultTheme = this.$themeCss.attr('href');
            }
        },

        resetStyle: function() {
            this.updateStyle(this.defaultTheme);
        },

        updateStyle: function(newStyle) {
            this.$themeCss.attr('href', newStyle);
        },

        getFullAssetPath: function(asset) {
            return this.config.fullPath + asset + '.css';
        },

        checkCookie: function () {
            var styleCookie;
            // if using cookies and using JavaScript to load css
            if (this.config.cookie && this.config.cookie.isManagingLoad) {
                // check if css is set in cookie
                styleCookie = _docCookies.getItem(_cookieKey);
                if (styleCookie) {
                    newStyle = this.getFullAssetPath(styleCookie);
                    // update link tag
                    this.updateStyle(newStyle);
                    // update default ref
                    this.defaultTheme = newStyle;
                }
            }
        },

        addHoverEvents: function () {
            var self = this;
            this.$root.find('a').hover(
                function () {
                    var asset = $(this).data('theme'),
                        newStyle = self.getFullAssetPath(asset);
                    // update link tag
                    self.updateStyle(newStyle);
                },
                function () {
                    // reset link tag
                    self.resetStyle();
                }
            );
        },

        addClickEvents: function () {
            var self = this;
            this.$root.find('a').click(
                function () {
                    var asset = $(this).data('theme'),
                        newStyle = self.getFullAssetPath(asset);
                    // update link tag
                    self.updateStyle(newStyle);
                    // update default ref
                    self.defaultTheme = newStyle;
                    // try to store cookie
                    if (self.config.cookie) {
                        _docCookies.setItem(_cookieKey, asset, self.config.cookie.expires, '/');
                    }
                }
            );
        }
    };

    $.fn.styleSwitcher = function (options) {
        return new jStyleSwitcher(this, $.extend(true, _defaultOptions, options));
    };
})(jQuery);

HTML of this section in my page :

<div id="colour-variations">
        <a class="option-toggle"><i class="icon-gear"></i></a>
        <h3>Preset Colors</h3>
        <ul class="jssError error level0">
            <li><a href="javascript: void(0);" data-theme="style"></a></li>
            <li><a href="javascript: void(0);" data-theme="pink"></a></li>
            <li><a href="javascript: void(0);" data-theme="blue"></a></li>
            <li><a href="javascript: void(0);" data-theme="turquoise"></a></li>
            <li><a href="javascript: void(0);" data-theme="orange"></a></li>
            <li><a href="javascript: void(0);" data-theme="lightblue"></a></li>
            <li><a href="javascript: void(0);" data-theme="brown"></a></li>
            <li><a href="javascript: void(0);" data-theme="green"></a></li>
        </ul>
    </div>

You can see template that is general website. I use this template in skin for dotnetnuke7 and this problem appeared.

Download My codes

Answer 1

You've almost made it work, just a few things to fix here.

These steps apply to the files from your "Download My codes" archive.

---

First, while handling click on color theme square icons, your code throws this JS error:

Uncaught TypeError: Cannot read property 'top' of undefined

In your main.js, change clickMenu function. Wrap a call to $('html, body').animate in a condition that section must be defined.

var clickMenu = function() {

    $('a:not([class="external"])').click(function(event){
        var section = $(this).data('nav-section'),
            navbar = $('#navbar');

        if(section){ // <- this wrap condition 
            $('html, body').animate({
                scrollTop: $('[data-section="' + section + '"]').offset().top
            }, 2000);
        }

        if ( navbar.is(':visible')) {
            navbar.removeClass('in');
            navbar.attr('aria-expanded', 'false');
            $('.js-fh5co-nav-toggle').removeClass('active');
        }

        event.preventDefault();
        return false;
    });

};

---

Second, in your switcher.html, on line 799, you've left (probably intentionally) "jssError error level0" classes on ul inside #colour-variations element:

<ul class="jssError error level0">
...
</ul>

So remove these classes:

<ul>
...
</ul>

---

And a final little thing: add that <link> somewhere in the <head>:

<link type="text/css" rel="stylesheet" id="theme-switch" href="style.css">

It is required for plugin to initialize correctly. Absence of this line was the reason you got "jssError error level0" error.

---

I've also made a .zip with working code. Hope it helps!