Hello,
I’m looking for an easy method adding a rollover effect to a DIV box. Basically on mouse over the background colour should change (some cool effects like fading or opacity would be nice, but are no requirement).
Of course, it could be implemented manually by using advanced CSS, but maybe there is something more “Freeway-style” (aka action) already available ?
Thank you,
Tobias.
actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Protaculous Observer can do this pretty directly. Apply the Action to the box, then choose scriptaculous-packed in the Library menu. In the first DOM Event field, enter mouseenter if you’re using Freeway Pro 5.6.2 or greater, mouseover if you’re using any version less than 5.6.2. Click on the Function Body button, and enter the following:
this.morph('background-color: #ff9', {duration: 0.4});
Now on the next DOM Event field, enter mouseleave or mouseout (same reason to choose one or the other) and in the Function Body, add:
this.morph('background-color: #fff', {duration: 0.4});
See how that works. (Also, change the second color to whatever color your DIV really was, I just assumed white.)
Now if you like the effect, and you want to apply it to a bunch of different elements on the page, then you will want to refactor this code so you don’t have a separate instance of this function applied to each box on the page separately. Use a class like fader to mark out the boxes you want to affect (use Item / Extended or my Add Selector Action to apply the classname) and then write something like this in Protaculous (remove the Observer you added earlier, it will clash).
$$('.fader').each(function(elm){
elm.observe('mouseenter', function(evt){
this.morph('background-color: #ff9', {duration: 0.4});
});
elm.observe('mouseleave', function(evt){
this.morph('background-color: #ff9', {duration: 0.4});
});
});
Put that in the top Function Body in a Protaculous applied to the page, and any element on the page that you’ve applied the fader classname to will use this behavior.
Walter
On May 19, 2012, at 8:29 PM, tobiaseichner wrote:
Hello,
I’m looking for an easy method adding a rollover effect to a DIV box. Basically on mouse over the background colour should change (some cool effects like fading or opacity would be nice, but are no requirement).
Of course, it could be implemented manually by using advanced CSS, but maybe there is something more “Freeway-style” (aka action) already available ?
Thank you,
Tobias.
actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank you very much !
I’ll check it out today and give it a try.
Tobias.
actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
@waltd: This effect works absolutely great, but…
Now I tried to add this effect to DIV boxes used for an existing carousel (version 1.3.5). The fading effect is used on all panes of the carousel, except the very first one that acts as the “main” carousel.
However I get no error message back from the webbrowser and the carousel itself shows no malfunction, too.
Is this a conflict between the carousel’s action code and the fading effect ?
Bye,
Tobias.
actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I wouldn’t try to mix hand-coded (Protaculous or Observer) code with Carousel or another “complex” effect Action. The odds of one stepping on the other (or overwriting its output) are just too great. In this particular case, when Carousel moves the elements around, it renames them, and so the hand-coded effects will not have anything to attach to. In the worst case, this could lead to an error, which might halt all the other JavaScript code on the page right in its tracks. In the very best case, it will simply fail to do anything.
Walter
On Jun 11, 2012, at 10:37 AM, tobiaseichner wrote:
@waltd: This effect works absolutely great, but…
Now I tried to add this effect to DIV boxes used for an existing carousel (version 1.3.5). The fading effect is used on all panes of the carousel, except the very first one that acts as the “main” carousel.
However I get no error message back from the webbrowser and the carousel itself shows no malfunction, too.
Is this a conflict between the carousel’s action code and the fading effect ?
Bye,
Tobias.
actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I see… well, it’s doing the job fine (at least on the follow-up panes). So I’ll carefully test the effect on a couple of other popular webbrowsers to exclude side effects.
Thanks for your note. 
Tobias.
actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options