using css to dispay block of data on mouseover or focus…

@chris32680Dec 27.2007

Hi all.
forgive me if this information could be found some place else, but i’ve tried searching and i guess my search terms aren’t specific enough to return something i can use.

Here is my predicament..

I am creating a web page that creates a (potentially) large report (with the option to update some values via a form) in table format. The data itself is pulled from a database that is very dynamic. so sometimes the table may have 10 rows, other times it may have 100. In order to keep from cluttering up the table with TONS of information, I thought it would be great if i reserved a section of the page for ‘additional info’ that when the user moused over the tablerow or if the one input box on the row was focused, that the reserved section of the page would show the additional information and when they moused out or took the focus away, then it disappeared.

Does anyone have an example of this? I don’t have a problem ‘reserving’ the space for the block. I’m just not sure how i can hide/unhide the data on demand.

Thanks again for your help.

to post a comment

CSS

4 Comments(s) _↴

@TJ111Dec 27.2007 — #Here's how i've done something similar in the past. I set it up so that every other table row is set to "display:none", then when a link is clicked it changes the style of the row beneath it to "display:block" to display all the necessary information. I don't think this can be done in pure CSS (thank IE for that), but it would only take some minor javascript.

@chris32680authorDec 27.2007 — #ok...

i've sort of gotten it going ok, but i think i may not be 100% clear on the difference between the id's and the classes.

here is the (extremely simplified) code:

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"&gt;
 &lt;title&gt;test&lt;/title&gt;
 
 &lt;STYLE TYPE="text/css"&gt;
 
 body {font-family: Arial, Helvetica, sans-serif; font-size: 10pt;}
 
 TABLE {border-collapse: collapse; background-color: white;}
 
 #top_section {
 position:absolute; top:0; left:0; width:100%; height:200px; overflow:auto;
 background:#eaeaea;
 }
 
 #content {
 position: fixed; top:200px; left:0; width:100%; height:100%; overflow:auto;
 background:#CCCCCC;
 }
 
 div.hidediv {display:none;}
 div.showdiv {display:block;
 position:absolute; left: 100px; top: 5px; width: 100px; height:100px; overflow:auto;
 background: yellow;
 }
 
 &lt;/STYLE&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="top_section"&gt;
 &lt;select name="test_select_list"&gt;
 &lt;option&gt;&lt;/option&gt;
 &lt;option style="color: red; font-family: arial;"&gt;test1&lt;/option&gt;
 &lt;option&gt;test2&lt;/option&gt;
 &lt;option&gt;test3&lt;/option&gt;
 &lt;option&gt;test4&lt;/option&gt;
 &lt;option&gt;test5&lt;/option&gt;
 &lt;option&gt;test6&lt;/option&gt;
 &lt;/select&gt;
 &lt;/div&gt;
 &lt;div id="content"&gt;
 &lt;table style="text-align: left; width: 100px;" border="1"
 cellpadding="2" cellspacing="2"&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;div id="yoyo" class="hidediv"&gt;
 &lt;p&gt;Hello World&lt;/p&gt;
 &lt;/div&gt;
 &lt;td&gt;this&lt;/td&gt;
 &lt;td&gt;is&lt;/td&gt;
 &lt;td&gt;a&lt;/td&gt;
 &lt;td&gt;&lt;input name="forma" onfocus="document.getElementById('yoyo').className='showdiv'" onblur="document.getElementById('yoyo').classNam
 e='hidediv'"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;sample&lt;/td&gt;
 &lt;td&gt;table.&lt;/td&gt;
 &lt;td&gt;I will&lt;/td&gt;
 &lt;td&gt;&lt;input name="formb"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;add&lt;/td&gt;
 &lt;td&gt;some&lt;/td&gt;
 &lt;td&gt;humongous stuff later&lt;/td&gt;
 &lt;td&gt;&lt;input name="formc"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

the only problem is, the yellow box is showing up in the lower 'block' and i want it to show in the upper one. Now, i know if i just take the 'hello world' div section outside 'content' section and put it in the 'top_section' part, it will show up up there.

but this is a problem.

programming wise, the 'content' div will be declared, and then a pl/sql loop will generate all the table rows, as well as each row's additional information. I won't be able to get that row's addition information outside of the content div so that it shows up in the top 'block'.

does that make any sense at all?

Thanks again

@TJ111Dec 27.2007 — #I was thinking something like this:

If you generate the table so the end result is something like:

<i>
 </i>&lt;table&gt;
 &lt;tr class="basic_info"&gt;
 &lt;td&gt;test&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr class="more_info"&gt;
 &lt;td&gt;more info&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;

and had this for your CSS:

<i>
 </i>tr.more_info {
 display:none;
 }

Then all you would need for your javascript is something like:

<i>
 </i>window.onload = function() {
 var trAll = document.getElementsByTagName("tr");
 var trShowHide = new Array();
 
 for(var i=0; i&lt;trAll.length; i++;) {
 
 <i>    </i>if (trAll[i].className == "basic_info" &amp;&amp; trAll[i+1].className == "more_info")  {
 <i>    </i>  trShowHide[] = new Array(trAll[i], trAll[i+1]);
 }
 
 for (var j=0; j&lt;trShowHide.length; j++) {
 trShowHide[j][0].onclick = function() {
 trShowHide[j][1].style.display = "block";
 }
 trShowHide[j][1].onclick = function() {
 this.style.display = "none";
 }
 }
 }

@chris32680authorDec 28.2007 — #thanks. i'll give that a shot.

Also in #CSS _↴

CSS in IFRAME is ignored the difference between without asterisk :not(p) and *:not(p)Space between lines in <code> block

Success!

Help @chris32680 spread the word by sharing this article on Twitter...

Tweet This

using css to dispay block of data on mouseover or focus…

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

using css to dispay block of data on mouseover or focus…

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