Hot spot scrolling speed incorrect after the window has been resized

[tkahn]

Hot spot scrolling speed incorrect after the window has been resized

[ptitgraig]

Same issue when the width of the scroll wrapper changes without page reload.

[ptitgraig]

Hi.
I fixed the issue with a new function called on resize event. It's basically a lighter version of recalculateScrollableArea().

recalculateHotSpotsPos: function() {
    var el = this.element;
    el.data("scrollerOffset", el.offset());
    var tempScrollableAreaWidth = 0, foundStartAtElement = false, o = this.options, el = this.element, self = this;
    // Add up the total width of all the items inside the scrollable area
    el.data("scrollableArea").children(o.countOnlyClass).each(function () {
        // Check to see if the current element in the loop is the one where the scrolling should start
        if ((o.startAtElementId.length > 0) && (($(this).attr("id")) === o.startAtElementId)) {
            el.data("startingPosition", tempScrollableAreaWidth);
            foundStartAtElement = true;
        }
        // PATCH : outerWidth(true) makes a bad calculation with margin:0 auto (IE only)
        var this_width = ($.browser.msie) ? $(this).outerWidth() : $(this).outerWidth(true);        
        tempScrollableAreaWidth = tempScrollableAreaWidth + this_width;
    });
    // Set the width of the scrollable area
    el.data("scrollableAreaWidth", tempScrollableAreaWidth);
    el.data("scrollableArea").width(el.data("scrollableAreaWidth"));
},

This function needs to be called on resize :

/*****************************************
SET UP EVENT FOR RESIZING THE BROWSER WINDOW
*****************************************/
$(window).bind("resize", function () {
    self._showHideHotSpots();
    self.recalculateHotSpotsPos();
    self._trigger("windowResized");
});

[ptitgraig]

There might be a more elegant way to do it but this does the job.

[dariohead]

Hi! I have one question.

When having multiple scrollers (using version 1.3) on a single page hotspot scrolling behaves oddly: it scrolls slowly to the right and when you want to scroll to the left it always jumps at the first picture.

I noticed that this patch here remedies that behaviour, i.e. when I resize the window, suddenly hotspots work perfectly.

How could I call this new "recalculateHotSpotsPos" function onclick when loading a particular part of the page/slider?

[dariohead]

Hi.

I found the cause of my specific problem. I am using plugin "Full window width content slider by Karl Oskar Engdahl" which uses Jquery Tools for scrolling content. It somehow messes with the hotspot scrolling.

Since your Resize Window Patch helps my issue, I did a workaround for this conflict issue by firing your patch function not only on window resize but also when hovering the "makeMeScrollable" divs.

I don't know if this is "ok to do" since I am a JS beginner, but it does the job and I need it only for this 1 scrolling minisite...?

Thanks for the patch function!

[tkahn]

A plugin developers nightmare is when you start mixing different jQuery plugins, but I know how easy it is to end up there: "If I could just combine the functionality with plugin A with the functionality of function B I'm done!" :-)

I have added one example where I combine Smooth Div Scroll with Colorbox since I think it's a very common user case. But I would of course be impossible to cover all possible combinations. But if you have have a combination of one plugin that would be a great mix together with Smooth Div Scroll let me know and perhaps I can provide an example.