Forum Moderators: open
Secondly I want to make the next version of my site completely keyboard-only accessible (if they do not have a mouse that is) and so I want to make these modular triggers execute on both onclick and onkeypress events. For clarification, the anchor has an id, and when the mouse or key is pressed on that element with the id, it then executes the function to change the targeted id's class.
I have a full fledged test case below. In the last attempt to get a jQuery event to work I had to use a function that is executed at window.onload. I've tried all sorts of combinations again without success to mimic the jQuery events and tried a few things I've found online without success. Guess I need more repetition to pick up this pattern.
Also could someone please explain (e) event? Can I use that or will onblur, onmouseup, onmouseover, and other undesired events trigger this? It's a little hard to reference "e" online through the search engines! ;)
- John
Test Case
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Case</title>
<script type="text/javascript">
//<![CDATA[// Class Changer
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}// Class Toggler
function toggle(id, classOne, classTwo)
{
identity=document.getElementById(id);
class_name = identity.className;
if (class_name == classOne) {
identity.className = classTwo;
} else {
identity.className = classOne;
}
}// Modularized Events
function init28() {
if (document.getElementById('divone')) {
// modularized class changer code goes here
}
if (document.getElementById('divtwo')) {
// modularized class toggler code goes here
}
} window.onload = init28;
////]]>
</script>
<style type="text/css">
a:link, a:visited {color: #fff;}
div {margin: 8px; padding: 8px;}
div.red {background: #a00;}
div.blue {background: #00a;}
</style>
</head><body>
<div id="divone" class="red">
<a href="#" id="anchor1" onclick="change('divone', 'blue');">Class Change To Blue</a><span> - </span><a href="#" id="anchor2" onclick="change('divone', 'red');">Class Change To Red</a>
</div><div id="divtwo" class="red">
<a href="#" id="anchor3" onclick="toggle('divtwo', 'blue','red');">Toggle between Red and Blue</a>
</div></body>
</html>
For example, you might have something like this with the Yahoo Event Utility:
function myCallback(e) {
// e, in this case, represents the event that triggered
// this callback method. In this case, it's the
// window.onload event.
}
YAHOO.util.Event.on(window,'load',myCallback);
I think this is probably what you're seeing.
I can't even get something like element.click {alert ('');} to work in Firefox for basic click testing!
- John
- John
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Case</title>
<script type="text/javascript">
//<![CDATA[// Class Changer
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}// Class Toggler
function toggle(id, classOne, classTwo)
{
identity=document.getElementById(id);
class_name = identity.className;
if (class_name == classOne) {
identity.className = classTwo;
} else {
identity.className = classOne;
}
}// Modularized Events
window.onload = function() {
document.getElementById("anchor1").onclick = function() {
change('divone', 'blue'); return false;
}
document.getElementById("anchor2").onclick = function() {
change('divone', 'red'); return false;
}
document.getElementById("anchor3").onclick = function() {
toggle('divtwo', 'blue','red'); return false;
}
}
////]]>
</script>
<style type="text/css">
a:link, a:visited {color: #fff;}
div {margin: 8px; padding: 8px;}
div.red {background: #a00;}
div.blue {background: #00a;}
</style>
</head><body>
<div id="divone" class="red">
<a href="#" id="anchor1" onclick="change('divone', 'blue');">Class Change To Blue</a><span> - </span><a href="#" id="anchor2" onclick="change('divone', 'red');">Class Change To Red</a>
</div><div id="divtwo" class="red">
<a href="#" id="anchor3" onclick="toggle('divtwo', 'blue','red');">Toggle between Red and Blue</a>
</div></body>
</html>
