tag:blogger.com,1999:blog-1179473529409580853.post3372724147129080269..comments2024-02-02T10:16:36.942+01:00Comments on Erratic software development: jQuery animated "scroll into view" plugin (with additional ":scrollable" selector filter)Roberthttp://www.blogger.com/profile/16847404771942651365noreply@blogger.comBlogger75125tag:blogger.com,1999:blog-1179473529409580853.post-47202655963104048652018-04-23T22:55:13.319+02:002018-04-23T22:55:13.319+02:00Thanks for sharing this!
Unfortunately, the scroll...Thanks for sharing this!<br />Unfortunately, the scroll of a root element (html/body/document) does not work any more, once the page has been scrolled down a bit. See https://codepen.io/leanix/pen/XqXeOd. For some reason, your plugin cancels the scroll animation assuming that user has initiated a scroll himself.Renehttps://www.blogger.com/profile/06102672603141588012noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-62436571758245828632016-07-26T06:53:01.731+02:002016-07-26T06:53:01.731+02:00Works like a charm, and has saved me some precious...Works like a charm, and has saved me some precious coding time. :) Thanks for publishing and writing the blog post.Nigel Atkinsonhttps://www.blogger.com/profile/10725912020200093062noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-17069498213565161882015-09-08T14:49:54.178+02:002015-09-08T14:49:54.178+02:00Great work man (y). Great work man (y). Anonymous Bloggerhttps://www.blogger.com/profile/10663331289250353299noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-80068350097303880992015-08-20T09:17:47.128+02:002015-08-20T09:17:47.128+02:00Any chance to get this plugin posted on Bower repo...Any chance to get this plugin posted on Bower repo? Would be very nice!Unknownhttps://www.blogger.com/profile/02449591193807866850noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-71172988216474046352014-12-17T09:52:17.106+01:002014-12-17T09:52:17.106+01:00I'm sorry for seeing this so late, but your we...I'm sorry for seeing this so late, but your website isn't available any more. If you point me to a different URL I'll take a look at it and see what you're trying to do. That is if you're still having issues of course.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-32430822023905520452014-10-25T00:37:04.572+02:002014-10-25T00:37:04.572+02:00Sorry I'm very new to web dev, here is the sit...Sorry I'm very new to web dev, here is the site I'm working on: http://nwcdnetwork.businesscatalyst.com/ .I wanted to add a stop() or delay() method to scrollintoview so when the user scrolls over and out of states it doesn't cause the list to erratically move up and down till the user clicks on a state or stops moving long enough for the animation que to catch up. Some of the things I've tried are commented out in the main.js file around line 80. Any help is appreciated.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-15572006185082063722014-08-11T19:21:38.904+02:002014-08-11T19:21:38.904+02:00For the same purpose I added a direct link to it. ...For the same purpose I added a direct link to it. And as I see you've found it yourself already.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-73578700130211011682014-08-05T11:51:49.231+02:002014-08-05T11:51:49.231+02:00$("#" + rowid).scrollintoview({ duration...$("#" + rowid).scrollintoview({ duration: 10 });<br />will scroll very fast. :-)<br />I should have checked the jQuery documentation before posting. <br />Thanks again.Anonymoushttps://www.blogger.com/profile/09412603353454839765noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-26281910569813691492014-08-05T11:46:24.947+02:002014-08-05T11:46:24.947+02:00Great solution! Works like a charm. I'm using ...Great solution! Works like a charm. I'm using jQuery 1.11.1 on latest Chrome, FF and IE. I tested scrolling table row into view.<br /><br />Only issue I have right now is the speed, I would like to speed it up somehow. Right now is user holds keyup/down there is some serious lagging after scrolling a couple of rows. I tried:<br />$("#" + rowid).scrollintoview({ duration: "fast" });<br />but that seems to be default. <br />I'll take a look at you code to see if I can speed it up by adding an option or animating faster? <br />If you know how, let me know, else I'll give it a go.<br />This is very cool indeed.<br />HansAnonymoushttps://www.blogger.com/profile/09412603353454839765noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-71357841169749108262014-04-28T12:00:01.982+02:002014-04-28T12:00:01.982+02:00Can you plese create a jsfilddle (or similar) so i...Can you plese create a jsfilddle (or similar) so it will be easier to analyse?Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-59059164218278304372014-04-16T10:45:19.957+02:002014-04-16T10:45:19.957+02:00Hi Robert....
This looks exactly what I want but ...Hi Robert....<br /><br />This looks exactly what I want but I cannot get it to work... <br /><br />Simple HTML is<br /><br />DIV<br /> TABLE <br /> TR<br /> TD<br /> TD<br /> TD<br /> TD<br /> TD ID="xx"<br /><br />The "xx" TD is hidden by "overflow-x: hidden" on the DIV and want to nicely scroll in... stepping your code gets to "if (scroller.length > 0) {" but .length = 0 so not executing<br /><br />Thanks<br /><br />Anonymoushttps://www.blogger.com/profile/02195557353716392436noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-84065873259039644932014-04-04T16:57:30.392+02:002014-04-04T16:57:30.392+02:00There're problems related to that. Let me poin...There're problems related to that. Let me point out two perfectly viable extremes: elements that are rendered at the top of the page that fill up to top half of the screen and elements that are rendered at the bottom of the page that fill the bottom half of the screen when page is completely scrolled down. All of these elements would fail to scroll into the middle of the screen. This would make this plugin inconsistent and such flaw would be regarded as a bug.<br /><br />The best thing you can do is to keep elements get scrolled into view and when scrolling finishes, you visually highlight them in whatever way seems appropriate.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-7117042619597975722014-04-04T12:46:27.329+02:002014-04-04T12:46:27.329+02:00Is there an easy way to update this plugin to brin...Is there an easy way to update this plugin to bring the scrolled-to element to the center of the viewport / parent? Instead of simply bringing it "within view"? That would be great from a focusing perspective when using for both x and y.Unknownhttps://www.blogger.com/profile/00287201277635892165noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-91169382584793661812013-12-18T23:13:53.205+01:002013-12-18T23:13:53.205+01:00Easy. Don't use my plugin and just use browser...Easy. Don't use my plugin and just use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView" rel="nofollow">browser built-in functionality</a>.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-44386449771273404702013-12-18T16:15:33.554+01:002013-12-18T16:15:33.554+01:00Hi again how i can disable the animation.??Hi again how i can disable the animation.??Anonymoushttps://www.blogger.com/profile/08159461237680797406noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-56754290348803950102013-10-30T16:19:39.384+01:002013-10-30T16:19:39.384+01:00Lines 8-9 of plugin:
"Licensed under the term...Lines 8-9 of plugin:<br />"Licensed under the terms of the MIT license http://www.opensource.org/licenses/mit-license.php"Anonymoushttps://www.blogger.com/profile/17821121385231656560noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-31348291363843697152013-04-23T07:28:44.904+02:002013-04-23T07:28:44.904+02:00This is great!
Any word on incorporating easing?
...This is great!<br /><br />Any word on incorporating easing?<br /><br />CheersAnonymoushttps://www.blogger.com/profile/01800081633526270646noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-63111627701051312792013-03-23T01:46:50.495+01:002013-03-23T01:46:50.495+01:00Works great!
One problem: With no explicit DOCTY...Works great!<br /><br />One problem: With no explicit DOCTYPE it does nothing at all.<br />No error reported, but no scroll happens.<br /><br />If I add the DOCTYPE from the demo.html, it works fine.<br />If I add a DOCTYPE of simply <!DOCTYPE html>, it works fine.<br /><br />I have a large app mostly finished and had never specified a DOCTYPE,<br />so I'm leery of adding one now, unless I take the time to re-test<br />all functionality on all device/OS/browser combinations.<br /><br />Any way to get it to work w/o adding a DOCTYPE?<br /><br />Thanks!<br />--Fred<br />Unknownhttps://www.blogger.com/profile/13064059274879122023noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-71827842016168607982013-03-23T01:42:44.615+01:002013-03-23T01:42:44.615+01:00Unknownhttps://www.blogger.com/profile/13064059274879122023noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-16819609606579861172013-03-21T06:00:00.087+01:002013-03-21T06:00:00.087+01:00Hi Robert,
I have implemented this scrollintoview...Hi Robert,<br /><br />I have implemented this scrollintoview function on my application. It works in FF 13, Chrome 25, but not in IE9. In IE9, it simply wouldn't scroll into the element at all. I'm using JQuery 1.7.1. My code looks like this:<br /><br />jQuery(qaNode).scrollintoview({<br /> duration: 600,<br /> direction: "both",<br /> complete: function() {<br /> dojox.fx.highlight({<br /> color: "#E8F6FB",<br /> node: targetNode1,<br /> duration: 600<br /> }).play(250); <br /> <br /> }<br /> });<br /><br />Many thanks.Irishttps://www.blogger.com/profile/14246014272755938915noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-67467227341216018802013-03-19T23:49:32.636+01:002013-03-19T23:49:32.636+01:00Plugin is designed to find closest scrollable ance...Plugin is designed to find closest scrollable ancestor that also has excess content (so it's actually phisically scrollable). Some element may have scrollbars but not enough content to actually be scrollable. Such elements are skipped and plugin progresses further up DOM tree.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-2434686187113698262013-03-19T23:34:25.384+01:002013-03-19T23:34:25.384+01:00I modified your code to run the "complete&quo...I modified your code to run the "complete" function even if there was no scrollable element found. Thanks for this useful jQuery plugin.<br /><br />I also like only one var declaration per function, so I changed that, too. And one more tweak you may or may not like:<br /><br />dirStr = [<br /> "",<br /> "horizontal",<br /> "vertical",<br /> "both"<br />][options.direction.x * 1 + options.direction.y * 2];<br /><br />I sure wish I could style that code a bit...Erik Eckhardthttps://www.blogger.com/profile/09187680112940803740noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-56247076595638921832013-03-06T10:44:37.700+01:002013-03-06T10:44:37.700+01:00Hello Robert,
Thanks that useful plugin..
My probl...Hello Robert,<br />Thanks that useful plugin..<br />My problem: i want for object's closest first scrollable parent. but page(iframe) scrollbar move :(stemizerhttps://www.blogger.com/profile/13018627880758543607noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-3866440571324205832012-12-08T20:32:26.094+01:002012-12-08T20:32:26.094+01:00Hi.
More specifically, the problem comes from the...Hi.<br /><br />More specifically, the problem comes from the fact that your :scrollable pseudo-class filter has the signature "function (element, index, meta, stack)" and jQuery (1.8) wants a "function (element, context)" (from inside the matcherFromGroupMatchers function).<br /><br />It's easy to patch your sources for specific needs, bypassing the use of :scrollable, so many thanks anyway!<br /><br />Regards,<br /><br /> Claude<br />Claude Brissonhttps://www.blogger.com/profile/11080658301220039179noreply@blogger.comtag:blogger.com,1999:blog-1179473529409580853.post-35561943980589295852012-09-19T09:28:39.603+02:002012-09-19T09:28:39.603+02:00This has been on ma priority list now for 2 weeks....This has been on ma priority list now for 2 weeks. Code will be updated to support jQuery latest version.<br />Thank you.Roberthttps://www.blogger.com/profile/16847404771942651365noreply@blogger.com