Question

I’m having some trouble identifying a bug on the website I’m developing. To be more specific, I’m using jPages twice on the same page.

The first instance of the plugin is used as a navigation through the website as it is a one page website. A
nd the second instance is used to browse through a bunch of products rather than scrolling.

You can find the website I’m building here : .

I’ll also paste all the JavaScript, because I have no idea for now where the bug is and why is behaving like that :

$(document).ready(function() {

var default_cluster_options = {
    environment             : "Development",
    local_storage_key       : "Cluster",
    plugin_navigation_class : ".navigation",
    plugin_wrapper_id       : "content-wrapper",
    headings                : ['.heading-first h1', '.heading-second h1'],
    input_types             : ['input', 'textarea'],
    info_iqns_class         : ".iqn",
    preview_iqn_class       : ".preview",
    limits                  : [ { min: 1224, items: 8 }, { min: 954, items: 6 }, { min: 624, items: 4 }, { min: 0, items: 2 } ],
    shop_local_storage_key  : "Shop",
};

var default_plugin_options = {
    containerID : "",
    first       : false,
    previous    : false,
    next        : false,
    last        : false,
    startPage   : 1,
    perPage     : 1,
    midRange    : 6,
    startRange  : 1,
    endRange    : 1,
    keyBrowse   : false,
    scrollBrowse: false,
    pause       : 0,
    clickStop   : true,
    delay       : 50,
    direction   : "auto",
    animation   : "fadeIn",
    links       : "title",
    fallback    : 1000,
    minHeight   : true,
    callback    : function(pages, items) {}
};

var Cluster = function(cluster_options, plugin_options) {

    var self = this;

    this.options = $.extend({}, default_cluster_options, cluster_options);

    this.plugin_options = $.extend({}, default_plugin_options, plugin_options);

    this.environment = this.options.environment;

    this.data_key = this.options.local_storage_key;

    this.shop_data_key = this.options.shop_local_storage_key;

    this.plugin_navigation_class = this.options.plugin_navigation_class;

    this.plugin_wrapper_id = this.options.plugin_wrapper_id;

    this.headings = this.options.headings;

    this.input_types = this.options.input_types;

    this.viewport = $(window);

    this.body = $('body');

    this.viewport_width = this.viewport.width();

    this.viewport_height = this.viewport.height();

    this.info_iqns_class = this.body.find(this.options.info_iqns_class);

    this.preview_iqn_class = this.body.find(this.options.preview_iqn_class);

    this.limits = this.options.limits;

    this.current_shop_page = this.options.current_shop_page;

    this.total_shop_pages = this.options.total_shop_pages;

    this.initiate_cluster(self.plugin_navigation_class, {
        containerID : self.plugin_wrapper_id,
        startPage : +(self.get_local_storage_data(self.data_key) || 1),
        callback : function(pages){
            self.set_local_storage_data(self.data_key, pages.current);
        }
    });

    this.inititate_shop();

    this.initiate_shop_touch_events();

};

Cluster.prototype.set_environment = function() {
    if(this.environment == "Development") {
        less.env = "development";
        less.watch();
    }
};

Cluster.prototype.set_local_storage_data = function(data_key, data_val) {
    return localStorage.setItem(data_key, data_val);
};

Cluster.prototype.get_local_storage_data = function(data_key) {
    return localStorage.getItem(data_key);
};

Cluster.prototype.initiate_scalable_text = function() {
    for(var i in this.headings) {
        $(this.headings[i]).fitText(1.6);
    }
};

Cluster.prototype.initiate_placeholder_support = function() {
    for(var i in this.input_types) {
        $(this.input_types[i]).placeholder();
    }
};

Cluster.prototype.initiate_iqn_selected_class = function() {
    if(this.viewport_width < 980) {
        $(this.info_iqns_class).each(function(index, element) {
            var iqn = $(element).parent();
            $(iqn).on('click', function() {
                if($(iqn).hasClass('selected')) {
                    $(iqn).removeClass('selected');
                } else {
                    $(iqn).addClass('selected');
                }
            });
        });
    }
};

Cluster.prototype.initiate_preview_action = function() {
    $(this.preview_iqn_class).each(function(index, element) {
        var data = $(element).attr('data-image-link');
        $(element).on('click', function(ev) {
            $.lightbox(data, {
                'modal'         : true,
                'autoresize'    : true
            });
            ev.preventDefault();
        });
    });
};

Cluster.prototype.initiate_plugin = function(plugin_navigation, plugin_options) {
    var options = $.extend({}, this.plugin_options, plugin_options);
    return $(plugin_navigation).jPages(options);
};

Cluster.prototype.initiate_shop_touch_events = function() {
    var self = this;
    return $("#shop-items-wrapper").hammer({prevent_default: true, drag_min_distance: Math.round(this.viewport_width * 0.1)}).bind("drag", function(ev) {
        var data = JSON.parse(self.get_local_storage_data(self.shop_data_key));
        if (ev.direction == "left") {
            var next_page = parseInt(data.current_page + 1);
            if(next_page > 0 && next_page <= data.total_pages) {
                $(".shop-items-navigation").jPages(next_page);
            }
        }
        if(ev.direction == "right") {
            var prev_page = parseInt(data.current_page - 1);
            if(prev_page > 0 && prev_page <= data.total_pages) {
                $(".shop-items-navigation").jPages(prev_page);
            }
        }
    });
}

Cluster.prototype.inititate_shop = function() {
    var self = this;
    for(var i = 0; i < this.limits.length; i++) {
        if(this.viewport_width >= this.limits[i].min) {
            this.initiate_plugin('.shop-items-navigation', {
                containerID : "shop-items-wrapper",
                perPage     : self.limits[i].items,
                midRange    : 8,
                animation   : "fadeIn",
                links       : "blank",
                keyBrowse   : true,
                callback    : function(pages) {
                    var data = {
                        current_page : pages.current,
                        total_pages  : pages.count
                    }
                    self.set_local_storage_data(self.shop_data_key, JSON.stringify(data));
                }
            });
            return false;
        }
    }
};

Cluster.prototype.initiate_cluster = function(plugin_navigation, plugin_options) {
    this.set_environment();
    this.initiate_scalable_text();
    this.initiate_placeholder_support();
    this.initiate_iqn_selected_class();
    this.initiate_preview_action();
    this.initiate_plugin(plugin_navigation, plugin_options);
};

var cluster = new Cluster();

});

