Client Side Techniques (Techniques XML Submission Form)

 checkbox checked

Submission Results:

Technology: Client Side Techniques 
Techniques Category: Script techniques 
Submitter's Name: Becky Gibson 
Submitter's Email: gibsonb@us.ibm.com

<technique id="UNKNOWN">
<short-name>Blinking via JavaScript and CSS</short-name>
<applies-to>
 <guideline idref="" />
 <success-criterion idref="UNKNOWN" />
</guideline

</applies-to>

<task>
<p>user is allowed to turn off content that blinks</p>
</task>

<description>
Use JavaScript and CSS to cause text to blink.  If JavaScript and/or css is disabled, the text will not blink.  A button can be provided to toggle the blinking of the object on and off. This example blinks text, but that same technique could be used to "blink" a border around an object.   



The text is made to blink by changing its visibility style value from visible to hidden on a regular basis.  The JavaScript window.setTimeout() method is used to call the function which changes the visibility.

</description>

<user-issues>
 <affects group="UNKNOWN" />
</user-issues>

<eg-group>
<description>
A span is created around a text object to make blink.  The span is given an id so it can be obtained programmatically via document.getObjectById().   There are three "global" JavaScript variables used to store blinking information.  bDoBlink is a boolean that indicates if blinking is turned on for the page or off.  visibiity[] is an array that stores the values of the visibility style: hidden, visible;  bOn is used as the index into this array and is either 0 or 1.  

There are two functions; toggleBlink() and doBlink().  toggleBlink() is called by the onclick of a button on the page - it toggles blinking on an off.  doBlink() is the actual function that causes blinking.  It gets the object to make blink and changes its visiblity. Then calls setTimeout() to call itself again after a specified period of time.  

</description>

<code><![CDATA[
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />

<title>JavaScript Blink Technique</title>

<style type="text/css">

body {

	background-color:#FFF;

	color:#000;

}

.bigText {

	font-family:"Times New Roman", Times, serif;

	font-size:x-large;

}

</style>

<script type="text/javascript">

//<![CDATA[

var bDoBlink=false;

var bOn = 0;

var visibility = ["hidden", "visible"]; // array that stores the css visibility values

/* function doBlink

	get the object to make blink - its id could be passed as a variable

	check the global bDoBlink to see the status of blinking

	if it is on

		set the vibility of the object opposite of what it was

		use bOn as the index into the array which stores the string values for visibility

		update bOn to the next index (either 0 or 1)

		set the timeout value to call this function again

*/

function doBlink() {

	var blinkObj = document.getElementById("jsBlink");  // could store blinkObj in a global variable so do not have to retrieve each time;

	if (bDoBlink == true) {

		blinkObj.style.visibility=visibility[bOn];

		bOn = ++bOn % 2;

		setTimeout("doBlink()",1000);

	}





}

/* function toggleBlink

	turns blinking on or off

	reverse the value of the global bDoBlink

	if blinking is now on,

		call setTimeout to call the doBlink function

	else

		get the blink object and set it to visible

*/

function toggleBlink() {

	bDoBlink = !bDoBlink;

	if (bDoBlink == true) {

		setTimeout("doBlink()",500);

	}

	else {

		var blinkObj = blinkObj = document.getElementById("jsBlink");

		blinkObj.style.visibility = "visible";

	}

}



//]]>

</script>

</head>

<body>

<p>Javascript and CSS can be used to make the following text in brackets blink: <span id="jsBlink" class="bigText">[JavaScript Blink]</span>.  Toggle the blinking on and off

by pressing the "toggle JS blink" button below.

</p>

<form action="none">

<button type="button" onclick="toggleBlink()" >Toggle JS Blink</button>

</form>

</body>

</html>
]]</code>

<ua-issues>

</ua-issues>
</eg-group>

<resources>
</resources>
</technique>

Additional Notes:

This technique was tested in IE 6.0; Mozilla 1.8a3 & 1.72; Firefox 0.9.2; and Opera 7.54;  It was also tested in Jaws 4.51, WindowEyes 4.51 sp3, and HPR 3.04 to make sure these screen readers speak the text when it is blinking - all do.

Received on Wednesday, 8 September 2004 17:33:08 UTC