I'd like to implement a Facebook like control for auto loading of a paged content into a DIV with custom styled scrollbars. For custom scrollbars I use jScrollPane plugin, but can't figure out how to listen to an event when this scrollbar reaches its bottom to append additional html to this DIV. Any hint?
Listen for the jsp-scroll-y event and check the passed isAtBottom flag in your event handler. Details and demo here.
Related
I want to implement in my Listview component infinite scroll with the loading indicator.
Need code for native-script vue and I don't want to use RadListView.
Use loadMoreItems event which should be triggered when you reach end of list view, hit your API & add more items in the event.
When I am placing the jQuery selectmenu inside a div that has a CSS property overflow: scroll and is smaller then its content, then the dropdown menu is not following the scrolling inside the overflown div.
See the example here
https://codepen.io/Nighel123/pen/gZeQVd?editors=1000
I have found a way to fix it with this code:
$(".demo").scroll(function(){
$( "#salutation" ).selectmenu( "open" );
});
But I think this is not the best way to fix the problem since the dropdown does not seem to follow the select element precisely when I am trying the code on my computer. Additionally the dropdown menu opens when I am scrolling inside the overflown div, what is also not the expected behavior of a dropdown.
I also tried to trigger the scroll event of the window object, when the overflown div gets scrolled to fire the positioning methods of the jQuery dropdown menu. But this did not work at all.
I would like to follow the dropdown menu follow my select item more precisely with the scrolling of the overflown div. And maybe also get some less ugly hack compared to what I did above.
I found a solution with the appendTo method of the jQuery-UI selectmenu. Just append the dropdown menu to the div that is being scrolled and it works!
I need to implement a sought of onRendered() event that would ensure all of the grid is rendered before I do something, which is to .hide() it. My gaol is to have a .hide() and .show() button attached to the div the grid resides in, with the default status set at hidden. The problem is that at the point in which my script executes the initial .hide(), the grid is not fully created yet by the grid.js script. I would rather not do any delay loop. Much rather have a callback.
Any help would be appreciated
Thanks
Pat
This should work without a callback. I have a SlickGrid app where I show and hide the grid in response to UI events. The grid exists as soon as it is instantiated (with new Slick.Grid) and can be manipulated with the .hide()and .show() methods.
I did find one catch though...
If you create the div tag with display: none (so it is initially hidden) the grid columns do not initialise properly. To workaround this I create the div tag with visibility: hidden and remove this style before using the .hide()and .show() methods.
My code looks roughly like this:
<div id="mygrid" style="visibility: hidden"></div>
$grid = $("#mygrid")
grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions);
// Hide grid by default, remembering to remove the visibility style
$grid.hide();
$grid.css("visibility", "visible");
// You can now show and hide the grid using normal jQuery methods
$grid.show();
$grid.hide();
Hope this helps.
The slick grid has implemented an event onRendered event github source. We can subscribe to this event and make the appropriate use of it.
I have just started using AJAX and Javascript and created a web page that loads a div from a text file. Here is the page http://www.1000give100.org/landing-page.html I have a div that gets filled with a text file of names that I need to auto scroll, then stop when user cursors over div. I have tried using JScrollpane but it doesn't really do what I need and I couldn't get it to work. I also tried something called slider but couldn't get it to work either. Can somebody point me to a Jquery scrolling program or something similar.
So I have an advanced search form, and when you scroll down the results, the search results summary sticks to the top of the page as you scroll using the 'sometimes fixed' code described here - http://www.bennadel.com/blog/1810-Creating-A-Sometimes-Fixed-Position-Element-With-jQuery.htm
This all works very nicely, but when some of the form elements are changed, it reloads the whole form, results summary, and results list using AJAX.
I noticed it was using bind to check for the scroll / resize, but the element it needs to effect has obviously been replaced with AJAX, so I changed it to live. This didnt work, on further digging I found out that initially live() only supported certain events, and then was made to work on all events, including custom ones, so why does it still not seem to be working with scroll?
In jQuery 1.3.x only the following JavaScript events (in addition to
custom events) could be bound with .live(): click, dblclick, keydown,
keypress, keyup, mousedown, mousemove, mouseout, mouseover, and
mouseup. As of jQuery 1.4 the .live() method supports custom events as
well as all JavaScript events that bubble. As of jQuery 1.4.1 even
focus and blur work with live (mapping to the more appropriate,
bubbling, events focusin and focusout). As of jQuery 1.4.1 the hover
event can be specified (mapping to mouseenter and mouseleave, which,
in turn, are mapped to mouseover and mouseout).
Have tried it with jQuery 1.4.1, 1.5.1, 1.6.2 and no joy. Am I doing something stupid, or is what I am trying to do just not possible?
Wasnt looking likely I would get an easy solution...
So I rewrote the way the search script worked so that the 'sometimes fixed' div wasnt regenerated by ajax, and it loaded the form, results summary, and results directly into their divs