SYSK 302: Code Sample for Bringing Detailed Data Row into View and “Blinking” To Get User’s Attention
Visualize this: you have a scrollable window with lots of data in a table or list format (say, a year worth of data) and you have another control that gives a 1000-foot level view of data (e.g. a yearly calendar control that uses color to indicate whether there is detailed data available for a given day). The picture below demonstrates the concept without the business context:
You’d like your users to be able to click on a day in the calendar control (represented above as a table with two rows and five columns), and for the corresponding row in the list view to be brought into the visible area on the screen.
Moreover, to attract the end user’s attention to the proper row, you’d like to change the font to bold for a second or so…
The code below demonstrates the behavior described above.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<html>
<body>
<div id="ListView" style="height: 100px; width: 300px; overflow-y: scroll; overflow-x: hidden; border: solid 1px gray;">
<table>
<tr id="row1">
<td>1</td>
<td>Row 1</td>
</tr>
<tr id="row2">
<td>2</td>
<td>Row 2</td>
</tr>
<tr id="row3">
<td>3</td>
<td>Row 3</td>
</tr>
<tr id="row4">
<td>4</td>
<td>Row 4</td>
</tr>
<tr id="row5">
<td>5</td>
<td>Row 5</td>
</tr>
<tr id="row6">
<td>6</td>
<td>Row 6</td>
</tr>
<tr id="row7">
<td>7</td>
<td>Row 7</td>
</tr>
<tr id="row8">
<td>8</td>
<td>Row 8</td>
</tr>
<tr id="row9">
<td>9</td>
<td>Row 9</td>
</tr>
<tr id="row10">
<td>10</td>
<td>Row 10</td>
</tr>
</table>
</div>
<br /><br />
<table cellpadding="0" cellspacing="0" rules="all">
<tr>
<td onclick="ScrollIntoView(1);" style="cursor: hand; width: 16px;">1</td>
<td onclick="ScrollIntoView(2);" style="cursor: hand; width: 16px;">2</td>
<td onclick="ScrollIntoView(3);" style="cursor: hand; width: 16px;">3</td>
<td onclick="ScrollIntoView(4);" style="cursor: hand; width: 16px;">4</td>
<td onclick="ScrollIntoView(5);" style="cursor: hand; width: 16px;">5</td>
</tr>
<tr>
<td onclick="ScrollIntoView(6);" style="cursor: hand; width: 16px;">6</td>
<td onclick="ScrollIntoView(7);" style="cursor: hand; width: 16px;">7</td>
<td onclick="ScrollIntoView(8);" style="cursor: hand; width: 16px;">8</td>
<td onclick="ScrollIntoView(9);" style="cursor: hand; width: 16px;">9</td>
<td onclick="ScrollIntoView(10);" style="cursor: hand; width: 16px;">10</td>
</tr>
</table>
<script type="text/javascript">
var blinkTimeout;
var childCtrls;
function ScrollIntoView(id)
{
if (blinkTimeout != null)
{
clearTimeout(blinkTimeout);
blinkTimeout = null;
SetFontBold(childCtrls, false);
childCtrls = null;
}
var ctrl = document.getElementById('row' + id);
ctrl.scrollIntoView(true);
// Now, blink once
childCtrls = new Array();
GetLeafControls(ctrl, childCtrls);
// (on state + off state) * 1 = 2
blinkTimeout = setTimeout('Blink(1, 2)', 1);
}
function SetFontBold(childCtrls, bold)
{
if (childCtrls != null)
{
for (i = 0; i < childCtrls.length; i++)
{
if (bold)
childCtrls[i].style.fontWeight = 700;
else
childCtrls[i].style.fontWeight = 400;
}
}
}
function Blink(count, maxCount)
{
if (childCtrls != null && childCtrls.length > 0)
{
if (count < maxCount)
SetFontBold(childCtrls, (count % 2) > 0);
else if (count == maxCount)
SetFontBold(childCtrls, false);
count += 1;
if (count <= maxCount)
{
setTimeout('Blink(' + count + ', ' + maxCount + ')', 1000);
}
else
{
SetFontBold(childCtrls, false);
clearTimeout(blinkTimeout);
blinkTimeout = null;
childCtrls = null;
}
}
}
function GetLeafControls(ctrl, childCtrls)
{
if (ctrl.children.length > 0)
{
for (i = 0; i < ctrl.children.length; i++)
{
GetLeafControls(ctrl.children[i], childCtrls);
}
}
else
{
childCtrls.push(ctrl);
}
}
</script>
</body>
</html>