Note that there are some explanatory texts on larger screens.

plurals
  1. POSmoothDivScroll plugin - IE locks up completely when dragging scroller to the left
    primarykey
    data
    text
    <p>I've set up the <a href="http://www.smoothdivscroll.com" rel="nofollow">SmoothDivScroll plugin 1.3</a> on a page, within a popup window.</p> <p>Simplified init function, fires plugin and sets width of scrollable area based on length of content:</p> <pre><code>$('.slider').smoothDivScroll({ hotSpotScrolling: false, touchScrolling: true, manualContinuousScrolling: true }).find('.scrollableArea').css('width', count * 140 ); </code></pre> <p>Simplified markup:</p> <pre><code>&lt;div class='slider'&gt; &lt;div class="portrait" style="background-image: url(img/bios/testing-thumb1.jpg);"&gt;&lt;/div&gt; &lt;div class="portrait" style="background-image: url(img/bios/testing-thumb2.jpg);"&gt;&lt;/div&gt; &lt;div class="portrait" style="background-image: url(img/bios/testing-thumb3.jpg);"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS, 'scrollWrapper' and 'scrollableArea' are both created by the plugin when initialized:</p> <pre><code>.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); } </code></pre> <p><a href="http://www.crackin.com/dev/matrix/support.php" rel="nofollow">Click here to see development build</a> (scroll down and click the green 'check directory' button)</p> <p>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.</p> <p>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.</p> <hr> <p>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:</p> <p>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.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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