?
Solved

Add effect to Text in a Table Cell?

Posted on 2005-03-27
6
Medium Priority
?
221 Views
Last Modified: 2010-04-06
Hello all, I have an urgent one here and need a quick answer.
Hope you can help.

I need the ability to add a dim/brighten cycle or color cycle effect to text in a single table cell.

The closest I've seen is how mouse hover can change the apperance of text from one state to another, but it isn't what I'm looking for.
This needs to work without interaction from the user.

As the text in the cell (or the cell itself) will change, I need to be able to do this on the fly as well.

The only other thing I can think of right now is a cludge of converting the text to an animated .gif.
If that's the only answer, then how can that process be quick and automated?

I've just started on coding the page and will try to adapt to however it needs to be done.

This is a Fedora Core 3 server with Apache, Perl, Perl Mod, PHP, Javascript, and can add more if need be.

Thanks
0
Comment
Question by:scottzz
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
6 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 13639199
The text color aor any other style elemnt of the cell cna be modified by any event anywhere on the page.  do the cell this way:

<td id="thecell" style="color:blue">
content
</td>

then off any event all you need to change the color is:
document.getElementById('thecell').style.color='red';

IF you want the change to be on a regular basis set it on a timer with a function; and start it at the load:

<body onload="changeColor(document.getElementById('thecell')">

The function will look like:

function changeColor(EL)
{
   EL.style.color=(EL.style.color=='red') ? 'blue' : 'red';
   setTimeout'(changeColor(document.getElementById("thecell")',3000);
}

if you want it to change based on content then test the content in the function:

function changeColor(EL)
{
   if (EL.innerHTML=x) EL.style.color=='red';
   if (EL.innerHTML=y) EL.style.color=='blue';
   if (EL.innerHTML=z) EL.style.color=='black';
}

However if you are changing the style properties based on dynaic content, I don't know why you would not just modify the style in the same function as you use to load the content.

Cd&
0
 

Author Comment

by:scottzz
ID: 13640501


Thanks,

Is there a way to make the color transition from one to another smooth?

i.e. fade from one color to another?


0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13641340
I've got something I do with background color on one of my article pages:

http://cd-articles.fateback.com/CSSrollovers.html#here2

Just click the link to see the effct.  The code for it is in a textarea right below the effect.

However you are going for an effect that makde a page look quite unprofessional and childish, and it will annoy most users and impress none.

Cd&
0
 

Expert Comment

by:DearNeel
ID: 13642113
i've Something more, where u will not have to write so much of code if your webiste is being accessed by only  IE browsers.

Have a look at here

<a href='http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/overview/transition_ovw.asp'>http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/overview/transition_ovw.asp
</a>

Neel
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question