Home | Contact Us | FAQ | Search & Site Map | Link to Us
Sign In | Join | Other 45 Sites in Network
Home
Discussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2004



Tip: Looking for answers? Try searching our database.

display:none/block switching, hover probem

Thread view: 
Enable EMail Alerts  Start New Thread
Thread rating: 
Jon W - 30 Dec 2004 22:32 GMT
This is a small table with hover on the table cells.
The first cell is setup to switch from div element to
input element by use of display:block/none. In IE, onclick
the input element is displayed correctly but it disappears if
another hover is triggered.

Any thoughts?
Thanks,Jonny

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>rolly</title>
<style type="text/css">
<!--
table.rolly a { display:block;
width:100%;height:100%;background-color:#ccccff}
table.rolly a:link {}
table.rolly a:visited {}  
table.rolly a:hover   {  background-color:#ccffff; }
table.rolly a:active {}
/* ie cluge: makes a clickable inside td */
table.rolly a div {width:100%;height:100%}
/* no hover */
table.rollypause a { display:block;
width:100%;height:100%;background-color:#ccccff}

.vis { visibility:visible;z-index: 9}
input.vis {display:block;}
.hid { visibility:hidden }

/*
.vis { display: block}
input.vis {display:block; border:double 4px #ff0}
.hid { display: none }
*/
-->
</style>
<script type="text/javascript">
///////////////////
function InpEdOn(A){
/////////////////////

// max 1 INPUT in A
var Inpy = A.getElementsByTagName("INPUT")[0];
var Divtext = A.getElementsByTagName("DIV")[0];
Inpy.className = "vis";
Inpy.value = Divtext.firstChild.nodeValue+ " ";
// not working in NN71
Inpy.focus();
Inpy.select();
}

/////////////////////
function InpEdOff(Inp){
/////////////////////

var Divtext = Inp.parentNode.getElementsByTagName("DIV")[0];
var Tagtxt = new Array();

Inp.className = "hid";
Tagtxt = Inp.value;
Divtext.firstChild.nodeValue = Tagtxt.toString();
}
//-->
</script>
</head>
<body>
<form name="formy" onsubmit="return false;">
<table style="width:100%"  class="rolly" border="5">
<tr><td style="width:33%">
      <div style="display:block; position:relative;">
          <a href="#nojump" class="vis"   onclick="InpEdOn(this)">
      <div>&nbsp;</div>
      <input type="text" class="hid" style="position:absolute;
top:150px;left:150px;height:2em"
        onblur="InpEdOff(this)"/>
      </a>
   </div>
    </td>
   <td><a href="#nojump"><div>1-2</div></a></td>
 <td><a href="#nojump"><div>1-3</div></a></td>
</tr>
<tr><td><a href="#nojump"><div>2-1 </div></a></td>
 <td><a href="#nojump"><div>2-2</div> </a></td>
 <td><a href="#nojump"><div>2-3</div> </a></td>
</tr>
</table>
</form>
<div>1-1</div>
</body>
</html>

</body>
</html>
gosubi@yahoo.com - 31 Dec 2004 00:13 GMT
Extra::::
The problem seems to be the hover buffer.  The cell is changed with
hover on.  When it moves off the pre hover buffer is redrawn.
Is there a way to shut-off the hover for current A node?
 
Sign In
Join
My Latest Posts
My Monitored Threads
My Blog
My Photo Gallery
My Profile
My Homepage

Start New Thread
Enable EMail Alerts
Rate this Thread



©2009 Advenet LLC   Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.