RE: Popup Text Code Question

Hi,
 
I have hacked your example code and changed your button into a link (Not
sure if it will help or if it is exactly what you wanted to acheive) -->
See below
 
Have you included the JS file as a seperate file? as this could create
viewing problems with users that have j-script disabled, but if you
include the code as a seperate file, then at least the user can still
see the contents of the page but the j-script functions won't be
included. Or provide an alternative version of the pop-up window that
can be easily accessible to screen readers etc.
 
Regards
Richard Mery BA (hons) 

  [dstl] Web Team 
  Knowledge and Information Services (KIS) 
  Building 248 Rm 2 
  Porton Down 
  Salisbury 
  Wiltshire 
  SP4 0JQ 

Dstl is part of the 
Ministry of Defence 

T - 01980 614944 
F - 01980 613328 
E - rmery@dstl.gov.uk <mailto:rmery@dstl.gov.uk>  

 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.popup {
  width: 20em;
  height: 12em;
  text-align: center;
  border: 3px solid black;
  background-color: white;
  padding: 5%;
  z-index: 100;
  position: absolute;
}
.popup#alertDisp[aria-hidden="true"]
  { display : none; }
 
.popup#alertVis[aria-hidden="true"]
  { visibility: hidden; }
 
 .popup > div {
   clear: both;
   text-align: right;
   margin-top: 5px;
 }
 
</style>
 
<script type="text/javascript">
<!--
var gFocusItem = null;
 
function doFocus() {
  try {
    if (gFocusItem != null) {
      gFocusItem.focus();
      gFocusItem=null;
    }
  } catch (error) {
    alert("DEBUG: error in doFocus()");
  }
}
 
var FOCUS_TEXT = "This div is created in the DOM as needed.  Focus is
set to it when it is displayed";
var NOFOCUS_TEXT = "This div is created in the DOM as needed. Focus has
NOT been set to it";
var counter = 0;
 
function createRemoveAlert(alertText, bGiveFocus)
{
  var popupDiv = document.getElementById("insertedAlert");
  if (popupDiv) {
    // Remove alert
    var divParent = document.getElementById("alertParent");
    divParent.removeChild(popupDiv);
    return;
  }
 
  // Create alert
  var popupDiv = document.createElement("div");
  var dataNode = document.createTextNode(alertText);
  popupDiv.appendChild(dataNode);
  var close = document.createElement("a");
  close.setAttribute("onclick", "createRemoveAlert();");
  close.setAttribute("href", "#");
  var closeText = document.createTextNode("close");
  close.appendChild(closeText);
  var closeDiv = document.createElement("div");
  closeDiv.appendChild(close);
  popupDiv.appendChild(closeDiv);
 
  // try parenting to a div on the page rather than document.body
  var divParent = document.getElementById("alertParent");
  divParent.appendChild(popupDiv);
  popupDiv.id = "insertedAlert";
  popupDiv.setAttribute("role", "alert");
  popupDiv.tabIndex = "-1";
  popupDiv.className = "popup";
 
  if (bGiveFocus) {
    gFocusItem = popupDiv;
    setTimeout("doFocus();", 0);
  }
  return false; // handled
}
 
function toggleAlert(alertId, bGiveFocus, contentId) {
  var alertDiv = document.getElementById(alertId);
  if (alertDiv.getAttribute("aria-hidden") == "true") {
    alertDiv.removeAttribute("aria-hidden");
  }
  else {
    alertDiv.setAttribute("aria-hidden", "true");
  }
  if (bGiveFocus == true) {
    gFocusItem = (contentId)? document.getElementById(contentId) :
alertDiv;
    setTimeout("doFocus();",0);
  }
}
-->
</script>
</head>
 
<body>
<p>Note: alerts should not get focus, but we include that in the testing
to ensure screen readers don't get confused if they are, because it may
be a common mistake.</p>
<p>Buttons to create different alerts: </p>
<div><u><a href onclick="createRemoveAlert(FOCUS_TEXT, true);"
style="cursor:hand">Create and Focus</a></u></div>
<div></div>
<div role="alert" tabindex="-1" class="popup" aria-hidden="true"
id="alertVis">
  <span>This popup is created as a div in the HTML content, rather than
being created in the DOM at
     the time of use. The visibility style is changed from
&quot;hidden&quot; to &quot;visible&quot;
        to hide and show it.
  </span>
  <div style="text-align:right;margin-top:10px;">
    <a href="javascript:toggleAlert('alertVis');">close</a>
  </div>
</div>
<div role="alert" tabindex="-1" class="popup" aria-hidden="true"
id="alertDisp">
  <span>This popup is created as a div in the HTML content, rather than
being created in the DOM at
     the time of use. The display style is changed from &quot;none&quot;
to &quot;block&quot;
        to hide and show it.
  </span>
  <div style="text-align:right;margin-top:10px;">
    <a id="closeLink"
href="javascript:toggleAlert('alertDisp');">close</a>
  </div>
</div>
<div id="alertParent">
</div>
</body>
</html>

 
____________________________________________________________

 


________________________________

From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org] On
Behalf Of Ryan Jean
Sent: 18 February 2009 18:05
To: w3c-wai-ig@w3.org
Subject: Popup Text Code Question



First, may I ask on here how to code something? I really don't know how
and I want help. I do have examples.

I want a link that will open and close a popup with text that a screen
reader will read. The top button on this URL is an example, but instead
of a button, I want a link:

http://codetalks.org/source/widgets/alert/alert.html

Sincerely,
Ryan Jean

Assistant IT Specialist

The Disability Network

Flint, MI

 


"This e-mail is intended for the recipient only.  If you are not the
intended recipient you must not use, disclose, distribute, copy, print,
or rely upon this e-mail. If an addressing or transmission error has
misdirected this e-mail, please notify the author by replying to this e-mail."

"Recipients should note that all e-mail traffic on MOD systems is
subject to monitoring and auditing."

Received on Thursday, 19 February 2009 10:10:11 UTC