472,805 Members | 1,104 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,805 software developers and data experts.

DOM CSS display:none/block switching hover problem

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<!-- The desired performance for this gem would be to:
1. click on table cells
2. edit in INPUT
3. click away, data presented in table cell.

2.0 The table cells have hover highlighting.

**** Problem: IE
When INPUT is switched to display:block through CSS change,
the INPUT will disappear if another hover is activated.
<style type="text/css">
table.rolly a { display:block;
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;

..vis { visibility:visible}
input.vis {display:block;}
..hid { visibility:hidden }

..vis { display: block}
input.vis {display:block; border:double 4px #ff0}
..hid { display: none }
<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

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();
<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)">
<input type="text" class="hid" style="position:absolute;
<td><a href="#nojump"><div>1-2</div></a></td>
<td><a href="#nojump"><div>1-3</div></a></td>
<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>

Jul 23 '05 #1
0 5761

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

by: Dan R Brown | last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div...
by: Jon W | last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title>rolly</title> <!-- The desired performance for this gem would be to: 1. click on table cells 2. edit in INPUT 3....
by: fleemo17 | last post by:
For increased accessibility, I've replaced "display:none" with the Off-Left method of hiding my CSS drop-down menus because the Jaws screen reader doesn't see any of the menus hidden with...
by: Erwin Moller | last post by:
Hi group, I have this obscure problem that really needs to be fixed, but I am out of ideas. Because the original script is very big, I'll try to summarize its functionality. Setup: - many...
by: Jake Barnes | last post by:
Imagine I've this block of HTML: <p>Alex Schein Mailing List <input type="checkbox" name="newslettersToUse" value="133156"> (<a href="mcControlPanel.php"...
by: Erwin Moller | last post by:
Hi group, I have a rather big page with many (databasedependent) pieces of HTML. My question boils down to the following problem (simplified): Considering the folowwing piece of HTML: ...
by: VK | last post by:
Hi, given a block element with some content and a link, is it possible to set this element display to none by CSS only? It has to be done only once. It is an absolutely positionned element so...
by: libsfan01 | last post by:
function switch_display(switchme) { var el = document.getElementById(switchme); el.style.display = (el.style.display == 'none')? '' : 'none'; } im using this function to switch the display on...
by: cssExp | last post by:
hello, Rather than going on a wild explanation on what's the the problem, it'll be much quicker and easier if i let you look at it yourself, so I'll post my page source (actual contents taken out,...
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: lllomh | last post by:
How does React native implement an English player?
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.