jQuery addClass example

Change class name on click in jQuery

by samonela

HTML

<div class="js-full-page-view" data-ca-single="true" data-ca-responsive-max="667" data-ca-full-page-title="{sl 'filter'}" id="full_page_product_filter">
    <div class="full-page-view--content-placeholder"> 
        Any HTML content
    <div>
</div>

JavaScript

(function ($) {
    var methods = {
        rm: function () {
            $('body').removeClass('is-non-scrollable-fixed');
        },
        add: function() {
            $('body').addClass('is-non-scrollable-fixed');
        }
    };

    $.fn.ceScrollLock = function (selector, method) {
        return methods[method].apply(this, arguments);
    };

    $.fn.ceIsIE = function (userAgent) {
        userAgent = userAgent || navigator.userAgent;
        return userAgent.indexOf("MSIE ") > -1 || userAgent.indexOf("Trident/") > -1 || userAgent.indexOf("Edge/") > -1;
    };

    $.fn.getRealWidth = function () {
        var outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
            widthWithScroll = $('<div>').css({width: '100%'}).appendTo(outer).outerWidth();
        outer.remove();
        var scrollBarWidth = 100 - widthWithScroll;

        if ($.fn.ceIsIE) {
            return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        }

        if ($('.is-non-scrollable-fixed').length) {
            return $('body').width();
        } else {
            return $('body').width() + scrollBarWidth;
        }
    };
})(jQuery);
(function ($) {
    var jelm = $('.js-full-page-view');

    var methods = {
        init: function () {
            jelm.each(function () {
                var id = $(this).attr('id'),
                    title = ($(this).data('caFullPageTitle')) ? $(this).data('caFullPageTitle') : '',
                    content = (!$(this).data('caSingle')) ? $(this).html() : '',
                    action_container = ($(this).data('caActionContainer')) ? $(this).data('caActionContainer') : '',
                    indented_content = ($(this).data('caNoIndentedContent')) ? '' : 'full-page-view--indented-content',
                    bottom_action_container = '';

                if ($(this).data('caBottomActionContainer')) {
                    bottom_action_container =...