I have created a user interface that has a working drag and copy in javascript. My problem is the div getting copied has a hidden div that i need to swap once they reach the dropzone. Upon dragging the visible div gets a new id but the hidden one doesn't and when i swap them it swaps to the hidden div in it's original position. Here is my javascript code:
These work the drag and copy functions.
function allowDrop(ev) {
/* The default handling is to not allow dropping elements. */
/* Here we allow it by preventing the default behaviour. */
ev.preventDefault();
}
function drag(ev) {
/* Here is specified what should be dragged. */
/* This data will be dropped at the place where the mouse button is released */
/* Here, we want to drag the element itself, so we set it's ID. */
ev.dataTransfer.setData("text/html", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("text/html");
/* If you use DOM manipulation functions, their default behaviour it not to
copy but to alter and move elements. By appending a ".cloneNode(true)",
you will not move the original element, but create a copy. */
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "newId"; /* We cannot use the same ID */
ev.target.appendChild(nodeCopy);
}
</script>
This function works the divs swap
<script type="text/javascript">
function SwapDivsWithClick(div1,div2)
{
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
if( d2.style.display == "none" )
{
d1.style.display = "none";
d2.style.display = "block";
}
else
{
d1.style.display = "block";
d2.style.display = "none";
}
}
</script>
Is there a way to drag the hidden div along with the visible one? Can the hidden div also be assigned a new number so it can be swapped?
Thank you
I managed to solve this little riddle. The divs swap when dragged into the drop zone there's no need to have them swap on a mouse click. Anyway here are the javascript functions that i used, i had to modify the drag and copy from the previous one I posted.
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
</script>
{{--Works the swap functions--}}
<script type="text/javascript">
function SwapDivsWithClick(div1,div2)
{
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
if( d2.style.display == "none" )
{
d1.style.display = "none";
d2.style.display = "block";
}
else
{
d1.style.display = "block";
d2.style.display = "none";
}
}
</script>
Here is 1 set of components incase it helps someone else:
<div id="swapper-two" style="display:none; padding:0px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600px" draggable="true" ondragstart="drag(event)" id="drag1">
<tr>
<td align="left" bgcolor="40374B" style="padding: 0px 0px 0px 60px;">
<img src="" valign="top" alt="" draggable="false" color: #ffffff; font-family: Helvetica Neue, Helvetica, Arial, sans-serif"
<td style="color:#ffffff; padding:0px 60px 5px 0px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 12px;" bgcolor="40374B" align="right" valign="bottom">
<p>My Account</p>
</td>
</tr>
</table>
</div>
<div class="img" draggable="true" ondragstart="drag(event)" id="drag9">
<div id="swapper-one" style="display:block; padding:0px;" >
<table align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="" draggable="true" ondragstart="drag(event)" id="drag1">
<tr>
<td align="center">
<img src="" draggable="false" alt="" width="610" height="270" id="img-one" />
</td>
</tr>
</table>
</div>
</div>
Related
I am doing the simple matching game. The game has multiple question. I am using drag and drop for matching. First of all, I'll drop the image element to one container, when I select another element and try to drop it into the same container, currently it's overwriting the existing element. I want to check the container, which already has the element. If it doesn't have, allow that to drop, otherwise prevent the drop.
Code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="manage/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Styles -->
<link href="css/style.css" rel="stylesheet">
<script src="manage/js/jquery-2.1.4.min.js"></script>
<style>
.left, .right {
float: left;
width: 100px;
height: 35px;
margin: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Matching the following</h2>
<div class = "container-fluid">
<div class="row">
<div class = "col-md-2">
Option A
</div>
<div class = "col-md-1">
<div class="left" id="left_1">
<img src="manage/images/login.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
</div>
<div class = "col-md-4">
</div>
<div class = "col-md-1">
<div id="right_1" class="right" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class = "col-md-2">
Option B Matching
</div>
</div>
<div class="row">
<div class = "col-md-2">
Option B
</div>
<div class = "col-md-1">
<div class="left" id="left_2">
<img src="manage/images/login.png" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31">
</div>
</div>
<div class = "col-md-4">
</div>
<div class = "col-md-1">
<div class="right" id="right_2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class = "col-md-2">
Option A Matching
</div>
</div>
</div>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var rightId = event.target.id;
console.log("before"+($("#"+rightId).children().length));
if($("#"+rightId).children().length == 0){
console.log($("#"+rightId).children().length);
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
console.log("after"+($("#"+rightId).children().length));
}
</script></body></html>
Screen Shot
I want to prevent the drop event, when container already has child elements. In the same time I need to rearrange the dropped elements, when any one container empty for swapping.
Actually i want to drag the image from left container to right container. before dropping the element to right container, i want to check if container already have another image which dropped before. if there is no image in container, allow to drop the image, or else prevent dropping the image.
Awaiting suggestions. Thanks in advance!
I think that can you check collision between elements and take decision you actions
follow the example link to see if there is a collision using vanilla javascript and jquery:
Vanilla JS Div Collision Detection
How to detect div collision in my case?
https://jsfiddle.net/jeanwfsantos/bp57zgrL/
<style>
#div1 {
width: 100px;
height: 100px;
border: 1px solid #aaaaaa;
padding: 10px;
}
.element {
width: 100px;
height: 100px;
}
</style>
<div
id="div1"
ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<div
class="element"
id="drag1"
style="background: blue;"
draggable="true"
ondragstart="drag(event)"
ondrag="dragMove(event)"></div>
<div
class="element"
id="drag2"
style="background: red;"
draggable="true"
ondragstart="drag(event)"
ondrag="dragMove(event)"></div>
<script>
const elements = document.querySelectorAll('.element')
let hasCollision = false
let offset = [0, 0]
function allowDrop(ev) {
ev.preventDefault()
}
function drag(ev) {
ev.dataTransfer.setData('text', ev.target.id)
offset = [
ev.target.offsetLeft - ev.clientX,
ev.target.offsetTop - ev.clientY
]
}
function drop(ev) {
ev.preventDefault()
const data = ev.dataTransfer.getData('text')
if (!hasCollision) {
ev.target.appendChild(document.getElementById(data))
}
}
function dragMove(e) {
hasCollision = Array.prototype.some.call(elements, d => {
if (d.id !== e.target.id) {
return isCollide(e, d)
}
return false
})
}
function isCollide(a, b) {
const aRect = a.target.getBoundingClientRect()
const bRect = b.getBoundingClientRect()
return !(
((a.clientY + offset[1] + aRect.height) < (bRect.top)) ||
(a.clientY + offset[1] > (bRect.top + bRect.height)) ||
((a.clientX + offset[0] + aRect.width) < bRect.left) ||
(a.clientX + offset[0] > (bRect.left + bRect.width))
)
}
</script>
I hope this helps you.
I think your real problem is that you've implemented allowDrop(event) as event.preventDefault() so a drop is always permitted.
Instead what you want to do is disallow a drop in a case where the target is already occupied. Try using the following implementation of allowDrop():
function allowDrop(event) {
var t = event.target;
// Find the drop target
while (t !== null && !t.classList.contains("target")) {
t = t.parentNode;
}
// If the target is empty allow the drop.
if (t && t.childNodes.length == 0) {
event.preventDefault();
}
return false;
}
Here's a fiddle that shows it in action. (I freely acknowledge I borrowed based on the previous answer. :)
let offset = [0, 0]
function allowDrop(ev) {
var t = ev.target;
while (t !== null && !t.classList.contains("target")) {
t = t.parentNode;
}
if (t && t.childNodes.length > 0) {
return false;
}
ev.preventDefault()
}
function drag(ev) {
ev.dataTransfer.setData('dragID', ev.target.id)
offset = [
ev.target.offsetLeft - ev.clientX,
ev.target.offsetTop - ev.clientY
]
}
function drop(ev) {
ev.preventDefault()
const data = ev.dataTransfer.getData('dragID')
ev.target.appendChild(document.getElementById(data))
}
.target {
width: 100px;
height: 100px;
border: 1px solid #aaaaaa;
padding: 10px;
}
.element {
width: 100px;
height: 100px;
}
<div class="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="element" id="drag1" style="background: blue;" draggable="true" ondragstart="drag(event)"></div>
<div class="element" id="drag2" style="background: red;" draggable="true" ondragstart="drag(event)"></div>
I was able to create a simple html5 tic tac toe game. I'm just having trouble on how to go about checking if three X or O's are on the same line to end the game. I though maybe I should compare the image source so I saved it to a multidimensional array. Doesn't seem to be 100% so if anyone can help I had appreciate it!. I have the following code:
http://jsfiddle.net/AnthonyFigi/v3vfcLws/5/
`
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/* Selects all the id's starting with 'div'*/
.holder #drag1, .holder #drag2{
background-color:rgba(204, 204, 204, 0.7);
transition:opacity 0.3s ease-in 0s;
}
.holder #drag2{
opacity:0.0;
}
.holder{
clear:both;
padding:3em;
}
[id^="div"] {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left;
transition:background-color 0.3s linear 0s;
}
[id^="row"]{
clear:both;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
/* The default handling is to not allow dropping elements. */
/* Here we allow it by preventing the default browser behaviour. */
ev.preventDefault();
}
function drag(ev) {
/* Here we specify what should be dragged. */
/* This data will be dropped once the mouse button is released.*/
/* Here,we set the data type 'text' also we want to drag the element itself, so we set it's ID.(ev.target.id) */
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
/* Here we get the id of the image and store it is data*/
var data=ev.dataTransfer.getData("Text");
/* Here we 'append' (add after) them image to the target element*/
/* We get the element to image by id stored in var data, then we only COPY it from DOM*/
/* The image is NOT moved in DOM*/
ev.target.appendChild(document.getElementById(data).cloneNode(true));
/* Here we get the image then return it's id as a String.*/
/* We then check to see whether it is 'drag1' OR 'drag2'*/
/* Then change the background colour of the target respectively*/
if(document.getElementById(data).id == "drag1"){
ev.target.style.backgroundColor="red";
}else{
ev.target.style.backgroundColor="yellow";
}
ev.preventDefault();
ev.target.removeAttribute("ondragover");
document.getElementById(data).removeAttribute("ondragstart");
document.getElementById(data).setAttribute("draggable","false");
switchTurn();
checkRows();
}
var turn = 1;
function switchTurn(){
if(turn == 1){
document.querySelector('.holder #drag1').style.opacity="0.0";
document.querySelector('.holder #drag2').style.opacity="1.0";
turn++;
}else{
document.querySelector('.holder #drag1').style.opacity="1.0";
document.querySelector('.holder #drag2').style.opacity="0.0";
turn--;
}
}
var array = [[], [], []];
var rowNum = 0;
function checkRows(){
var rows = ["row1", "row2", "row3"];
var timesRan = 0;
for(i=0;i < 3;i++){
var img = document.getElementById(rows[rowNum]).getElementsByTagName('div')[i].getElementsByTagName('img')[0].src;
array[rowNum].push(img);
if(timesRan < 1){
array[rowNum].shift();
timesRan++;
}
console.log(array);
}
rowNum++;
}
</script>
<title>JavaScript Drag & Drop Tic-Tac-Toe</title>
</head>
<body>
<p>Drag the X and O images into the tic-tac-toe board:</p>
<div id="row1">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div id="row2">
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div id="row3">
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="holder">
<img id="drag1" src="X.png" draggable="true"
ondragstart="drag(event)" width="75" height="75" />
<img id="drag2" src="O.png" draggable="true"
ondragstart="drag(event)" width="75" height="75" />
</div>
</body>
</html>
`
Your scoping was the problem. Make sure to check console when you're testing your code. Handlers you have specified in HTML were not reachable because they were referring to global scope. Here's a working fiddle:
http://jsfiddle.net/2frkjcu7/
allowDrop = function(ev) {
...
}
drag = function(ev) {
...
}
drop = function(ev) {
...
}
I just changed declarations of your handlers to be in global scope. Good luck with your game.
As far as field representation goes, a 2d array should be a good fit:
var field = [];
//initialize field
for(var y = 0; y<3; y++){
field[x] = new Array(3);
}
//helper methods to check mark and set it
function getMark(x,y){
return field[y][x];
}
function setMark(x,y,mark){
field[y][x] = mark;
}
I have a list of things with links to click for more information which use anchor tags to move down the page. Since there is quite a bit of additional information I have it hidden in expandable/collapsable sections.
So far all I've managed to come up with is an expand collapse on the section itself. I know basically nothing about Javascript so what I have include is some stuff I pieced together from some other sites and research.
I would like for the 'click more' anchor tag link to expand the section automatically when clicked, but something that also collapses it similar to what I have now.
Here is the js I managed to pull together
<script type="text/javascript">
function toggle_visibility(tbid,lnkid) {
if (document.all) {
document.getElementById(tbid). style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";
}
else {
document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table";
}
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
.hangingIndent {
text-indent: -24px;
padding-left: 24px;
}
#tbl1 {display:none;}
#lnk1 {
border:none;
background:none;
width:85px;
}
</style>
And here is an example of the body
<body style="background-color: #FFFFFF; margin: 20;">
<p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;" class="hangingIndent">
<input type="checkbox">
<strong>Item one</strong><br />
<em>For more information about Item one click here!</em>
</p>
<br />
<table width="800px" border="0" align="center" cellpadding="4" cellspacing="0">
<tr height="1">
<td bgcolor="#333333" colspan="3"></td>
</tr>
<tr bgcolor="#EEEEEE" height="15">
<td>
<strong><a id="Item1">Item one</a></strong>
</td>
<td bgcolor="#EEEEEE" align="right">
<input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');">
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl1">
<tr>
<td colspan="3">
<p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;">Lots of extra information about Item one</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
</body>
Thanks for your help!
jquery may be your best route, and in particular the slideToggle or show and hide functions.
In addition, have a peek at jQuery ui accordion
A jquery accordion may be your best route
to hide elements:
document.getElementById(idOfElement).style.display="none"
to show them:
document.getElementById(idOfElement).style.display="block"
lets make a function
function toggleElementDisplay(elementID){
element = document.getElementById(elementID);
if(element.getPropertyValue("display") == "block"){
element.style.display="none";
} else {
element.style.display="block";
}
}
To use it do it like this
<body>
<div id="click" onClick="toggleElementDisplay('stuff');">Toggle</div>
<div id="stuff">Hello</div>
<script>
function toggleElementDisplay(elementID) {
var element = document.getElementById(elementID),
style = window.getComputedStyle(element),
display = style.getPropertyValue("display");
if (display == "block") {
element.style.display = "none";
} else {
element.style.display = "block";
}
}
</script>
</body>
Here is a demo to help
Here is my code. I have tried everything I can think of. I have tried using just div ID's and have now tried classes. Nothing seems to work. I just want the number 2 not to be visible if there is no entry beside it. It doesn't matter if it is in a table or not.
Thanks.
<style type="text/css">
<!--
.leftone {
float: left;
height: auto;
width: auto;
}
.rightone {
float: left;
height: auto;
width: auto;
}
.lefttwo {
float: left;
height: auto;
width: auto;
}
.righttwo {
float: left;
height: auto;
width: auto;
}
-->
</style>
<table width="400" border="0" cellpadding="0" cellspacing="3" id="tableONE">
<tr>
<td width="200" height="50"><div class="leftone">1.)</div></td>
<td width="200" height="50"><div class="rightone">The Number One</div></td>
</tr>
<tr>
<td width="200" height="50"><div class="lefttwo">2.)</div></td>
<td width="200" height="50"><div class="righttwo"></div></td>
</tr>
</table>
<p> </p>
<script type="text/javascript">
<!--
function shownumbers() {
var myNum1 = '[.rightone]';
if(myNum1 != ''){
document.getElementById('.leftone').style.display = "block";
}
else if(myNum1 == ''){
document.getElementById('.leftone').style.display = "none";
}
var myNum2 = '[.righttwo]';
if(myNum2 != ''){
document.getElementById('.lefttwo').style.display = "block";
}
else if(myNum2 == ''){
document.getElementById('.lefttwo').style.display = "none";
}
}
//-->
</script>
You cannot use getElementById with classes. Also, you don't need the '.' or '#' when using these methods in javascript. Below should do what you are asking. Although if there is only ever 1 item of class 'rightone' and 'leftone' you should use ID's.
var myNum1 = document.getElementsByClassName('rightone')[0].innerHTML;
if(myNum1 != ''){
document.getElementsByClassName('leftone')[0].style.display = 'block';
} else if(myNum1 == ''){
document.getElementsByClassName('leftone')[0].style.display = 'none';
}
A more elegant solution would be:
HTML:
<table width="400" border="0" cellpadding="0" cellspacing="3" id="tableONE">
<tr>
<td><div class="left">1.)</div></td>
<td><div class="right">The Number One</div></td>
</tr>
<tr>
<td><div class="left">2.)</div></td>
<td><div class="right"></div></td>
</tr>
</table>
JS:
var right = document.getElementsByClassName('right');
for(var i=0;i<right.length;i++){
if(!right[i].innerHTML){
right[i].parentNode.parentNode.getElementsByClassName('left')[0].style.display = 'none';
} else {
right[i].parentNode.parentNode.getElementsByClassName('left')[0].style.display = 'right';
}
}
Kinda similar to Jason's, but I spent the time so I'mma post it. ;)
JSFiddle: http://jsfiddle.net/H3UNH/1/
HTML:
<table id="tableONE">
<tr>
<td width=50>1.)</td>
<td >The Number One</td>
</tr>
<tr>
<td>2.)</td>
<td></td>
</tr>
</table>
(I do still like the width attribute for cells in tables; it can be moved to CSS but this is one of those exceptions for me where the markup and presentation can have a tiny bit of overlap. Move everything else to CSS. Your mileage may vary.)
CSS:
td { padding: 3px; text-align:left; height: 50px;}
JavaScript:
function shownumbers() {
var rows = document.getElementsByTagName('tr');
for(var i=0,len=rows.length;i<len;i++) {
var _this = rows[i];
var rowCells = _this.getElementsByTagName('td');
if(rowCells[1].innerHTML == "") {
_this.style.display = "none";
}
}
}
shownumbers();
(for the purpose of the demo, I just separately call shownumbers. If you want it to be automatic, make it self-invoking. Otherwise call it from wherever it makes sense)
I think the more important lesson here isn't the JavaScript, actually. ;) I understand that not everyone is writing perfect JavaScript (heck, mine's not perfect either). But you really need to understand the purpose of CSS and classes in general to write good maintainable markup and presentation for the web! I hope that doesn't sound too condescending or anything; it wasn't meant to be.
By using the :empty selector.
var els = document.querySelectorAll('td div:empty'),
i = els.length,
el;
for(;i--; ) {
el = els[i];
do {
el = el.parentNode;
} while ( el.nodeName != 'TR' )
el.style.display = 'none';
}
Fiddle: http://jsfiddle.net/uAUt8/
to save space, I would like to consolidate the username and logut buttons at the top of web template into one link. The username would be visible and when you hover over it as in stack overflow or click as in gmail or fb, you have option to logout or do other account related things. Ideally, would like to do this in css or javascript without jquery overhead.
Can anyone recommend simple javascript or other technique as I am very inexperienced in javascript. Don't need complicated full blown drop down menu. It should be something like below, but below is unpredictable...shows menu when page loads etc. Thx.
<html>
<head>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table>
<tr>
<td onmouseover="showMenu()" >username</td>
</tr>
</table>
<div id="box1" onmouseout="hideMenu()">
Logout<br>
</div>
</body>
</html>
UPDATE- this should fix the "jumping" problem:
<html>
<head>
<style type="text/css">
.username {
width: 100px;
border: 1px solid #ff0000;
padding: 3px;
text-align: center;
position: relative;
display: inline-block;
}
#box1 {
display: none;
text-align: center;
position: absolute;
background-color: #ccc;
}
</style>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table>
<tr>
<td colspan=3 align="left">
<img src=":">
</td>
<td colspan=6 valign="bottom" align="right">Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 Menu7
<div class="username" onmouseover="showMenu();" onmouseout="hideMenu();">Username
<span id="box1">
Logout
</span>
</div>
</td>
</tr>
<tr>
<td colspan=9>
<hr color="red">
</td>
</tr>
</table>
</body>
</html>
The problem is that absolute positioning doesn't work the same inside of a span than as it does a div. So I had to change the "username" span to a div and use absolute position for the "box1" span. You could even change the "box1" span to a div as well so it occupies the whole width possible of the "username" div. Let me know how this one goes!
Here is the version where it jumps up. If you put position: absolute; in the style tag the menu extends one more cell to the right past the other columns...
.username {
}
#box1 {
display: none;
}
</style>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table><tr>
<td colspan=3 align="left"><img src=":"></td>
<td colspan=6 valign="bottom" align="right">Menu1 Menu2 Menu3 Menu4 Menu5
Menu6 Menu7 <span class="username" onmouseover="showMenu();"
onmouseout="hideMenu();">Username<span id="box1">
Logout
</span>
</span></b></td></tr>
<tr><td colspan=9><hr color = "red"></td></tr>
</table>
</body>
</html>