jQuery Mobile refresh page after changePage - javascript

Is there anyway to force a jQm page to reload once changePage is complete?
I have a number of pages dynamically loaded into an array. All of the pages that are being loaded are a part of a list, for example "20 mobile apps of 2011". Users will need to have the ability to swipe left and right to navigate the pages.
I've added the current code here: http://jsfiddle.net/cncpts/qMe6Z/2/
Notice how the URL's are being pulled from the array. From this i'm able to pull the next URL and the previous URL but I am only able to navigate one page forward and one back.
You can test the page here by clicking then swiping the mouse left or right: http://www.cncpts.me/complex/swipe/index.php
Any ideas on how to get the URL's to refresh while maintaining the native JQM transitions.

Why don't you use the JQM pagaintion plugin? Should be exactly what you are looking for.
If you want to change the URL you will have to set the changehash option to true in order for it to change
$.mobile.changePage(next,{
changeHash:true,
reloadPage:true,
dataUrl:next
});
Here is the link to the demo

Related

Remove/Hide div From Website

I have a css animation that essentially slides two images with a high z-index off the screen revealing the website content below it on the home page. It is only on the home page and not on any other pages.
What I would like to do is have this animation run only the first time the page is accessed during a session. So if the user navigates to another page and then comes back to the home page, I don’t want the animation to run again.
The only solution I can think of is to create an HTML5 session storage object on the first page load that is checked every time the home page is loaded and use jquery to hide div that contains animation if the value of the object is set.
This seems a bit overkill for such a simple task. Any suggestions on a simpler way of just removing the div that is persistent across page reloads during the session? You don’t have to write the code for me, just point me in a simpler direction if possible. Like is there a way to do this with just CSS. Or if I remove the element using JavaScript will it remain removed after navigating to another page within site and then coming back to home page. Please and thanks!
P.S. This is a custom WordPress theme so I’m open to a PHP solution as well.
You can check the referrer URL and run the animation only if the referrer is not the site itself. But this time the animation won't be shown if the visitor first opens another page and then navigates to the homepage.
Another option would be using cookies.

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.

Implementing backbutton with infinite scroll

I have new pages loaded via infinite scroll on my site. Each time a new page is loaded I update the url using HTML5 pushstate API:
if(history.pushState) {
history.pushState(null, null, '/page:' + current_page);
}
My urls looks like this:
http://mysite.com.com/page:1
http://mysite.com.com/page:2
http://mysite.com.com/page:3
and so on...
When the user clicks on an item in the listings (for example on page 2) and then clicks the back button he is taken back to:
http://mysite.com.com/page:2
But instead of being at the top of the page, he is at the portion from which he clicked. Since page:2 is now loaded at the very top, the part where he is loads anew
page 3 and he is looking at a post from that page instead.
Is there a way to make the user go back to the top of the page each time the back button is clicked?
I tried using anchor tags and javascript scroll on page load but neither is viable since there are several jumps before the user is taken to the top.
The best example of backbutton working with infinite scroll that I have seen is http://imgur.com but I can't figure out how they do it.
There is a library called infinite-ajax-scroll on github that seems to do what you are looking for. You can initialize it using the history option, which will update the hash of the url as you scroll the page. The only issue is that you'll have to change the way you load your data to work with the library.
jQuery.ias({
....
history:true,
....
});
You could also check out this blog post on tumbledry.org, which explains something closer to what you are trying to do, but I don't think its implemented as well.

Detect state of object from previous page

I'm working on a mobile site that is just a bunch of .html pages in structure.
In the header of the site I have a simple Show/Hide button that uses jquery toggle() to show or hide the banner. Works perfectly but when you switch to another page obviously the banner is displayed as it can't tell that on the previous page you chose to "hide" the banner as it's rendering a new .html page.
Anyways the question is with javascript, can I detect something about the previous page to indicate that the banner should be "shown" or "hidden" when loading the next page.
My initial thought was to fire something like a specific hash tag which could be picked up using JS and indicate that the banner should remain hidden or shown (depending on the hash). I'm just not in love with the hash idea as it is at best an ugly hack.
Any thoughts on how to detect a property of the previous page that I can then use in jquery or js to operate on the banner show/hide property?
You could save the status of the banner (opened or closed) in a cookie.
For info on JavaScript cookies, see here: http://www.quirksmode.org/js/cookies.html
Store.js is built for this. It's a cross-browser javascript library for storing variables locally.
https://github.com/marcuswestin/store.js

Categories

Resources