Blog Search
Latest Posts
Firefox 3 Web Browser Launched
New Educational Media Website Launch
Trevor Laurency Fitness Website Launch
Recent Recommended Links - April 2008
Web Apps on Your Desktop with Mozilla Prism
Recent Recommended Links - March 2008
Ubuntu Linux - Persistent sudo root
Controlling PHP Register Globals Using .htaccess File
Javascript Essentials - Date Pickers (Calendars)
Blog Archive
Browse by Subject
AJAX
Apache
CMS
CSS
HTML
Java
JavaScript
Links
Linux
Mac
MySQL
Pascal
PHP
postgreSQL
RSS
Ruby
SEO
Web Dev News
Windows
XML
Other Resources
Computer Science Student Articles
Javascript / CSS: Flashing Text - How to do it - Why NOT to do it
Published: 16th Sep 2006
Anyway, I'll proceed to outline a couple of ways you can implement this stunningly magical effect... then I'll proceed to explain why you shouldn't use it. Well, I'll try to explain at least.
The first way you can create flashing text is to use CSS:
<style>
text-decoration: blink;
</style>
<span id="flash">Blinking Text</span>Unfortunately, this feature is not supported in Internet Explorer. It also lacks any real flexibility in controlling the style of flashing. Back to the drawing board!
Time for some lovely JavaScript...
<body onload="changeColour('flashtext');">
<script type="text/javascript">
<!--
function changeColour(elementId) {
var interval = 1000;
var colour1 = "#ff0000"
var colour2 = "#000000";
if (document.getElementById) {
var element = document.getElementById(elementId);
element.style.color = (element.style.color == colour1) ? colour2 : colour1;
setTimeout("changeColour('" + elementId + "')", interval);
}
}
//-->
</script>
<p id="flashtext">This text will flash!!!</p>Ok so now we can get text to flash. Hoorah! Now we need to address the concern of usability. Website usability is a typically qualitative factor and therefore cannot be "measured" very easily.
Even so, there are guidelines we can adhere to. Overloading a user's screen with unnecessarily distracting animations is a big no-no as I'm sure we're all aware. How about discreet use of flashing text? Well, it can be useful. Certain circumstances may warrant, or even necessitate, flashing text. (None come to mind at the time of writing this but feel free to let me know if you think of any particular circumstances)
Think, though, of all the alternative ways of highlighting text and objects within an HTML page. Think about the myriads of ways that CSS can enable us to define different styles for elements in an aesthetically pleasing manner. Is there really a need for flashing text? It may prove to be a most unwelcome distraction on pages where users are trying to read around the flashing text.
So in conclusion, use it if you must... but I wouldn't recommend it :-)
Related Links
Related Articles / Posts
Recent Recommended Links - April 2008 (11/04/2008)
Recent Recommended Links - March 2008 (16/03/2008)
Cascading Style Sheets (CSS) - 10 Years of Styling Web Pages (02/01/2007)
CSS Layouts Without Tables - Tableless Design (Article) (07/11/2006)
Web Dev News: Microsoft Expression Web Free Beta Download (12/10/2006)