Woocommerce compatibility

[matt-edgedesign]

Hey dude,

Thanks for this amazing plugin, I have used it within a few sites and has been a great bit of functionality to add in. I have added Gridder to a Woocommerce site but when I switch products, the page jumps up. After hours of trying, I can not seem to break it down and resolve the issue. Would you have any idea?

http://www.steve-edgeshop.com/shop/

Thanks, Matt

[orion3dgames]

Hello Matt,

Thanks for your kind words,

Yes, this is due to issue #14. When the space below the gridder is smaller tham the height of the expanded gridder, it has this jumpy effect... I'm not quite sure how to fix it.

You can hack/fix it by adding space under the gridder for the moment until I find a way to fix it... Do I make sense?

Regards, Orion

[nouman-waheed]

Here is working jquery.gridder.js file with this issue resolved and also couple of other nice tweaks.

The jumping issue is casued by scroll section of gridder. The existing logic is first you scroll to the selected part either listitem or panel and then you open the clicked item. It should be other way around, expand the item first then scroll. Here is why.When there is not enough space on the page you open any item, it first scrolls and then expands the item. As we are removing the previously expanded item and appending the new selected item,it changes the height of the DOM. When we change the height of DOM and scroll it results in jumping effect.

I also changed the code for opening of the item, currently it just appearing. I added the jquery animation to open it similar to google images open effect.

Change the click event part of the jquery.gridder.js file /* CLICK EVENT */ _this.find(".gridder-list").on("click", function(e) {

            e.stopPropagation(); 

            var myself = $(this);

            /* ENSURES THE CORRECT BLOC IS ACTIVE */
            if (!myself.hasClass("selectedItem")) {
                _this.find(".selectedItem").removeClass("selectedItem");
                myself.addClass("selectedItem");
            }else{
                // THE SAME IS ALREADY OPEN, LET"S CLOSE IT
                closeExpander(_this, settings);
                return;
            }

            /* REMOVES PREVIOUS BLOC */
            _this.find(".gridder-show").remove(); 

            /* ADD CLASS TO THE GRIDDER CONTAINER
             * So you can apply global style when item selected. 
             */
            if (!_this.hasClass("hasSelectedItem")) {
                _this.addClass("hasSelectedItem");
            }

            /* ADD LOADING BLOC */
            var $htmlcontent = $("<div class=\"gridder-show loading\"></div>");
            mybloc = $htmlcontent.insertAfter(myself);

            /* EXPANDED OUTPUT */
            var currentcontent = $(myself.data("griddercontent")).html();
            var htmlcontent = "<div class=\"gridder-padding\">";
                     htmlcontent += "<div class=\"gridder-navigation\">";
                            htmlcontent += "<a href=\"#\" class=\"gridder-close\"><i class=\"fa fa-angle-right\" style=\"position: relative; left: 3px\"></i><i class=\"fa fa-angle-left\"></i></a>";
                            htmlcontent += "<a href=\"#\" class=\"gridder-nav prev\"><i class=\"fa fa-angle-left\"></i></a>";
                            htmlcontent += "<a href=\"#\" class=\"gridder-nav next\"><i class=\"fa fa-angle-right\"></i></a>";
                    htmlcontent += "</div>";
                    htmlcontent += "<div class=\"gridder-expanded-content\">";
                        htmlcontent += currentcontent;
                    htmlcontent += "</div>";
            htmlcontent += "</div>";
            //mybloc.html(htmlcontent);

            // IF EXPANDER IS ALREADY EXPANDED 
            if (!visible) {
                mybloc.hide().append(htmlcontent).slideDown(settings.animationSpeed, settings.animationEasing, function() {
                    visible = true;
                    /* AFTER EXPAND CALLBACK */
                    if ( $.isFunction( settings.onContent ) ) {
                        settings.onContent( mybloc );
                    }
                });
            } else {
                mybloc.html(htmlcontent);
                mybloc.find(".gridder-padding").fadeIn(settings.animationSpeed, settings.animationEasing, function() {
                    visible = true;
                    /* CHANGED CALLBACK */
                    if ( $.isFunction( settings.onContent ) ) {
                        settings.onContent( mybloc );
                    }
                });
            }

              /* SCROLL TO CORRECT POSITION FIRST */
            if(settings.scroll){
                var offset = (settings.scrollTo === "panel" ? myself.offset().top + myself.height() - settings.scrollOffset : myself.offset().top - settings.scrollOffset );               
                $("html, body").animate({
                    scrollTop: offset
                }, {
                    duration: settings.animationSpeed,
                    easing: settings.animationEasing
                });
            }            
        });

[matt-edgedesign]

@nouman-waheed fixed it no problem. Great stuff mate, thanks!

[orion3dgames]

Thanks @nouman-waheed. You're a chief :)

[nouman-waheed]

@oriongunning my pleasure mate :) and thanks for amazing plugin. It really did helped me a lot.