Search jQuery

jQuery Forum

Manually add hash changes using custom part page transitions

in jQuery Mobile • 8 years ago

I have been working on a page that is used on tablets and browsers and I need to have part of the page transition (slide in and out) leaving a menu on the left side. I have everything working except I can't seem to find out if there is a way to add this to hash changes so the back button will work. Is there a manual way to do this?

Thanks.

Replies(14)

Omar

Re: Manually add hash changes using custom part page transitions

8 years ago

You need to use pushState() to add history entry when you remove something from page.

Can you show us a working example of what you currently have?

watusiware

Re: Manually add hash changes using custom part page transitions

8 years ago

You haven't given us any clue as to what you actually did.

Make a demo. Plunker is best for jQuery Mobile demos.

jimboidaho

Re: Manually add hash changes using custom part page transitions

8 years ago

Patience. Here is a Plunker that should give you an idea of what I am doing.

http://plnkr.co/edit/W8kv0AYhroQdtjatcrVH

Omar

Re: Re: Manually add hash changes using custom part page transitions

8 years ago

The demo isn't working.

jimboidaho

Re: Manually add hash changes using custom part page transitions

8 years ago

I didn't spend a lot of time on it but if you go full screen, you will see a left side and right side caption. If not full screen the captions are on the bottom. All I am trying to demonstrate is how the slide right and then back. What I would like to do is some how hook up the back controls so the div would slide back if the user clicks the back button on the browser or the back button on a tablet.

watusiware

Re: Manually add hash changes using custom part page transitions

8 years ago

It's not clear to me just what you are trying to accomplish. In this case, it's best to upload an image first to show us what you want to achieve.

I *think* what I I would do instead is to write a custom transition rather than messing with. But I'm not really clear on what you are trying to do.

Why not simply use a panel? It sounds like that is what you want.

http://demos.jquerymobile.com/1.4.5/panel/

jimboidaho

Re: Manually add hash changes using custom part page transitions

8 years ago

This is really quit simple. I need to transition part of a page. Think of a tablet app that leaves a menu on the left side and transitions the right 2/3. I have this working but I don't see a way of hooking up the browser back button or tablet's back button to the transition.

Looking at the panel's documentation, it is unclear if there is a way to have the panel always open and fixed outside of the JQM page. What would be ideal for me would be able to do JQM navigation and leave the panel always visible. Think of the revel panel example that is outside of the JQM page role and stays in place during navigation.

Omar

Re: Re: Manually add hash changes using custom part page transitions

8 years ago

Ok, I think I got what you mean. You want to changes e.g. add/remove elements with transition/animation within the same page, without navigating to a new page, true?

jimboidaho

Re: Manually add hash changes using custom part page transitions

8 years ago

Yes and that is what I am doing now. I am finding that my users are getting confused because some of the time the back button goes back to my last page but in this case it does not.

Omar

Re: Re: Manually add hash changes using custom part page transitions

8 years ago

Are you looking for something like this? http://jsfiddle.net/Palestinian/s9169hp1/

jimboidaho

Re: Manually add hash changes using custom part page transitions

8 years ago

Nope. Not what I am looking for. I have worked on my plunket some more and I hope this will show you what I am trying to do.

My Plunket

One problem I had was not being able to size the run time window correctly so you will have do the following steps.

1. run the plunket.

2. drag the left side of the run time window to the left until the window is about 930px wide.

3. stop the plunket and then run it again. You should see menu of buttons on the left side and a yellow div on the right. If the yellow div is at the bottom then the window needs to be wider.

4. click the slide left button and a grey div should be showing.

5. click the back button and the yellow div should be showing again.

One question is if there is a way to hook up the browser back button to do the same as my back button?

The other question is if the panel widget outside of the page can do something similar?

Sorry for the confusion

Omar

Re: Re: Manually add hash changes using custom part page transitions

8 years ago

I don't know if you have checked my demo thoroughly; anyway, let me elaborate. If you remove a list item and hit back button (if you navigate backwards by any mean), you will stay on same page and the removed item is restored.

You can do the same when you show the gray div, pushState(), navigate to same page without transition to add a history record.

Edit:

Here is your modified plunkr: http://embed.plnkr.co/nMV6FGsnKPkZ17yheGke/preview

function slidepage(direction) {
if (direction == 'l') {
$(".needtomove").addClass('pt-page-moveToLeft');
$(".needtomove").removeClass('pt-page-moveFromLeft');
$.mobile.pageContainer.pagecontainer("change", location.href, {
transition: "none",
allowSamePageTransition: true
});
window.history.pushState({}, document.title, location.href);
}
}
$(document).on("pagecontainerbeforechange", function(e, data) {
if (typeof data.toPage == "object" && data.options.direction == "back" && data.toPage.jqmData("url") == data.prevPage.jqmData("url")) {
$(".needtomove", data.toPage).toggleClass("pt-page-moveToLeft pt-page-moveFromLeft");
console.log("Animating...");
}
});