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
Related
Currently I have trouble in with interacting with the elements within the page using lazy loading. I need to select the list of items (which mostly from top till the bottom of page, up to like 100 items). With the lazy loading implemented, i could only select a portion of it, like 1/3 of that since they split all the items into 3 different portions then it will only load the the first portion. I found out using a tricky Javascript could help to scroll it to the bottom like page.execute_script("window.scrollTo(0,100000)"), then i could probably get all the items.
but should be saving that as the last option.
So, my question is Does Capybara support to interact with Lazy Loading stuff like that . Also what should I do to get the whole items, without using that Javascript ?
If you're just scraping data from a site then the easiest solution is going to be just using execute_script to scroll the page. If however you're testing an app behaves correctly then you want to stay away from execute_script since it can allow you to do things a user never could which may invalidate your tests. Instead use hover to move the mouse pointer over an element on the page that would trigger loading the next portion. For instance if you have a list of items showing up
<ul id="my_list_of_items">
<li class="item"></li>
<li class="item"></li>
...
<li class="item"></li>
</ul>
and the next group of items are loaded into the page when the bottom of the list is scrolled into view then do something like
find('.item:last-child').hover
This will cause the last item element on the page to be scrolled into view and the move pointer moved over it, which would then trigger loading of more items.
I have a situation where a toolbar item in CKEditor5 opens a ContextualBalloon which contains an iframe.
In my current understanding, the only way to hide the balloon is to remove the iframe view i.e.
this.balloon.remove(this.colorPickerIframeView)
However this removes the iframe view from the DOM, meaning that the next time I open the balloon view the iframe is reloaded.
I'd rather not have to reload the iframe every time, is there any way around that?
If you want to only hide the ContextualBalloon's view you can try to use this.balloon.view.hide()
I know there is ways to change DIV content within a single page. Using Ajax for example to dynamically get div content from an external .html file and then replace Div content using load or get functions.
However, is there a way to do this on a different page?
For example, say there is 2 pages. One.html, and Two.html.
I want a button on the first page (One.html), that when clicked, will change DIV content (by default the div box is empty, I want the button to insert text into the box basically) for a specific DIV Id on page 2 (Two.html).
So the process is basically: Click button on One.html, some function gets div content from external html (Three.html for example), and the uses that content to update an empty div on Two.html. Also, I would like to load some basic CSS in a similar fashion. Not only insert text into the box, but also change the background color and text color.
Thank You!
You just store the info and send it to the next page, say, with the HTTP request and submit methods get and post.
http://www.w3schools.com/tags/ref_httpmethods.asp
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.
I load a div using ajax:
$("#contentdiv").load('MyPage.php');
This is a "modal" div that shows details related to a picture the user clicks on.
The clickable pictures form a long list down my page.
I would like to have this modal div appearing on the position (have the same top value so to speak!!) of the picture that was clicked. Therefore the use does not need to scroll back to his/her picture of interest when the information div is hidden (closed!)
Any help is very much appreciated.
Thank you,
Carly
If you use the Modal dialog available in the JQueryUI package it should automatically do this for you.