|
JavaScript - Killing A Keydown
A third-party script i have no control over is interfering with my script's arrow key functions, so i wanted to find a way to nullify that script's use of the keys.
After blindly punching my keyboard, I came up with this: Code: <script>
function killArrows(e){
if({ 37:1, 38:1, 39:1, 40:1 }[e.which||e.keyCode])
window.event.keyCode = 0;
}
</script>
<textarea onkeydown="killArrows(event)"></textarea>
It works great in IE (I'm still even able to use the arrow keys in the textarea without triggering the external script's arrow functions - though I'm not sure why), but doesn't work in Firefox. Any idea why? Does FF not recognize the keyCode property? Thanks for any help. ~gyz Similar TutorialsI want to open a new tab "http://www.example.com/" when the user presses a key. How can this be done?
Hi, I have requirement to move focus to previous button when onkeydown event occurs on tabout from current button. Below is snippet of code. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script language="Javascript"> function button3(event) { var keydown = event.keyCode; alert(keydown); if(keydown == 9){ document.all.b2.focus(); return false; } } </script> </head> <body> <FORM NAME="form1"> <INPUT id="b1" TYPE="BUTTON" name= "b1" VALUE="Button 1"> <INPUT id="b2" TYPE="BUTTON" name= "b2" VALUE="Button 2"> <INPUT id="b3" TYPE="BUTTON" name= "b3" VALUE="Button 3" onkeydown="button3(event)"> <INPUT id="b4" TYPE="BUTTON" name= "b4" VALUE="Button 4"> </FORM> </body> </html> when the focus is on b3 and if i give tabout then focus should go to b2. But its not working. Can you plz help Siva Hi, i have this jquery script on my photo galery page, it detects left and right key down on keyboard and acts uppon key down. Is there any way to deactivate it when I click on a text area that is located below each photo? this must be a common issue I think... Textareas id="comment_" Code: <script type="text/javascript">
$(document).keydown(function(e){
if (e.keyCode == 37) {
window.location = "photo.php?phot=$prev_file_p&p_id=$prev_file"
return false;
}
else if (e.keyCode == 39) {
window.location = "photo.php?phot=$next_file_n&p_id=$next_file"
return false;
}});
</script>
I was roughing out a feature I want to add to my site in notepad with no doctype declared. I got it just how I wanted, then realized it didn't work in IE. I added a doctype, it validates at xhtml strict, but it killed IE, while it started adding round corners in IE which wasn't working with no doctype...but now my JS isn't working... So I lost functionality of the JS while adding the round corner style that wasnt working when the JS was mostly working... FF works fine every damn way of course.... I uploaded it to http://pugetsoundtraining.com/Portfolio/spriteTest.html Also when it was functioning, the lower set of icons background wasn't showing. You can load that link ^^ in FF to see exactly what I'm going for....it works in ff css: Code: body {
margin: 0px;
font-family: "Georgia", serif;
}
/* Give headings their own font */
h1, h2, h3, h4 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/* Main content area */
#content {
position:absolute;
top:70px;
left:500px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* Header/footer boxes */
.wideBox {
clear: both;
text-align: center;
border: 1px solid #333;
}
.wideBox h1 {
font-weight: bold;
margin: 0px;
color: #666;
font-size: .5em;
}
/* Slots for final card positions */
#cardSlots {
margin: 50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */
#cardPile {
// margin: 0 auto;
background: #ffd;
}
#cardSlots, #cardPile {
width: 250px;
height: 120px;
border: 3px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Individual cards and slots */
#cardSlots div, #cardPile div */
float: left;
-moz-width:35px;
-moz-height:35px;
width: 35px;
height: 35px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 5 5 5 5px;
// background: #fff;
}
#cardSlots div:first-child, #cardPile div:first-child {
margin-left: 0px;
}
#cardSlots div.hovered {
background: #aaa;
}
#cardSlots div {
border-style: dashed;
}
#cardPile div {
background: #666;
color: #fff;
font-size: 5px;
text-shadow: 0 0 3px #000;
}
#cardPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
#card1.ui-draggable{background:url(iconSprite2.png) 0px 0px no-repeat;}
#card2.ui-draggable{background:url(iconSprite2.png) -36px 0px no-repeat; }
#card3.ui-draggable{background:url(iconSprite2.png) -73px 0px no-repeat; }
#card4.ui-draggable{background:url(iconSprite2.png) -108px 0px no-repeat; }
#card5.ui-draggable{background:url(iconSprite2.png) -143px 0px no-repeat; }
#card6.ui-draggable{background:url(iconSprite2.png) -178px 0px no-repeat; }
#card7.ui-draggable{background:url(iconSprite2.png) -213px 0px no-repeat; }
#card7.ui-draggable{background:url(iconSprite2.png) -250px 0px no-repeat; }
#card8.ui-draggable{background:url(iconSprite2.png) -285px 0px no-repeat; }
#card9.ui-draggable{background:url(iconSprite2.png) -319px 0px no-repeat; }
#card10.ui-draggable{background:url(iconSprite2.png) -353px 0px no-repeat; }
/* "You did it!" message */
#successMessage {
position: absolute;
left: 580px;
top: 250px;
width: 0;
height: 0;
z-index: 100;
background: #dfd;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
#displayCardNum {
height:400px;
width:500px;
position:absolute;
top:80px;
right:25px;
}
#score {
width:200px;
font-size:25px;
height:50px;
position:absolute;
top:300px;
right:300px;
}
#status {
width:300px;
font-size:25px;
height:50px;
position:absolute;
top:150px;
right:200px;
}
html: Code: <!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>
<title>XHTML 1.0 Strict validated</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content">
<div id="cardPile"> </div>
<div id="cardSlots"> </div>
<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>
<div id="reset">
<h2>Reset</h2>
<button onclick="init()">Reset?</button>
</div>
</div>
<div id="displayCardNum">Error Msg: </div>
<div id="score">Sco <span id="myTextToShow"></span>
</div>
<div id="status"></div>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</body>
</html>
javascript: Quote: var correctCards = 0; var points = 0; $( init ); function init() { // Hide the success message $('#successMessage').hide(); $('#successMessage').css( { left: '580px', top: '250px', width: 0, height: 0 } ); //Card Game Below // Reset the game correctCards = 0; points=0; document.getElementById('score').innerHTML = "Sco "+ points; var status; $('#cardPile').html( '' ); $('#cardSlots').html( '' ); // Create the pile of shuffled cards var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; numbers.sort( function() { return Math.random() - .5 } ); for ( var i=0; i<10; i++ ) { $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( { containment: '#content', stack: '#cardPile div', cursor: 'move', revert: true } ); } //Create sprite background offset for card slots var pos = [ '0px 0px', '-36px 0px', '-73px 0px', '-108px 0px', '-143px 0px', '-178px 0px', '-250px 0px', '-285px 0px', '-319px 0px', '-353px 0px' ]; // Create the card slots var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ]; for ( var i=1; i<=10; i++ ) { $('<div style="background:url(iconSpriteGrey.png)' + pos[i-1] +' no-repeat;>"' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( { accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop } ); } } //Handle the card drop function handleCardDrop( event, ui ) { var slotNumber = $(this).data( 'number' ); var cardNumber = ui.draggable.data( 'number' ); // If the card was dropped to the correct slot, // change the card colour, position it directly // on top of the slot, and prevent it being dragged // again if ( slotNumber == cardNumber ) { ui.draggable.addClass( 'correct' ); ui.draggable.draggable( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); correctCards++; win(); //alert('you just dropped ' + cardNumber + " in the correct spot, slot number: " + slotNumber); } else if(slotNumber != cardNumber){ updateCards(); fail(); }; function updateCards() { document.getElementById('displayCardNum').innerHTML = "Sorry but you tried to place a<b> " + cardNumber + " </b>into a<b> " + slotNumber + "</b> socket";} function win() { points+=5; status=' Win 5 points!'; showScore(); $('#status').fadeIn("slow"); $('#status').fadeOut("slow"); } function fail() { points-=3; status=' lose 3 points!'; showScore(); $('#status').fadeIn("slow"); $('#status').fadeOut("slow"); } function showScore() { if(points < 0) {points = 0;} document.getElementById('score').innerHTML = "Sco "+ points; document.getElementById('status').innerHTML="Status: <b>" + status + "</b>"; } // If all the cards have been placed correctly then display a message // and reset the cards for another go if ( correctCards == 10 ) { $('#successMessage').show(); $('#successMessage').animate( { left: '380px', top: '200px', width: '400px', height: '100px', opacity: 1 } ); } } Code: function splook(val){
return speciesDB.queryBy(function(row){
return row.data.species_id == val;
}).itemAt(0).data.speciesDB;
}
and the speciesDB Code: {success:true,rows:[{"species_id":"1","species_idx":"1","species":"Boa Constrictor"},{"species_id":"2","species_idx":"2","species":"Ball Python"},{"species_id":"3","species_idx":"3","species":"Reticulated Python"},{"species_id":"4","species_idx":"4","species":"SriLanka Python"},{"species_id":"5","species_idx":"5","species":"Blood Python"},{"species_id":"6","species_idx":"6","species":"Burmese Python"}]}
I need to take val and match it with the data and return species. I just can't figure it out though! Thanks! I created a method for displaying an object's properties: Code: renderfunction = false;
function showProperty (object, property)
{
document.write ('<td class="type">' + (typeof object[property]) + '</td>'
+ '<td class="name">' + property + '</td>');
document.writeln('<td class="value">' +
(
(typeof object[property] != 'function')
? object[property]
:(
(property != 'showProperties')
? (
renderfunction
? object[property]()
: ('<span class="self">NOT RENDERED</span>')
)
: ('<span class="self">THIS</span>')
)
)
+ '</td>');
document.writeln('<td class="hasOwnProperty" >'
+ (
object.hasOwnProperty(property)
? "Local"
: "Inherited"
)
+ '</td>');
if (typeof object[property] == 'function')
{
document.writeln ('<td class="function">' + object[property] + '</td>');
}
else
{
document.writeln ('<td class="function"> </td>');
}
}
As long as renderfunction = false, the object is fine coming out of this function. However, if I change renderfunction to true, all my properties become undefined. Why isn't this working as I expect it to? How should I fix it? Thanks in advance, -Brian. |
|||||||