Search jQuery

jQuery Forum

Transitions and Dynamic Html

in jQuery Mobile • 9 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,

Replies(5)

haga0054

Re: Transitions and Dynamic Html

9 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

https://forum.jquery.com/topic/how-to-ask-for-jquery-mobile-help

watusiware

Re: Transitions and Dynamic Html

9 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?

marx00

Re: Transitions and Dynamic Html

9 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

haga0054

Re: Re: Transitions and Dynamic Html

9 years ago

Well here is a short example. You could use something like this.

http://jsfiddle.net/VbV7E/2/

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.

marx00

Re: Transitions and Dynamic Html

9 years ago

I believe that's exactly what I'm looking for - thanks for your help!

Top Reply

Response title

Attachments

jQuery Forum

Transitions and Dynamic Html

Replies(5)

Re: Transitions and Dynamic Html

Re: Transitions and Dynamic Html

Re: Transitions and Dynamic Html

Re: Re: Transitions and Dynamic Html

Re: Transitions and Dynamic Html

Statistics

Tags

Actions