JavaScript - Can't Replace Keycode For <space> With <tab>

Greetings,

I'm looking to add keycode Accessibility to an html + javascript interaction.

It's basically like tic tac toe where a user clicks on a cell (these cells are created by divs) and an 'O' appears in the cell.

I'd like to be able to tab through the cell fields and hit the spacebar to put the 'O' in the focused cell.

Here's an example of the html divs...

[code]
<div class="grid">
<div class="row row-1">
<div class="box true"><div class="inner" tabindex="0" id="orange"></div></div>
<div class="box true"><div class="inner" tabindex="0" id="orange"></div></div>
<div class="box true"><div class="inner" tabindex="0" id="orange"></div></div>
<div class="box"><div class="inner" tabindex="0" id="orange"></div></div>
<div class="clear"></div>
</div>
</div>
[code]

What I'm needing to know is where/what code goes into the .js to set up a keydown event.

Here's the .js being used...

[code]

$(document).ready(function() {
// init
$('#holder .section:first').addClass('current-slide');
$('#nav .btn:first').addClass('current-slide');
$('#holder .section').addClass('noanswer');
$('#holder .section').delay(300).animate({'top':'0px'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
// end init


$('.noanswer .box').hover(function() {
if ($(this).hasClass('selected')) {
$(this).addClass('box-highlight-hover');
} else {
$(this).addClass('box-highlight');
}
}, function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('box-highlight-hover');
} else {
$(this).removeClass('box-highlight');
}
});

// box functions
$('.noanswer .box').live('click',function() {
$(this).addClass('selected');
});


$('.noanswer .selected').live('click',function() {
$(this).removeClass('selected');
$(this).removeClass('box-highlight-hover');
});



// slide animations
$('#nav .mobility-btn').click(function() {
if ($('.section').is(':animated')) {
} else {
$('#nav .btn').removeClass('current-slide');
$(this).addClass('current-slide');
$('.section').css({'z-index':'5'});
$('#mobility').css({'top':'-350px','z-index':'10'});
$('#mobility').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
$('.section').removeClass('current-slide');
$('#mobility').addClass('current-slide');
}
});

$('#nav .vision-btn').click(function() {
if ($('.section').is(':animated')) {
} else {
$('#nav .btn').removeClass('current-slide');
$(this).addClass('current-slide');
$('.section').css({'z-index':'5'});
$('#vision').css({'top':'-350px','z-index':'10'});
$('#vision').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
$('.section').removeClass('current-slide');
$('#vision').addClass('current-slide');
}
});

$('#nav .hearing-btn').click(function() {
if ($('.section').is(':animated')) {
} else {
$('#nav .btn').removeClass('current-slide');
$(this).addClass('current-slide');
$('.section').css({'z-index':'5'});
$('#hearing').css({'top':'-350px','z-index':'10'});
$('#hearing').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
$('.section').removeClass('current-slide');
$('#hearing').addClass('current-slide');
}
});

$('#nav .cognitive-btn').click(function() {
if ($('.section').is(':animated')) {
} else {
$('#nav .btn').removeClass('current-slide');
$(this).addClass('current-slide');
$('.section').css({'z-index':'5'});
$('#cognitive').css({'top':'-350px','z-index':'10'});
$('#cognitive').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
$('.section').removeClass('current-slide');
$('#cognitive').addClass('current-slide');
}
});


// result
$('.answerSubmit').hover(function() {
$(this).addClass('answerSubmitHover');
}, function() {
$(this).removeClass('answerSubmitHover');
});

$('.answerSubmit').live('click',function() {
var parent = $(this).parents('.section');
var scoreParent = $(this).parent('.result');

// Calculate max score
var maxScore = parent.find('.box').length;
// Calculate actual score
var actualScore;
var selectednotTrue = 0;
var selectedCorrect = 0;
var notTrue = 0;
actualScore = parent.find('.box').length;
selectedCorrect = parent.find('.box.selected.true').length;
notTrue = parent.find('.box:not(.true)').length;
selectednotTrue = parent.find('.box.selected:not(.true)').length;

actualScore = notTrue - selectednotTrue + selectedCorrect;


scoreParent.find('.answer').html(actualScore);
scoreParent.find('.outOf').html(maxScore);

$(this).hide();
parent.find('.score').show();
parent.addClass('answer').removeClass('noanswer');
});
});

[code]


Please let me know if I'm unclear or if more code is necessary.
Thanks for any help you can give!

k

Hello, I am new to the forum and hoping to find some quick assistance. I have been struggling to fix this issue for quite sometime. My code is below

HTML / JAVASCRIPT
Code:

