StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery plugin activation bug
text
Body
copied!<p>I'm having some trouble identifying a bug on the website I'm developing. To be more specific, I'm using <a href="http://luis-almeida.github.com/jPages/" rel="nofollow">jPages</a> twice on the same page.</p> <p>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.</p> <p>You can find the website I'm building here : <a href="http://rolandgroza.com/projects/roland/" rel="nofollow"></a> .</p> <p>I'll also paste all the JavaScript, because I have no idea for now where the bug is and why is behaving like that :</p> <pre><code>$(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(); }); </code></pre> <p>And the bug I was talking about, when you are on the <strong>Home</strong> page and navigate to the <strong>Shop</strong> 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. </p> <p>But if you are on the <strong>Shop</strong> page, hit refresh and the plugin will now activate after page load.</p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload