You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by avchavan <av...@yahoo.co.in> on 2015/04/01 08:23:51 UTC
Animate ajax DOM manipulation smoothly
Hi, I am trying to smoothly animate Ajax DOM manipulation of components in my
application.
Here's the code:
descriptionContainer.setVisible(true);
listContainer.add(new AttributeModifier("class", "infoOrangeLight"));
descriptionContainer.add(new DisplayNoneBehavior());
target.appendJavaScript("$('#"+descriptionContainer.getMarkupId()+"').slideDown(1000);");
target.add(listContainer);
target.add(descriptionContainer);
Now the problem is this code has no slide down effect when i try to test it
in browser.
Its an accordion like functionality that i am trying to achieve here. where
folding unfolding happens. with wicket its jerky which i want to make a bit
smoother.
Can anybody please help me out with this?
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Animate-ajax-DOM-manipulation-smoothly-tp4670132.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Animate ajax DOM manipulation smoothly
Posted by avchavan <av...@yahoo.co.in>.
This is my code:
private void accordion(AjaxRequestTarget target, WebMarkupContainer
descriptionContainer, WebMarkupContainer listContainer){
boolean flag = descriptionContainer.isVisible();
if(this.selectedDescriptionContainer != null &&
this.selectedDescriptionContainer.isVisible()){
this.selectedDescriptionContainer.add(new DisplayNoneBehavior());
target.prependJavaScript("notify|$('#"+this.selectedDescriptionContainer.getMarkupId()+"').slideUp(1000,
notify);");
this.selectedDescriptionContainer.setVisible(false);
this.selectedlistContainer.add(new AttributeModifier("class",
"tableRowGreyBgOnly"));
target.add(this.selectedlistContainer);
target.add(this.selectedDescriptionContainer);
}
if(!flag){
this.selectedDescriptionContainer = descriptionContainer;
this.selectedlistContainer= listContainer;
descriptionContainer.add(new DisplayNoneBehavior());
descriptionContainer.setVisible(true);
listContainer.add(new AttributeModifier("class", "infoOrangeLight"));
target.add(listContainer);
target.add(descriptionContainer);
target.appendJavaScript("$('#"+descriptionContainer.getMarkupId()+"').slideDown(1000);");
}
}
While component initialisation i have user setVisible(false) along with
setOutputMarkupPlaceholderTag(true).
Tried this, but doesn't give the animation effect.
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Animate-ajax-DOM-manipulation-smoothly-tp4670132p4670136.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Animate ajax DOM manipulation smoothly
Posted by Martin Grigorov <mg...@apache.org>.
Use setVisible(false) + setOutputMarkupPlaceholderTag(true).
The in Ajax request just make it visible.
In your code snippet I don't see any usage of the special JavaScript
callback - 'notify'. This is required if you want any following JavaScript
evaluations to wait for the animation.
Martin Grigorov
Freelancer, available for hire!
Wicket Training and Consulting
https://twitter.com/mtgrigorov
On Wed, Apr 1, 2015 at 9:34 AM, avchavan <av...@yahoo.co.in> wrote:
> Hi Martin,
> I have read that already, but my problem is with setVisible(true).
> If i dont set it then i dont see the description container, and if i set it
> the usual jerky action follows.
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Animate-ajax-DOM-manipulation-smoothly-tp4670132p4670134.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Re: Animate ajax DOM manipulation smoothly
Posted by avchavan <av...@yahoo.co.in>.
Hi Martin,
I have read that already, but my problem is with setVisible(true).
If i dont set it then i dont see the description container, and if i set it
the usual jerky action follows.
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Animate-ajax-DOM-manipulation-smoothly-tp4670132p4670134.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Animate ajax DOM manipulation smoothly
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
Please read
http://wicketinaction.com/2013/02/replace-components-with-animation/
Martin Grigorov
Freelancer, available for hire!
Wicket Training and Consulting
https://twitter.com/mtgrigorov
On Wed, Apr 1, 2015 at 9:23 AM, avchavan <av...@yahoo.co.in> wrote:
> Hi, I am trying to smoothly animate Ajax DOM manipulation of components in
> my
> application.
>
> Here's the code:
> descriptionContainer.setVisible(true);
> listContainer.add(new AttributeModifier("class",
> "infoOrangeLight"));
> descriptionContainer.add(new
> DisplayNoneBehavior());
>
>
> target.appendJavaScript("$('#"+descriptionContainer.getMarkupId()+"').slideDown(1000);");
> target.add(listContainer);
> target.add(descriptionContainer);
>
> Now the problem is this code has no slide down effect when i try to test it
> in browser.
> Its an accordion like functionality that i am trying to achieve here. where
> folding unfolding happens. with wicket its jerky which i want to make a bit
> smoother.
> Can anybody please help me out with this?
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Animate-ajax-DOM-manipulation-smoothly-tp4670132.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>