You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Chris <ch...@gmx.at> on 2015/02/03 22:30:02 UTC
Clicking a button should fire a 'CSS event'
Hi guys,
I would like to control a DIV element when clicking on a button, so that it sort of reacts to this event by „blinking“ for a short time.
Currently, when clicking the button, a CSS attribute is added to the DIV’s class and the page is reloaded so that this event is triggered.
However, the event should fire only once so I would therefore need to delete the attribute after that.
Is there a more elegant solution so that the „CSS event“ is fired once when clicking the button?
Thanks,
Chris
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Clicking a button should fire a 'CSS event'
Posted by Chris <ch...@gmx.at>.
Hi Martin, dear all.
thanks for the hint, I tried it the following way (see below).
However, when #isTemporary returns true and the page is loaded afterwards, the attribute is not appended to the marker component. This only happens when setting it to false which has the disadvantage that this is then done permanently.
A) What could be the error?
B) What is the best practice to get a handler for the „marker“ component in a specific subpanel when the marker component is added as directly to the page? I currently put a reference in each constructor of the subpanels hierarchy to have a reference in the specific subpanel where it is needed which is a bit inconvenient. I know that there are the Wicket events but isn’t there something as #getComponent(<component id>) so that you can use it like target.add(getComponent(<id>)) or WebMarkupContainer c = getComponent….?
final WebMarkupContainer icon = new WebMarkupContainer("icon");
icon.setOutputMarkupId(true);
icon.add(new AjaxEventBehavior("onclick") {
protected void onEvent(AjaxRequestTarget target) {
marker.add(new AttributeAppender("class", "marker") {
@Override
public boolean isTemporary(Component component) {
return true;
}
});
target.add(getPage());
}
});
best regards,
Chris
> Am 03.02.2015 um 23:01 schrieb Martin Grigorov <mg...@apache.org>:
>
> On Tue, Feb 3, 2015 at 11:53 PM, Chris <ch...@gmx.at> wrote:
>
>> Hi Martin,
>>
>> thanks for your reply, I understand. Here are some more details:
>>
>> <marker> is a WebmarkupContainer in a page that represents a rectangle.
>>
>> When the user clicks a specific icon (see below), the CSS class „marker“
>> is added to the marker and the page is reloaded so that the marker-CSS is
>> executed one time (highlighting effect).
>> However, after that event, the CSS class should be removed so that the
>> effect is not shown anymore, e.g., when the user simply loads the page.
>> Any ideas how to implement this feature?
>>
>> final WebMarkupContainer icon = new WebMarkupContainer(„icon");
>> icon.setOutputMarkupId(true);
>> icon.add(new AjaxEventBehavior("onclick") {
>> protected void onEvent(AjaxRequestTarget target) {
>> marker.add(AttributeModifier.append("class", "marker"));
>>
>
> replace with:
>
> marker.add(new AttributeAppender("class", "marker") {
> @Override boolean isTemporary(Component c) {return true;}
> })
>
>
>> target.add(getPage());
>>
>> }
>> });
>> Thanks!
>>
>>
>>> Am 03.02.2015 um 22:41 schrieb Martin Grigorov <mg...@apache.org>:
>>>
>>> Hi,
>>>
>>> Please try to explain the idea again.
>>> There is no such thing like CSS event. There is JS event.
>>> Does the button submit a form ? Because you say it reloads the page ...
>>> Why do you think the event is fired more than once ?
>>>
>>> Martin Grigorov
>>> Wicket Training and Consulting
>>> https://twitter.com/mtgrigorov
>>>
>>> On Tue, Feb 3, 2015 at 11:30 PM, Chris <ch...@gmx.at> wrote:
>>>
>>>> Hi guys,
>>>>
>>>> I would like to control a DIV element when clicking on a button, so that
>>>> it sort of reacts to this event by „blinking“ for a short time.
>>>> Currently, when clicking the button, a CSS attribute is added to the
>> DIV’s
>>>> class and the page is reloaded so that this event is triggered.
>>>> However, the event should fire only once so I would therefore need to
>>>> delete the attribute after that.
>>>>
>>>> Is there a more elegant solution so that the „CSS event“ is fired once
>>>> when clicking the button?
>>>>
>>>> Thanks,
>>>> Chris
>>>>
>>>>
>>>>
>>>> ---------------------------------------------------------------------
>>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>>
>>>>
>>
>>
Re: Clicking a button should fire a 'CSS event'
Posted by Martin Grigorov <mg...@apache.org>.
On Tue, Feb 3, 2015 at 11:53 PM, Chris <ch...@gmx.at> wrote:
> Hi Martin,
>
> thanks for your reply, I understand. Here are some more details:
>
> <marker> is a WebmarkupContainer in a page that represents a rectangle.
>
> When the user clicks a specific icon (see below), the CSS class „marker“
> is added to the marker and the page is reloaded so that the marker-CSS is
> executed one time (highlighting effect).
> However, after that event, the CSS class should be removed so that the
> effect is not shown anymore, e.g., when the user simply loads the page.
> Any ideas how to implement this feature?
>
> final WebMarkupContainer icon = new WebMarkupContainer(„icon");
> icon.setOutputMarkupId(true);
> icon.add(new AjaxEventBehavior("onclick") {
> protected void onEvent(AjaxRequestTarget target) {
> marker.add(AttributeModifier.append("class", "marker"));
>
replace with:
marker.add(new AttributeAppender("class", "marker") {
@Override boolean isTemporary(Component c) {return true;}
})
> target.add(getPage());
>
> }
> });
> Thanks!
>
>
> > Am 03.02.2015 um 22:41 schrieb Martin Grigorov <mg...@apache.org>:
> >
> > Hi,
> >
> > Please try to explain the idea again.
> > There is no such thing like CSS event. There is JS event.
> > Does the button submit a form ? Because you say it reloads the page ...
> > Why do you think the event is fired more than once ?
> >
> > Martin Grigorov
> > Wicket Training and Consulting
> > https://twitter.com/mtgrigorov
> >
> > On Tue, Feb 3, 2015 at 11:30 PM, Chris <ch...@gmx.at> wrote:
> >
> >> Hi guys,
> >>
> >> I would like to control a DIV element when clicking on a button, so that
> >> it sort of reacts to this event by „blinking“ for a short time.
> >> Currently, when clicking the button, a CSS attribute is added to the
> DIV’s
> >> class and the page is reloaded so that this event is triggered.
> >> However, the event should fire only once so I would therefore need to
> >> delete the attribute after that.
> >>
> >> Is there a more elegant solution so that the „CSS event“ is fired once
> >> when clicking the button?
> >>
> >> Thanks,
> >> Chris
> >>
> >>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> >> For additional commands, e-mail: users-help@wicket.apache.org
> >>
> >>
>
>
Re: Clicking a button should fire a 'CSS event'
Posted by Chris <ch...@gmx.at>.
Hi Martin,
thanks for your reply, I understand. Here are some more details:
<marker> is a WebmarkupContainer in a page that represents a rectangle.
When the user clicks a specific icon (see below), the CSS class „marker“ is added to the marker and the page is reloaded so that the marker-CSS is executed one time (highlighting effect).
However, after that event, the CSS class should be removed so that the effect is not shown anymore, e.g., when the user simply loads the page.
Any ideas how to implement this feature?
final WebMarkupContainer icon = new WebMarkupContainer(„icon");
icon.setOutputMarkupId(true);
icon.add(new AjaxEventBehavior("onclick") {
protected void onEvent(AjaxRequestTarget target) {
marker.add(AttributeModifier.append("class", "marker"));
target.add(getPage());
}
});
Thanks!
> Am 03.02.2015 um 22:41 schrieb Martin Grigorov <mg...@apache.org>:
>
> Hi,
>
> Please try to explain the idea again.
> There is no such thing like CSS event. There is JS event.
> Does the button submit a form ? Because you say it reloads the page ...
> Why do you think the event is fired more than once ?
>
> Martin Grigorov
> Wicket Training and Consulting
> https://twitter.com/mtgrigorov
>
> On Tue, Feb 3, 2015 at 11:30 PM, Chris <ch...@gmx.at> wrote:
>
>> Hi guys,
>>
>> I would like to control a DIV element when clicking on a button, so that
>> it sort of reacts to this event by „blinking“ for a short time.
>> Currently, when clicking the button, a CSS attribute is added to the DIV’s
>> class and the page is reloaded so that this event is triggered.
>> However, the event should fire only once so I would therefore need to
>> delete the attribute after that.
>>
>> Is there a more elegant solution so that the „CSS event“ is fired once
>> when clicking the button?
>>
>> Thanks,
>> Chris
>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
Re: Clicking a button should fire a 'CSS event'
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
Please try to explain the idea again.
There is no such thing like CSS event. There is JS event.
Does the button submit a form ? Because you say it reloads the page ...
Why do you think the event is fired more than once ?
Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov
On Tue, Feb 3, 2015 at 11:30 PM, Chris <ch...@gmx.at> wrote:
> Hi guys,
>
> I would like to control a DIV element when clicking on a button, so that
> it sort of reacts to this event by „blinking“ for a short time.
> Currently, when clicking the button, a CSS attribute is added to the DIV’s
> class and the page is reloaded so that this event is triggered.
> However, the event should fire only once so I would therefore need to
> delete the attribute after that.
>
> Is there a more elegant solution so that the „CSS event“ is fired once
> when clicking the button?
>
> Thanks,
> Chris
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Re: Clicking a button should fire a 'CSS event'
Posted by Chris <ch...@gmx.at>.
I solved it via Javascript following the approach of http://blogs.sitepointstatic.com/examples/tech/animation-api/index.html <http://blogs.sitepointstatic.com/examples/tech/animation-api/index.html>.
thanks, Chris
> Am 03.02.2015 um 22:52 schrieb Warren Bell <wa...@gmail.com>:
>
> Chris,
>
> Seems like a lot of work just to get a div to blink. Write a behavior with some javascript for the blinking and do that on the client only separate from your form submission or whatever else your button is doing.
>
> Warren
>
>> On Feb 3, 2015, at 1:30 PM, Chris <ch...@gmx.at> wrote:
>>
>> Hi guys,
>>
>> I would like to control a DIV element when clicking on a button, so that it sort of reacts to this event by „blinking“ for a short time.
>> Currently, when clicking the button, a CSS attribute is added to the DIV’s class and the page is reloaded so that this event is triggered.
>> However, the event should fire only once so I would therefore need to delete the attribute after that.
>>
>> Is there a more elegant solution so that the „CSS event“ is fired once when clicking the button?
>>
>> Thanks,
>> Chris
>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
Re: Clicking a button should fire a 'CSS event'
Posted by Warren Bell <wa...@gmail.com>.
Chris,
Seems like a lot of work just to get a div to blink. Write a behavior with some javascript for the blinking and do that on the client only separate from your form submission or whatever else your button is doing.
Warren
> On Feb 3, 2015, at 1:30 PM, Chris <ch...@gmx.at> wrote:
>
> Hi guys,
>
> I would like to control a DIV element when clicking on a button, so that it sort of reacts to this event by „blinking“ for a short time.
> Currently, when clicking the button, a CSS attribute is added to the DIV’s class and the page is reloaded so that this event is triggered.
> However, the event should fire only once so I would therefore need to delete the attribute after that.
>
> Is there a more elegant solution so that the „CSS event“ is fired once when clicking the button?
>
> Thanks,
> Chris
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org