Hi there fellow programmers!
I Want to be able to type in to the boxes how much px i want my div to move. But it won't move and I cant see whats wrong with my code. Can someone with fresh eyes spot the problem?
Any help is much appreciated!
Here's the code so far:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title> javascript</title>
<style>
#changeme {
background-color: lightblue;
position: absolute;
}
</style>
<script>
var $Rob = {};
$Rob.moveUpp = 0;
$Rob.moveLeft = 0;
$Rob.elementid = "";
$Rob.move = function(elementid, movex, movey)
{
$Rob.moveUpp = movey;
$Rob.moveLeft = movex;
$Rob.elementid = elementid;
$Rob.movesoft();
}
$Rob.movesoft = function() {
var elem = document.getElementById($Rob.elementid);
if ($Rob.moveUpp > 0) {
elem.style.top = (parseInt(elem.style.top) + 1) +
"px";
$Rob.moveUpp--;
} else if ($Rob.moveUpp < 0) {
elem.style.top = (parseInt(elem.style.top) - 1) +
"px";
$Rob.moveUpp++;
}
if ($Rob.moveUpp != 0) {
setTimeout($Rob.movesoft, 100);
}
}
</script>
</head>
<body>
<h1> Dynamic changes </h1>
<form>
<p>Move right:</p> <input value="0" type="text" id="moveRight" />
<p>Move down: </p> <input value="0" type="text" id="moveDown" />
<input type="button" value="Move" onClick="$Rob.move(document.getElementById('changeme'),parseInt(document.getElementById('moveRight').value),parseInt(document.getElementById('moveDown').value));" />
</form>
<div id="changeme" style="top: 100px;left: 100px;"> Hello </div>
</body>
</html>
All the best
I love Stackoverflow and its members!
cheers
// Mcgayjver
You're doing:
$Rob.move(document.getElementById('changeme'), x, y).
When you should just be doing:
$Rob.move('changeme, x, y)
Because $Rob.move expects an elementID string as a first parameter, not an actual HTMLElement.
I created a table using JavaScript, but it doesn't render using my css. so how can I make it work? actually i need more help, my idea is to create a screen that has one button and once you click on it a menu which is a table of one column starting at the top of the screen and end at the end of the screen should be showing. the table would be scrollable and each row has text (url text) with no url line under the text, so when you click on it the page open in all of the screen behind the table and the button. the button should be always showing (but it disappears when i click on it).
the main.js file is
function makeTableHTML() {
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
var myArray = [ [ "Name, http://www.google.com" ],
[ "Name, http://www.google.com" ] ];
var result = '<table width = "300">';
for (var i = 0; i < myArray.length; i++) {
result += "<tr><td>";
if (i < 10) {
result += "0" + i + " ";
} else {
result += i + " ";
}
result += '<a href="' + myArray[i][0] + '">';
result += myArray[i][1] + "</a>";
result += "<td></tr>";
}
result += "</table>";
document.write(result);
document.getElementById("channelsmenu").classList.toggle(result);
}
function hideTableHTML() {
var x = document.getElementById('channelsmenu');
x.style.display = 'none';
}
and my html is
<!DOCTYPE html>
<html>
<head>
<title>5Star-IPTV</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/main.js"></script>
</head>
<body>
<div>
<table>
<tr>
<td>
<div id="channelsmenu" class="dropdown-content"></div>
</td>
<td class="buttons-col"><input type="image"
src="channels-menu.png" class="buttons" alt="channels menue"
onMouseOver="this.src='channels-menu-1.png'"
onMouseOut="this.src='channels-menu.png'" onclick="makeTableHTML()" /></td>
<td class="buttons-col"><input type="image"
src="return-button.png" alt="return button" class="buttons"
onMouseOver="this.src='return-button-1.png'"
onMouseOut="this.src='return-button.png'" onclick="hideTableHTML()" /></td>
</tr>
</table>
</div>
</body>
</html>
and this is the css
table {
width: 100%;
border: 1px solid black;
background-color: #808080;
}
tr {
width: 100%;
align: right;
}
th, td {
text-align: right;
} background-color: #808080;
}
.buttons-col {
text-align: center;
width: 90px;
padding-top: 5px;
}
in HTML you open "th" and close it as "tr". Secondly, please learn to write/format your code properly - it'll be easier to read your code and to help you.
Besides, use the < script > tag at the end of the HTML or run your JS in the function on event DOMContentLoaded
I've run into some issue graphically representing some of my data via J Query in my Hangman game- right now I'm working on the last part of my play(space) function to take into account if there is more than one correctly guessed letter in a word & to display all instances of that letter- I've made a function to loop through the array created out of the split word, I'm getting the correct indexes of those letters, I'm just kind of stuck as to how to display these letters at these indexes in my table via J Query correctly & I'm kind of stuck... I've been console.log - ing my data & I'm getting the correct data (the letter and the indexes of that letter in my array), I now just need to figure out how to display these letters in my html table at their correct indexes corresponding to the table (I'm feeling kind of stuck & wondering if this is possible to salvage- I'm sure there must be a way to do it, I just haven't figured it out- I'm not sure if I should be creating a dictionary object to pair the correct letter w/it's indexes in the array to use .each() to loop through to graphically represent in my table or if there's a way to graphically represent it w/the data as is). I'd really appreciate any help.
Here's my code:
JS/JQuery:
var wordBank = ["modernism", "situationalist", "sartre", "camus", "hegel", "lacan", "barthes", "baudrillard", "foucault", "debord", "baudrillard"];
var word = [];
var wrongGuesses = [];
var rightGuesses = [];
var images = [gallows, head, body, armL, handL, armR, handR, legL, footL, legR, footR];
var y = 0;
var i = 1;
$(document).ready(function() {
function randomWord() {
var random = Math.floor(Math.random() * wordBank.length);
var toString = wordBank[random];
console.log(toString);
word = toString.split("");
console.log(word);
}
randomWord();
function wordSpaces() {
for (var i = 0; i < word.length; i++) {
$(".word-spaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
}
}
wordSpaces();
function play(space) {
//indexOf()==inArray()
var lIndex = jQuery.inArray(space, word);
console.log(lIndex);
if (lIndex == -1) {
wrongGuesses.push(space);
var wrong = wrongGuesses.length;
console.log('wrong ' + wrong);
$('.wrongLetters tbody tr td:nth-of-type(' + wrong + ')').text(space);
// $(this).css("background-color", "#ff4500").fadeIn(300).delay(800).fadeOut(300);
$(images[i - 1]).hide();
$(images[i]).show();
i++;
$("html").css("background-color", "#ff4500").fadeIn(300).delay(300).fadeOut(300).fadeIn(100);
console.log(word);
} else {
console.log(word + "word");
console.log(space + "space");
function getInstances(word,space) {
var indexes = [], w;
for(w=0; w<word.length;w++ )
if (word[w] === space)
indexes.push(w);
return indexes;
}
console.log(word + "word");
console.log(space + "space");
var indexes = getInstances(word, space);
console.log(indexes);
rightGuesses.push(space);
console.log(rightGuesses);
$(".word-spaces tbody tr td:nth-of-type(" + indexes + ")").css('color', 'black');
// rightGuesses.push(space);
}
}
$(".form-control").keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == 13) {
var space = $(this).val();
play(space);
$(this).val('');
endGame();
return false;
}
});
function endGame() {
if (wrongGuesses.length >= 10 || rightGuesses.length == word.length) {
$("body").css("background-color", "#ff4500");
$(".form-control").prop('disabled', true);
}
}
});
html:
<header>
<h2 style="font-family:paganini;">
Hangman
</h2>
</header>
<main style="font-family:paganini;">
<figure class="hangman">
<img src="https://i.imgur.com/gSxmkUf.gif" id="gallows" align="middle top">
<img src="https://i.imgur.com/Mb4owx9.gif" id="head" align="middle top" style="display:none;">
<img src="https://i.imgur.com/xkXISte.gif" id="body" align="middle top" style="display:none;">
<img src="https://i.imgur.com/U44ReUi.gif" id="armL" align="middle top" style="display:none;">
<img src="https://i.imgur.com/49kkaQF.gif" id="handL" align="middle top" style="display:none;">
<img src="https://i.imgur.com/tqtNazW.gif" id="armR" align="middle top" style="display:none;">
<img src="https://i.imgur.com/ydnz7eX.gif" id="handR" align="middle top" style="display:none;">
<img src="https://i.imgur.com/dlL7Kek.gif" id="legL" align="middle top" style="display:none;">
<img src="https://i.imgur.com/3AQYFV9.gif" id="footL" align="middle top" style="display:none;">
<img src="https://i.imgur.com/j9noEN7.gif" id="legR" align="middle top" style="display:none;">
<img src="https://i.imgur.com/kJofX7M.gif" id="footR" align="middle top" style="display:none;">
</figure>
<table class="word-spaces">
<caption>Your Word is: </caption>
<tbody>
<tr>
</tr>
</tbody>
</table>
<br/>
<fieldset class="guessIn">
<legend>
Guess a Letter
</legend>
<label for="form">Type a Letter then Click <b>Enter</b></label>
<input type="text" id="form" class="form-control" placeholder="guess">
</fieldset>
<table class="wrongLetters">
<caption>Letters Guessed Wrong:</caption>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</main>
<footer>
</footer>
Note that when you make a selection you get the following error in the console:
Uncaught Error: Syntax error, unrecognized expression: :nth-of-type
That's because of this line:
$(".word-spaces tbody tr td:nth-of-type(" + indexes + ")").css('color', 'black');
Since a correct guess can set multiple indexes, you'll need to use a loop for the correct guesses like this:
$.each(indexes,function(e,i){
$(".word-spaces tbody tr td:nth-of-type(" + i + ")").css('color', 'black');
})
Additionally, I think this line is wrong:
$(".word-spaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
You probably meant to use the value of i like this:
$(".word-spaces > tbody > tr").append('<td data-idx='+i+'>' + word[i] + '</td>')
(though you dont really need the data-idx attribute at all since it will always be the same as the child index within the tr tag and you're using that to get the cells anyway)
Here is a working jsFiddle
I figured this out on my own (I sort of panicked) like this: first I created a .forEach loop to loop through the word, then the issue was the difference btwn array concatenation in JS & html/css... I creates the index variable, and added one & also an additional plus sign outside of the parenthesis... So, this solves the problem:
indexes.forEach(function(index) {
$(".word-spaces tbody tr td:nth-of-type(" + (index + 1) + ")").css('color', 'black');
});
Ok, it does everything now. In addition to the first version's features, version 2 has the following:
If a letter is guessed wrong more than once, an alert will inform the player of doing so and ignore it.
If a correct guess has more than one letter, all letters will be exposed.
Improved endGame() function with a message, but it needs one more fix, I'll leave that one to you ;-)
Plunker
<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>35387864</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<style>
html {
font: 400 16px/1.428 'Verdana';
}
main {
padding: 20px;
}
footer,
header {
padding: 5px 20px;
}
footer {
border-top: 2px ridge #666;
}
header {
border-bottom: 2px ridge #666;
}
.wordSpaces,
.wrongLetters {
border: 1px ridge grey;
table-layout: fixed;
border-collapse: collapse;
margin: 10px 0;
}
.wordSpaces td,
.wrongLetters td {
border: 2px inset #BBB;
width: 3ch;
height: 1.5rem;
padding: 1px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: white;
}
.wrongLetters td {
color: red;
}
.form-control {
width: 10ch;
text-align: center;
}
ul {
font-size: 1rem;
list-style: none;
padding-left: 0;
}
.msg {
font-size: 0;
color: #000;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2> Hangman </h2>
</header>
<main>
<figure class="hangman"> <img src="https://i.imgur.com/gSxmkUf.gif" id="gallows" align="middle top"> <img src="https://i.imgur.com/Mb4owx9.gif" id="head" align="middle top" style="display:none;"> <img src="https://i.imgur.com/xkXISte.gif" id="body" align="middle top" style="display:none;"> <img src="https://i.imgur.com/U44ReUi.gif" id="armL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/49kkaQF.gif" id="handL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/tqtNazW.gif" id="armR" align="middle top" style="display:none;"> <img src="https://i.imgur.com/ydnz7eX.gif" id="handR" align="middle top" style="display:none;"> <img src="https://i.imgur.com/dlL7Kek.gif" id="legL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/3AQYFV9.gif" id="footL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/j9noEN7.gif" id="legR" align="middle top" style="display:none;"> <img src="https://i.imgur.com/kJofX7M.gif" id="footR" align="middle top" style="display:none;"> </figure>
<table class="wordSpaces">
<caption>
Your Word is:
</caption>
<tbody>
<tr>
</tr>
</tbody>
</table>
<br/>
<h1 class="msg">
</h1>
<fieldset class="guessIn">
<legend> Guess a Letter </legend>
<label for="form">Type a Letter then Click <kbd>Enter</kbd></label>
<input type="text" id="form" class="form-control" placeholder="guess" maxlength="1" required/>
</fieldset>
<table class="wrongLetters">
<caption>
Letters Guessed Wrong:
</caption>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</main>
<footer>
<ul>
<li>Hangman Gameplay in JavaScript</li>
<li>jsFiddle</li>
</ul>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
var wordBank = ["modernism", "situationalist", "sartre", "camus", "hegel", "lacan", "barthes", "baudrillard", "foucault", "debord", "baudrillard"];
/*var wordBank = ["xxxbnvkllyyybns"];*/
var word = [];
var wrongGuesses = [];
var rightGuesses = [];
var images = [gallows, head, body, armL, handL, armR, handR, legL, footL, legR, footR];
var img = 1;
$(document).ready(function() {
function randomWord() {
var random = Math.floor(Math.random() * wordBank.length);
var toString = wordBank[random];
console.log(toString);
word = toString.split("");
console.log(word);
}
randomWord();
function wordSpaces() {
for (var i = 0; i < word.length; i++) {
$(".wordSpaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
}
}
wordSpaces();
function play(letter) {
var wIdx = jQuery.inArray(letter, word);
var wrong = wrongGuesses.length;
if (wIdx === -1) {
if (wrong === 0) {
wrongGuesses.push(letter);
$('.wrongLetters tbody tr td:first-of-type').text(letter);
hangman();
} else {
for (var j = 0; j < wrong; j++) {
if (wrongGuesses[j] === letter) {
alert('The "' + letter + '" has already beem played.\nPlease try again.');
return true;
}
console.log('wrong' + wrong);
}
wrongGuesses.push(letter);
$('.wrongLetters tbody tr td:nth-of-type(' + (wrong + 1) + ')').text(letter);
hangman();
}
} else {
for (var w = 0; w < word.length; w++) {
if (word[w] === letter) {
W = w + 1;
$(".wordSpaces tbody tr td:nth-of-type(" + W + ")").css("color", "black");
rightGuesses.push(letter);
}
}
}
}
$(".form-control").keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == 13) {
var letter = $(this).val();
play(letter);
$(this).val('');
endGame();
return false;
}
});
function hangman() {
$(images[img - 1]).hide();
$(images[img]).show();
img++;
$("html").css("background-color", "#ff4500").fadeIn(300).delay(300).fadeOut(300).fadeIn(100);
}
function endGame() {
if (rightGuesses.length == word.length) {
$("body").css("background-color", "rgba(0, 185, 41, .3)");
$(".msg").text(word + " is correct!\nYou win!").css("font-size", "24px");
$(".form-control").prop('disabled', true);
} else if (wrongGuesses.length === 10) {
$("body").css("background-color", "rgba(227, 0, 0, .3)");
$(".msg").text(word + " was the answer.\nYou lose.").css("font-size", "24px");
$(".form-control").prop('disabled', true);
} else return false;
}
});
</script>
</body>
</html>
I've got a code, a math table coder actually.. If anybody presses the button, the function is called and is running.. But when i click the button, the table is coming on a new page instead in the same page..
<!doctype html>
<html>
<head>
<title>Tafel Trainer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section id="content">
<p>Wilt u de tafels leren? Klik op de knop oefenen</p>
<button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()';>Tafel oefenen!</button>
<div id="1">
<script type='text/javascript'>
function oefenen(){
var num = prompt("Zet een cijfer neer", "0");
var num1 = parseInt(num);
for(i= 1; i< 11; i++) {
document.writeln("<table border='1'><tr><td>" + i + " x " + num1 + " = " + i * num1 + "<br/></td></tr></table>");
}
}
</script>
</div>
</section>
</body>
</html>
I've already tried to do it with document.getElementByID('div1').innerHTML = i; But that code also didn't work, im sure its a beginners fault but what :)?
Thanks in advance!
You will have a lot more control over what you are doing if you have a div placeholder for your table eg
function oefenen(){
var num = prompt("Zet een cijfer neer", "0");
var num1 = parseInt(num);
var table = document.getElementById("tablebody");
for(var i= 1; i< 11; i++) {
var td = document.createElement("td"); //create TD
td.innerHTML = i + " x " + num1 + " = " + (i * num1);
var tr = document.createElement("tr");
tr.appendChild(td); //add TD to the TR
table.appendChild(tr); //add TR to the table
}
//show the placeholder
document.getElementById("placeholder").style.display = "";
}
<section id="content">
<p>Wilt u de tafels leren? Klik op de knop oefenen</p>
<button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()';>Tafel oefenen! </button>
<div id="1"> <!-- I'm not sure what you use this div for -->
</div>
<div id="placeholder" style="display:none;"> <!-- Placeholder area -->
<table border="1" id="tablebody"></table>
<div>
</section>
Notice also how I var the i in the loop - otherwise you create a reference to i at the window-level, rather than just scoped to the function.
Also, the use of createElement may look long-winded - but when you come to creating mark-up of any complexity it is much preferred to setting innerHTML and concatenating strings etc. It is certainly easier to trace what is going on and break sections out into other functions.
Works ok here. ## EDITED after above comments about wanting it under the button
function oefenen() {
var num = prompt("Zet een cijfer neer", "0");
var num1 = parseInt(num);
for (i = 1; i < 11; i++) {
document.getElementById('results').innerHTML+=("<tr><td>" + i + " x " + num1 + " = " + i * num1 + "<br/></td></tr>");
}
}
<section id="content">
<p>Wilt u de tafels leren? Klik op de knop oefenen</p>
<button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()' ;>Tafel oefenen!</button>
<table border="1" id=
"results">
</table>
</section>
code as per your requirement to print the multiplication table for required number ....
<!doctype html>
<html>
<head>
<title>Tafel Trainer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section id="content">
<p>Wilt u de tafels leren? Klik op de knop oefenen</p>
<button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()' ;>Tafel oefenen!</button>
<br /> <br />
<div id="math">
</div>
</section>
<script>
function oefenen() {
var num = prompt("Zet een cijfer neer", "0");
var num1 = parseInt(num);
for (i = 1; i < 11; i++) {
document.getElementById('math').innerHTML+=(num1 + " x " + i + " = " + i * num1 + "<br/>");}
}
</script>
</body>
</html>
"If you execute the document.write() method on a loaded HTML document, all HTML elements will be overwritten" says w3schools
I think it is better to use innerHTML
I have created a simple tooltip custom tag in ColdFusion that has worked great in IE quirks mode. But now we're moving towards cross-browser support and the placement script is not working correctly when Firefox is put into strict mode. The code is designed to place the tooltip immediately below the element that the user is hovering over, but in strict mode the tooltip is instead appearing about 12-13 pixels too high.
Could someone please tell me why this is occuring? Is the 'top' being reported incorrectly for the hover element, or is absolute positioning working incorrectly for the tooltip element?
Below is some simplified test code that shows the problem; remove the 'DOCTYPE' tag to make it work correctly. Note that this works correctly on IE8 in both quirks mode and standards mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="common/css/standard.css" media="screen">
<link rel="stylesheet" type="text/css" href="common/css/standard_projector.css" media="projection">
<title>OTIS Shell</title>
<script>
var stillOver = 0;
function tipShowHide(tipID, deed) {
for (i=1; i<=numTips; i++) {
if (i != stillOver) {
document.getElementById('ToolTip' + i).style.visibility = 'hidden';
document.getElementById('ToolTip' + i).style.display = 'none';
}
}
if (stillOver == tipID) {
if (deed == 1) {
tipTop = getRealTop(document.getElementById('ToolTipParent' + tipID)) + document.getElementById('ToolTipParent' + tipID).offsetHeight;
tipLeft = getRealLeft(document.getElementById('ToolTipParent' + tipID));
tipTop = getRealTop(document.getElementById('ToolTipParent' + tipID)) + document.getElementById('ToolTipParent' + tipID).offsetHeight;
document.getElementById('ToolTip' + tipID).style.top = tipTop + 'px';
document.getElementById('ToolTip' + tipID).style.left = tipLeft + 'px';
document.getElementById('ToolTip' + tipID).style.visibility = 'visible';
document.getElementById('ToolTip' + tipID).style.display = 'block';;
} else {
stillOver = 0;
document.getElementById('ToolTip' + tipID).style.visibility = 'hidden';
document.getElementById('ToolTip' + tipID).style.display = 'none';
}
}
}
function tipOver(tipID, tipDelay) {
stillOver = tipID;
setTimeout("tipShowHide(" + tipID + ", 1)", tipDelay);
}
function getRealLeft(el) {
if (arguments.length==0)
el = this;
xPos = el.offsetLeft;
tempEl = el.offsetParent;
while (tempEl != null){
xPos += tempEl.offsetLeft;
tempEl = tempEl.offsetParent;
}
return xPos;
}
function getRealTop(el) {
if (arguments.length==0)
el = this;
yPos = el.offsetTop;
tempEl = el.offsetParent;
while (tempEl != null){
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}
var numTips = 1;
</script>
</head>
<body>
<DIV ID="ToolTip1" style="z-index:999; position:absolute; top:0px; left:0px; visibility:hidden; display:none; width:685px; color:#000000; border:1px solid #000000; background-color:#ffffee;" >
<table style="width:200px;">
<tr valign="top">
<td style="width:350px;">
<span style="text-decoration:underline; font-weight:bold;">Test Stuff</span><br>
Test text
</td>
</tr>
</table>
</DIV>
<SPAN ID="ToolTipParent1" ONMOUSEOVER="tipOver(1, 1000);" ONMOUSEOUT="tipShowHide(1, 2);">
<div id="dynaKeyDiv" align="left" class="tableControlHeaderDiv" style="width:#tableWidth#px;">
<table id="dynaKeyTable" border="1" class="tableControlHeader" cellpadding="2" cellspacing="0" style="width:#tableWidth#px;">
<tr>
<td style="width:100%; font-weight:bold;">
Test Element
</td>
</tr>
</table>
</div>
</SPAN>
</body>
</html>
It's invalid to have a div inside a span. You should use a validator to check for those kinds of errors.
If you use a div for the ToolTipParent1 element, your problem goes away.