# Page.visual\_effect :highlight

**URL:** <https://www.ruby-forum.com/t/page-visual-effect-highlight/71554>\
**Category:** Rails\
**Created:** [October 9, 2006, 10:00pm UTC](https://www.ruby-forum.com/t/page-visual-effect-highlight/71554 "2006-10-09T22:00:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mic](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/e0b2c6/32.png) [@mic](https://www.ruby-forum.com/u/mic)\
**Post date:** [October 9, 2006, 10:00pm UTC](https://www.ruby-forum.com/t/page-visual-effect-highlight/71554/1 "2006-10-09T22:00:11Z")

</div>

I have some code that will do the highlight, fade effect on a block of  
text. It seems to work just fine until it is fired multiple times very  
rapidly.

The end color matches a grey background and the start color is a yellow.

Say its run 4 times a second for 3-5 seconds. When the flashing catches  
up the text will fade for the last time to the end color, then the  
background will switch to a light yellow background, much fainter then  
the start color. If you do the rapid fires again, after it catches up  
it will fade the last time then switch to a faint shade of yellow, but  
this time it will be darker yellow then the last time.

If you do the multiple fire thing a few more times, each time you stop  
it will get a bit darker still.

This was happening in both Firefox and IE.

Does anyone have any experience with this?

Here is the code in my controller:

```
render :update do |page|
  page.visual_effect :highlight,
                      @card.to_s,
                      :duration => 0.5,
                      :startcolor => "'#ffff00'",
                      :endcolor => "'#f1eded'"
end
```

---

<div class="post-metadata">

**Author:** ![mic](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/e0b2c6/32.png) [@mic](https://www.ruby-forum.com/u/mic)\
**Post date:** [October 9, 2006, 10:32pm UTC](https://www.ruby-forum.com/t/page-visual-effect-highlight/71554/2 "2006-10-09T22:32:50Z")

</div>

This is similar to a problem I had a few weeks ago. It has to do with  
the way scriptaculous does a highlight:

1. store initial state
2. do highlight
3. restore initial state by setting the element’s style attribute

I bet it’s storing is a semi-highlighted state, which would be pale  
yellow.

And (as I found out) step #3 plays hell on your CSS classes.

That said, I don’t know how to solve your problem, because I’ve never  
done multiple highlights. You might look into scriptaculous’ Effects  
Queues.

Cheers  
Starr

---

<div class="post-metadata">

**Author:** ![mic](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/e0b2c6/32.png) [@mic](https://www.ruby-forum.com/u/mic)\
**Post date:** [September 18, 2007, 1:32am UTC](https://www.ruby-forum.com/t/page-visual-effect-highlight/71554/3 "2007-09-18T01:32:11Z")

</div>

Just wondering if you (or anyone) ever found a workaround to this  
problem. Seems very much like a bug to me that you can’t highlight  
multiple items too quickly without leaving all sorts of aesthetic  
artifacts behind.  
Right now I have a calendar view and I’m trying to get it to highlight  
when you mouseover any day. This works if you move s l o w l y accross  
the page, but if you start to move more quickly the highlight either  
gets stuck with the highlighted color, or some color in between.

- Thanks

Mic wrote:

> I have some code that will do the highlight, fade effect on a block of  
> text. It seems to work just fine until it is fired multiple times very  
> rapidly.
> 
> The end color matches a grey background and the start color is a yellow.
> 
> Say its run 4 times a second for 3-5 seconds. When the flashing catches  
> up the text will fade for the last time to the end color, then the  
> background will switch to a light yellow background, much fainter then  
> the start color. If you do the rapid fires again, after it catches up  
> it will fade the last time then switch to a faint shade of yellow, but  
> this time it will be darker yellow then the last time.
> 
> If you do the multiple fire thing a few more times, each time you stop  
> it will get a bit darker still.
> 
> This was happening in both Firefox and IE.
> 
> Does anyone have any experience with this?
> 
> Here is the code in my controller:
> 
> ```
> render :update do |page|
> page.visual_effect :highlight,
> @card.to_s,
> :duration => 0.5,
> :startcolor => "'#ffff00'",
> :endcolor => "'#f1eded'"
> end
> ```