Mobile Safari Scroll to bottom to load more content like Facebook - javascript

I'm a newbie in web development.
My teammate and I are working on a project where say, 10 items are initially shown on the page. The user can scroll the list of items and when he reaches the bottom, it should load 5 more contents. In addition, we want the list to stay on the items that were last viewed before the loading of more contents was done; but, it should still support loading of new updates on top of the page - like that in the Facebook news feeds. While it's loading more contents when scrolling reaches the bottom of the page, new updates are added above.
Our app is working smoothly on desktop browsers, but we're having issues on the mobile side, specifically on Mobile Safari. Scrolling to the bottom is working. It loads more contents, so as handling new updates on top of the page; however it brings the user back to the top of the list, instead of staying on the last items shown and the newly loaded contents would be hidden and will be viewed once scrolled downwards. So, if page is showing the 11th-20th items on the list, and he scrolls down to load more, say 5 items, the page reloads and brings the user to the 1st-10th item. It should stay on the 11th-20th items, but still has loaded the 21st-25th items hidden below, instead.
Any help would be much appreciated! Thanks!

You can try one of the third party libraries as this one for an example http://dcarrith.github.com/jquery.mobile.lazyloader/

Try using iScroll 4, it should achieve what you wish for mobile
http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

Related

fullpage.js after first scroll script

A question about the Fullpage plugin: http://alvarotrigo.com/fullPage/
You can open the site in any section. For example this link opens the site in the fourth section:
http://alvarotrigo.com/fullPage/#4thpage
This means the site immediately starts to scroll once you opened the site (it scrolls down to the fourth section).
However, I have a script (it loads a chat box) that slows down this process. Although I added my chat script AFTER the Fullpage.js initialization script, my site first loads the chat box and after that Fullpage scrolls to the right section.
I want the page first to scroll down to the right section on site open, and once the site has opened and has scrolled to the right section, then the chat box script needs to start to run (for as long as the site is open).
How to accomplish that? I tried to place my chat script in the afterLoad and afterRender, but for some reason that makes my chat box not showing up at all. Is there a way to perform some actions after Fullpage has loaded and after the first scroll (on site open) to the right section?
As I said in a previous comment:
Probably what's taking time is the loading of the JS, CSS or SWF files required for that script to run. Fullpage.js waits until all elements from the site have loaded to scroll to the section. The reason to do this is due to the use of images in section when using scrollOverflow:true, as fullpage.js needs to determine if the section needs scroll bar or not depending on the size of the loaded image.
To solve it you can load the element dynamically by using jQuery or ajax.
Otherwise, you can edit fullPage.js and change line 536 this:
$window.on('load', function() {
scrollToAnchor();
});
To this:
scrollToAnchor();
The only problem with that is that you'll have to remember to change that line every time you update fullpage.js.
Feel free to open an issue in fullPage.js github forum and a solution might be implement in future versions.

Extension bar always visible

I'm developing a multi-browser extension using the Crossrider framework.
Is there a solution to show an html horizontal menu on the top of each page ?
The menu will embed a JS script which uses some external libraries.
Indeed, I can prepend my html content to the "body" tag but each time the user clicks on a link on the webpage, the whole page is reloaded which makes the horizontal bar disapear and then reappear on the next page when the loading is completed.
I thought of putting the website content into an iframe but some websites (ex: amazon) send a header with the "X-Frame-Options" set to "DENY" or "SAMEORIGIN". This is something which Crossrider cannot modify (at least I didn't find how to do that).
Is there an other way to show a PERMANENT menu on top of each page ?
EDIT :
My toolbar won't contain any link but it will record the mouse position. My problem is that each time the user will click on a website link (ex : to see a product on the amazon website), the toolbar will be reloaded and so the mouse position won't be recorded until the next page has finished its loading.
Page reload is normal behavior when clicking on a link on Amazon sites and hence the toolbar redrawing when the page loads is normal and correct.
Based on the information provided and assuming I have understood what you are trying to acheive, it appears that you are going about this the wrong way. I would first think about why do you need a toolbar at all? For example, if you are only recording the mouse position when a link in the page is clicked, I think it makes more sense to register to mouse click events of the links you are interested in.
I suggest you rethink your approach and take in to consideration the issues you have to handle, such as the page reload and handling the click event before the page reloads.
[Disclosure: I am a Crossrider employee]

Load different parts of a single page site as the user scrolls

I have created a website that has 5 different 'pages' all on one page, so it is a single page scrolling navigation website. Instead of the users browsers loading the whole page when they load the site, is there a way in which you can load the different virtual 'pages' as the user scrolls down to them? From here I could animate the elements when they load.
If you're looking for an out of the box option, I would check out LazyLoadXT.
I used it on a site where I wanted divs to load as I went along. I'm sure with a little working you can get it to work by calling divs.

Sliding page transitions with new content pre-loaded underneath

I am working on a project where the client wants a way of transitioning between content that basically works like page turning on an e-reader app. When you click on a link to go forward, the current content slides to the left and new content is revealed as it slides. If you click on a link to go backwards, the content slides in from the left and is superimposed. (If you're jumping to a page further off it's fine for the page to reload.)
There needs to be a distinct URL for each content block, and ideally this should work all the way down to IE7. Assume there are at least 50 pages, each with at least 2-300 words.
I know there are lots of jQuery page transition options, but most of the ones that I've looked at slide in the new content while the old content is sliding off or fades in the new content after the old content is gone (think slide.js). What I need is basically curtain.js that is vertical, triggered by a link instead of scrolling, and doesn't need to load in all of the content on the page at once.
Here's one way I've come up with possibly building this:
Current content is loaded in from the database (or whatever)
Content for the previous and next pages are also loaded in and stored in hidden divs
When a link is clicked, the current page slides off (or the previous page slides in)
The content that's no longer needed is deleted
New content is "preloaded" with AJAX and hidden
Local URL also changes with AJAX
Here's a crude diagram
That seems really inelegant, though. Is what I've outlined above possible to do? What would be a better way of doing this?
I am okay with JS/jQuery and PHP, learning AJAX.
I'd suggest jQuery UI tabs
No need to deal with AJAX. Just get the server to spit out the 50 pages of texts once and that's a wrap.
It's pretty straightforward to hook into the API, which gives you more control over the entire procedure. Enough control to hook up a function that updates the address bar when you tab through.

Javascript - Scroll page to last position of previous page when the back button is hit

I decide to make my own "neverending" scroll page which suits exactly my needs rather than making comfortable with some extensive classes that could not have to work exactly the way I would like them to.
Now, when all works like a charm, last thing remains. Preserve the scroll position when the browser's back button is hit. Every time you get to the bottom of the page I change the hash # part of the url. When the back button is hit, it shows waiting icon and then loads dynamic content.
Firefox scroll after that exactly to place the page was scrolled (good).
Opera and Safari seem to load exactly the same state there were before, so dynamic content seems to be already prefetched and displayed (good).
But IE and Chrome want to scroll before dynamic content is load and they don't try again later. IE get stucked at the top of the page and Chrome somewhere in the middle (bottom of the page before dynamic content shows up).
Now, what could I do to solve this issue? I could in theory store the current scroll position to url hash when any click is detected. Then previous page is load and I could simply parse the hash and ScrollTop(). But for some reason, this
$(document).live("click", function() { window.alert("gotcha"); });
doesn't work for me anyway.
The document doesn't have anything to be clicked on. document.documentElement is the root <html> node, so attach events to that, or to the window if appropriate.

Categories

Resources