<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Darkapec Movie Player</title>
<script type="text/javascript" src="ss1.js">
</script>
</head>
<body>
<h1>Darkapec Movie Player</h1>
<b>Video location  :<?php require("movies.php");?>
<input type="button" onclick='ld()' value="Load" />
<div id="id1"></div>
<div id="nowt"></div>
    <script type="text/javascript">
    function ld(){
    document.write("<html><!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN\"http\:\/\/www.w3.org\/TR\/html4\/loose.dtd><html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\" lang=\"en\"><head><title>Darkapec Movie Player</title><script type=\"text\/javascript\" src=\"ss1.js\"><\/script><script type=\"text\/javascript\" src=\"fun1.js\"><\/script><\/head><body><h1>Darkapec Movie Player<\/h1><br/><embed type=\"application/x-vlc-plugin\" name=\"video1\" id=\"vlc\"  autoplay=\"yes\"  loop=\"no\"   width=\"640\"  height=\"480\"  rel="nofollow" target=\"/movies/"+document.getElementById("id4").value+"\"/><div id=\"nowt\"></div><div id=\"id1\"></div><div id=\"id2\"></div><script type=\"text\/javascript\" src=\"fun1.js\"><\/script><br/><input type=\"button\" onclick='pl()' value=\"Play\" /><input type=\"button\" onclick=\'ps()\' value=\"Pause\" /><input type=\"button\" onclick=\'st()\' value=\"Stop\" /><input type=\"button\" onclick=\'vlc.audio.toggleMute()\' value=\"Mute\" /><br/><b>width  :</b><input type=\"text\" id=\"i1\"/><br/><b>height :</b><input type=\"text\" id=\"i2\"/><br/><input type=\"button\" onclick=\'aspectRatio()\' value=\"Adjust Screen\" />");
     }
    </script>
<br/>
</body>
</html>

Second page of code is all PHP
Code:

<?php
$dir="/backup/Movies";
///$dir="C:/xampp/htdocs/php/backup/Movies";
$files = array();
if ($handle = opendir($dir)) {
	while (false !== ($file = readdir($handle)))
	{
		if ($file != "." && $file != ".." && $file != "index.php" && $file != "New Movies" && $file != "Icons" && $file != "Tv Shows")
		{
			$files[] = $file;
		}
	}
	closedir($handle);
}
sort($files)
?>
<form action="listen.php" method="post" name="table">
<select name="Movie" id="id4">
<p>
<?php
	$tmp = array();
	foreach ($files as $file) {
		$tmp[] = "<option value='$file'>$file</option>";
	}
	echo implode("\n",$tmp) . "\n";
?>
</p>
</select>
</form>

Basically the php gives the javascript a list of movies located in my directory, I am able to successfully launch any movie not containing a "space." I changed the code a little bit to allow for a "text input" and manually typed the name of a movie with %20 instead of a space and it worked. So I would like to modify the above code to do this automatically without visibly changing the movie titles. I am not sure where I should change the code.

Thanks in advance
Jake

i am trying to make an online graphing calculator with javascript. dont ask how because i dont know. but there is an annoying error in a do...while loop. although it should break out of the loop when the |'s (absolute value signs) are replaced with Math.abs( and ). here is the code.

Code:

var initec = function(){
    var rg = {
    }
    ;
    rg.matc = false;
    rg.i = 0;
    rg.change = function(equ){
        if (typeof(equ) != "string"){
            alert('Equation must be a string');
            return;
        }
         alert("starting equation: "+ equ);
        rg.i = 0;
        do{
            rg.matc = equ.match(/\|/);
            if(rg.i === 0){
                equ.replace(/\|/, " Math.abs(");
                rg.i = 1;
                alert("1 "+equ);
            }
            else {
                equ.replace(/\|/, " ) ");
                rg.i = 0;
                alert("0 "+equ);
            }
        }while(rg.matc) 
        alert("finished equation: " + equ);
    }
return rg;
}

rg=initec();
rg.change("|8/x+7|-2");

the last 2 lines and the alerts are for debugging. as you can see, it is not finished. but still, it should work.

Hi

I'm looking for a very simple script to replace one div with another. I've found a few but they seem overly complicated with features I don't need. I simply want to be able to click on a div and for it to be replaced with another div previously hidden. If someone could suggest a solution or point me in the right direction I'd really appreciate it.

Thanks

in the div class "done" it reads 13/34
i want to compare these to numbers like this

if (13 < 34){do something()}
else {return false;}

so i am trying to get each number by it self to compare with.

var did=m[1].getElementsByClassName("done")[1].innerText.replace(/\/.*/,"").value;
this line returns 13 correctly.

var need=m[1].getElementsByClassName("done")[1].innerText.replace(? ,"").value;
this ? the info that i need to get for the other number.
i know how to do it if it were a letter but can find the correct way being that it is a / instead.

Thx

I found a regular expression that will strip my string of every html tag...

var stripped = htmlStr.replace(/(<([^>]+)>)/ig,"");

Well, I also want it to strip every thing between parentheses, square brackets, and replace " &# 160;" with a space.

It would be really cool if you could explain how to do this as well, because the stuff in the above code after "replace" confuses me. I have no idea how that's working.

