I'm trying to link two scripts: Onepage scroll
and jQuery Waypoints. The problem is that Onepage scroll uses translate3d to scroll the page, and because of this jQuery Waypoints fail. How do get it to work?
You can make use of fullPage.js and the event afterLoad or even onLeave, which will do exactly the same as jQuery Waypoints.
Related
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.
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
I've been trying to figure this out over several questions here on SO, finding out the different parts and then assembling them, but now I'm giving up.
What I'm trying do do:
The user is on a page, clicks a button and a list of content loads into a div using jQuerys .ajax. When he or she scrolls to the bottom of the div, load more content. As seen on Twitter, but this is inside a div.
I've seen examples on how to have infinite loading in scroll, but the problem is that those examples reload the entire page (it seems)
Has anyone got any idea how I can accomplish this?
As said, I cannot accomplish this using normal means.
The page is build as:
Page 1, has a div, empty until the user clicks a button.
Page 2 loads a lot of content. When the user clicks on the button on page 1, this is loaded into the div.
When the user scrolls through the div (It has overflow set to auto) and ends at the bottom of the div it should load the next page or so to speak.
Thanks in advance! :)
There are some plugins which do this for you quite well.
http://www.webdeveloperjuice.com/2010/02/24/create-infinte-scroll-effect-using-jquery-with-demo/
http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/
EDIT: Some more up to date plugins:
https://github.com/fredwu/jquery-endless-scroll
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
Use the JQuery.load() method to grab some html content and then insert it into an html element.
If you're using Paul Irish's Infinite Scroll, you can just specify a binder as one of the arguments where you have implemented infinite scroll, just like this:
$('.mydiv').infinitescroll({
binder: $(".name-of-div")
The binder is set to the document window by default, but if you specify it, you can have infinite scroll running simply inside one div on your page
I need help with jQuery jqGrid and subgrid.
I am able to create a Subgrid inside my jqGrid succesfully. The next step is to add a custom option list in the main grid navbar somewhere so that depending on which option the user selects, a different kind of subgrid opens.
Is it possible to add custom options to the jqGrid navigation bar?
The only standard way to add custom element in the navBar is to use navButtonAdd method which add a button.
If you want to add another custom HTML elements you have to do this manually with respect of some jQuery function like jQuery.append. I recommend you to read the code of navSeparatorAdd and navButtonAdd functions.