Move this topic
Transitions and Dynamic Html
in jQuery Mobile
•
10 years ago
Hello,
Is it possible to use transitions with dynamic html i.e. do a slide transition when updating the screen using $('#myDiv').html(data); ?
I can't use $.mobile.changePage("myPage", "myTransition"); because the content is not known in ahead of time.
Thanks,
M
1
Replies(5)
Re: Transitions and Dynamic Html
10 years ago
You need to be clearer in your description.
Waht is your div? What data are you adding? Are you trying to transition to the same page? Is the data a new page completely?
The short answer either way is yes, you can.
Here is an example I put together of a dynamic page + transition: http://jsfiddle.net/VbV7E/
Please note I use an ID for the page - if you click the button twice you have duplicate ID's and issues. Make sure you either don't use ID's or you are only generating it once.
Hope this helps, if not please clarify. See this thread for more information
Leave a comment on haga0054's reply
Re: Transitions and Dynamic Html
10 years ago
Awfully hard to answer your question with that little information:
https://forum.jquery.com/topic/how-to-ask-for-jquery-mobile-help
so I have to guess what you are trying to accomplish and what your page and document structure look like...
First thing (I'm guessing here) you can't use $.mobile.changePage(), not for the reason you state, but because it's meant for changing pages. It doesn't sound like you want to change pages. So, what is it that you DO want to do?
I gather you are changing some part of the page content. You can certainly use jQuery functions or CSS transitions to accomplish this, but I don't have any clue what you want. You want it to slide in from off the page? You want to animate the height? Something else?
https://forum.jquery.com/topic/how-to-ask-for-jquery-mobile-help
so I have to guess what you are trying to accomplish and what your page and document structure look like...
First thing (I'm guessing here) you can't use $.mobile.changePage(), not for the reason you state, but because it's meant for changing pages. It doesn't sound like you want to change pages. So, what is it that you DO want to do?
I gather you are changing some part of the page content. You can certainly use jQuery functions or CSS transitions to accomplish this, but I don't have any clue what you want. You want it to slide in from off the page? You want to animate the height? Something else?
Leave a comment on watusiware's reply
Re: Transitions and Dynamic Html
10 years ago
Thanks for your replies. I have a page with buttons (Previous, Next, Cancel) in the header.
When the user clicks Next, I'd like to replace the HTML in the content section with new content and provide a slide transition at the same time.
The new content could be anything: a list of checkboxes, a form with input boxes, message text i.e. any content based on the context.
Similar I'd need a transition in the reverse direction on clicking Previous.
Your solution haga0054 is very helpful. I'd have to add a header with buttons to each new page and also remove the old page after the transition.
I was hoping for a way to replace the content without replacing the whole page. (It may be better to replace the whole page on second thoughts - a half page transition on a phone may look odd.)
Any thoughts? Thanks,
M
Re: Re: Transitions and Dynamic Html
10 years ago
Well here is a short example. You could use something like this.
A few things to note:
- Slide transition has a bug so you either have to use a different one or you have to do what I did and set the page active on pageshow.
- If you want to empty the div first you can call .empty() on it. This way instead of adding more content, it will replace.
- You could always just transition in the new content only instead of the page. You can use JQuery or JS/CSS to do this. Look up JQuery animations.
Other than that good luck.
Leave a comment on marx00's reply
Re: Transitions and Dynamic Html
10 years ago
I believe that's exactly what I'm looking for - thanks for your help!
Leave a comment on marx00's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to marx00's question
Statistics
- 5 Replies
- 2611 Views
- 0 Followers