First of all, I don't want to replace text in a form, or on click.

I'm writing up a design document in HTML, and I need an area to display code.
The < and > tags won't show up, obviously, but to make it easier on the programmer, I don't want him to have to manually put in &lt; and &gt; for each time it shows up.

I am aware that JavaScript has a replace function, but I am not familiar with JavaScript quite yet.

Is there a way to have JavaScript find the < and > in a certain div, and replace it with &lt; and &gt; on load?

I would appreciate your help so much, Its been frustrating me.

Hi, I need function for replacing one string with some html tag (for example <div>something</div>) in web page. Tricky is that in this replacing I must ignore all text between <a> and </a>. It's look easy but I am not good in javascript.

I have a javascript that takes information from a form and recompiles that information into a readable shift report. The problem I am having is with returns in the textareas. I tried:

Code:

theReport = theReport.replace("
","<br>"

but that space puts the rest of the var on a different line and screws with the results. How can I replace a return with <br>?

document.write(str.replace(/(\+|\(|\)|.|-|\/ /g,''));

feeble attempt to remove '.' '(' ')' ' ' '-' '/'and '+'

Hi all,

I have this code:
Code:

<input type="hidden" value="update_cart" name="ca">
<input type="hidden" value="2" name="numcart">
<input type="submit" name="submit" value="Update Cart" class="inpSubmit">

I'd like to replace this:
Code:

<input type="submit" name="submit" value="Update Cart" class="inpSubmit">

with this:
Code:

<button>blabla<button>

How can I do?
I know something about unobtrusive javascript but I don't know how to do it.

Thank you very much

Code:

  dropDownPart.innerHTML = tmpInnerHTML;

how does this tmpInnerHTML gets filled :

Code:

for (var i = 0; i < arr.length ; i++)
{
        var arr1 = arr[i].split('|');
        id_tezaver = arr1[0];                  
         term = arr1[1]   
        // if  arr1[1] contains ',   then ewerything after that disapears inside term,
        // like "bird's eyes"  becomes  "bird"
        // how to handle that   ? 
       
        // bad example how I get to verify that the stuff is complete inside array
        // term = arr1[1].replace(/'/i, /oo/); 

}

I know how the replace method works, but I can't for the life of me figure out exactly what this replace function is doing... Can someone shed somelight for me? the g I *think* is a flag for global replacement...

Code:

replace(/\s/g, " ");

I know that *something* is being replaced by a non-blank space, but what?

How would you do a .replace for a Javascript if statment.

Building a shopping cart, at the moment I have 1 variable array. My JS gets values from hidden inputs when add to shopping cart is clicked. The JS then pushes them all into the array in order.

I've managed to get the js code to replace innerHTML and add the array to the HTML to show the products, quantity and totals in a table. However its only showing the last product, price, and total in the array in the table. I need to get it to do this:

Product: Quantity: Total:
Product1 1 1
Product2 2 2
Product3 3 3

So basically I think I need to have my 3 for statements then plus 2 to each i instead of i++ to print out the products but that still doesn't solve my problem with printing every product in a vertical list, same with quantity and same with total.

Heres the code

Code:

var cart= new Array();

function readInput(){
				
		var prd=document.test.prd.value;
		
		var prc=document.test.prc.value;
		
		var qty=document.test.amount.value;
		var total= prc * qty;
		
		cart.push( prd )
		cart.push( qty )
		cart.push( total );
		
		var lenp=cart.length;
		
		for(var i = 0; i<lenp-2; i++ ) {
		document.getElementById("product").innerHTML = cart[i];
		}
		for(var i = 0; i<lenp-1; i++ ) {
		document.getElementById("qty").innerHTML = cart[i];
		}
		for(var i = 0; i<lenp; i++ ) {
		document.getElementById("total").innerHTML = cart[i];
		}

}

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css\basic.css" />
<script language="JavaScript" src="test.js"></script> 
<title>Shopping Time</title>
<body>

<form name="test">
<input type="hidden" name="prd" value="Paper">
<p class="desc" value="Paper">
Product: Paper 1</p>
<p class="desc">
<input type="hidden" name="prc" value="1.99">
Price: £1.99</p>

<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></p>
<p class="submit">
<input type="button" onclick="readInput();" value="Add To Cart" />
</p>
</form>

<table border="1px solid black" rules="ALL" frame="void" class="cart" width="100%">
<tr>
<th>
<p class="cart">Product:</p>
</th>
<th>
<p class="cart">QTY:</p>
</th>
<th>
<p class="cart">Total:</p>
</th>
</tr>
<tr>
<td class="test">
<div id="product">
<p class="cart">Product:</p>
</div>
</td>
<td>
<div id="qty">
<p class="cart">QTY:</p>
</div>
</td>
<td>
<div id="total">
<p class="cart">Total:</p>
</div>
</td>
</tr>

</table>


</body>
</html>