And the bug I was talking about, when you are on the Home page and navigate to the Shop page you will notice the the second instance of the plugin doesn’t activate as the items should only be 8 ( if the width of the screen is more than 1224px ) and you should be able to browse through with the keyboard left and right arrows, but you cannot.

But if you are on the Shop page, hit refresh and the plugin will now activate after page load.

So, I would like some help with that, tracking the bug, because I’m still learning JavaScript and I’m not very experienced with it.

Answer 1

According to jPages source file this happens because at second plugin initialization plugin can’t find :visible elements as they are hidden by first plugin initialization ^{(line 60)}:

this._items = this._container.children(":visible"); 

To load your shop module with jPages plugin you need to initialize that plugin after shop items are shown. To do this you need to modify callback value in initiate_cluster function:

Lets say that Shop page index is 4:

Cluster.prototype.initiate_cluster = function(plugin_navigation, plugin_options) {
    // ... your code
    plugin_options.callback = function( pages ) {
        if( pages.current == 4 ) {
            this.inititate_shop();
        }
    };
    this.initiate_plugin(plugin_navigation, plugin_options);
};

And remove this.inititate_shop(); function call from Cluster class constructor.

This should work.

Or you can try to swap plugin calls, but I’m not sure:

// first we initiate shop
this.inititate_shop();

// then main site navigation
this.initiate_cluster(self.plugin_navigation_class, {
    containerID : self.plugin_wrapper_id,
    startPage : +(self.get_local_storage_data(self.data_key) || 1),
    callback : function(pages){
        self.set_local_storage_data(self.data_key, pages.current);
    }
});