SmoothDivScroll plugin - IE locks up completely when dragging scroller to the left

Question

I've set up the SmoothDivScroll plugin 1.3 on a page, within a popup window.

Simplified init function, fires plugin and sets width of scrollable area based on length of content:

$('.slider').smoothDivScroll({
  hotSpotScrolling: false,
  touchScrolling: true,
  manualContinuousScrolling: true
}).find('.scrollableArea').css('width', count * 140 );

Simplified markup:

<div class='slider'>
  <div class="portrait" style="background-image: url(img/bios/testing-thumb1.jpg);"></div>
  <div class="portrait" style="background-image: url(img/bios/testing-thumb2.jpg);"></div>
  <div class="portrait" style="background-image: url(img/bios/testing-thumb3.jpg);"></div>
</div>

CSS, 'scrollWrapper' and 'scrollableArea' are both created by the plugin when initialized:

.slider { position: absolute; top: 0; left: 0; border-top: 2px solid #000; border-bottom: 2px solid #000; height: 168px; width: 880px; }

.slider .scrollWrapper { position: relative; overflow: hidden; width: 100%; height: 100%; }
.slider .scrollableArea { position: relative; width: auto; height: 100%; }

.slider .portrait { display: block; float: left; padding: 0 5px; width: 130px; height: 168px; position: relative; margin-bottom: 4px; background-position: center top; background-repeat: no-repeat; }
.slider .portrait:hover, .slider .portrait.active { background-position: center bottom; }
.slider .portrait:after { display: none; content: ""; position: absolute; top: 0; left: 5px; height: inherit; width: inherit; pointer-events: none; }
.slider .portrait:hover:after { display: block; background-image: url(../img/popup-about-team-hover.png); }

Click here to see development build (scroll down and click the green 'check directory' button)

Works fine in Chrome and Firefox... however in IE (of course) you are able to scroll to the right (click and drag to the left) fine, but if you try and scroll to the left (click and drag right) then the browser quickly locks up, is totally frozen and must be killed via taskmanager.

I don't understand exactly what the plugin is doing to the DOM well enough to know where to look for problems at this point.

---

I did have one other questions about the plugin, not related to this IE issue. I can remove this and post as a separate question if needed though:

Q) How could I go about implementing a left/right slide for this slider, using the arrow keys on the keyboard? I know how to bind something to the keys, but I can't seem to figure out how to translate the handler into an action for the plugin.

Answer 1

I looked at this issue and found that your version of jquery.kinetic present within plugin.js is causing the problem. I am not sure why this is happening as I haven't compared the version of kinetic.js of yours with the version used on smoothdivscroll.com. But if you simply update your plugin.js to replace the code for jquery.kinetic with the compressed/minified version of http://www.smoothdivscroll.com/js/jquery.kinetic.js then I believe everything will work without an issue.

Please follow below steps:

1) open URL http://www.smoothdivscroll.com/js/jquery.kinetic.js and copy JS code from there.

2) with the help of online JS compressor like http://javascriptcompressor.com/; minify the above copied code and save it in temporary file.

3) open your /js/plugin.js and comment out the existing code for jquery.kinetic and add above compressed code there.

4) run the demo page and it will work on IE too.

Thanks!