Wie fasse ich meine Klassen zusammen?

[Nik]

Hallo,

der Titel des Threads stimmt so nicht ganz, aber mir fällt nicht ein, wie ich mein Problem hätte überschreiben können.

Problemstellung:

Ich habe eine Tabelle, in die ich dynamisch ein Layer einfügen will und zwar jeweils links unterhalb einer Tabellenzelle der jeweiligen Zeile.

--------------------------------------------------------------------------------
 Cell1   |     Cell2 ...     |                          |              ***     |
--------------------------------------------------------------------------------
 Cell1   |     Cell2 ...     |                          |  Klick --->  ***     |
-------------------------------------------------------------|------------------
 Cell1   |     Cell2 ...     |                          |+---|-----+   ***     |
---------------------------------------------------------|--DIV----|-----------
                                                         +---------+

Die Grafik soll ungefähr zeigen, was ich will. Bei Klick auf *** soll schräg unterhalb der angeklickten Zelle ein Layer (DIV) geöffnet werden.

Meine Frage:

Wie definiere ich den Layer und wo in der Tabelle notiere ich den überhaupt? Die Tabelle ist übrigens KEIN Design, sie enthält tabellarische Daten.

Nik

[1UnitedPower]

Die Grafik soll ungefähr zeigen, was ich will. Bei Klick auf *** soll schräg unterhalb der angeklickten Zelle ein Layer (DIV) geöffnet werden.

Wieder ein Fall für das details-Element (mdn).

Wie definiere ich den Layer und wo in der Tabelle notiere ich den überhaupt?

In der betroffenen Tabellenzelle. Positinierung dann mit position: absolute;

[Nik]

Wieder ein Fall für das details-Element (mdn).

Gute Idee. Aber ab welcher Version unterstützen die Browser das?

Und außerdem wüßte ich trotzdem gerne, wie man das vor HTML5 gemacht hätte?

Nik

[Rolfi]

ola Nik,

Gute Idee. Aber ab welcher Version unterstützen die Browser das?

IE, FX und Opera noch garnicht, Safari ab Version 6 und Chrome ab 12. Daher rate ich ab diesen Tag schon zu nutzen.

mfg,
Rolfi

[Nik]

IE, FX und Opera noch garnicht, Safari ab Version 6 und Chrome ab 12. Daher rate ich ab diesen Tag schon zu nutzen.

Hi Rolf,

in diese Richtung dachte ich auch.

Daher bleibt aber meine Grundfrage auch bestehen.

Gruß, Nik

[1UnitedPower]

IE, FX und Opera noch garnicht, Safari ab Version 6 und Chrome ab 12. Daher rate ich ab diesen Tag schon zu nutzen.

Target the standard not your browser.

[Gunnar Bittersmann]

@@Rolfi:

nuqneH

IE, FX und Opera noch garnicht, Safari ab Version 6 und Chrome ab 12. Daher rate ich ab diesen Tag schon zu nutzen.

Oder mit Polyfill.

Oder eben nicht, weil es in der HTML5-Spec als „feature at risk“ ausgewiesen ist, also durchaus auch wieder aus dem Standard verschwinden kann.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Rolfi!

Daher rate ich ab diesen Tag schon zu nutzen.

Es handelt sich um ein Element. Beachte den Unterschied. Imho das Tag, obwohl laut wiktionary beides möglich ist. Der Duden meint auch 'das'.

Matthias

[Der Martin]

Hallo,

Daher rate ich ab diesen Tag schon zu nutzen.
Es handelt sich um ein Element. Beachte den Unterschied.

ACK.

Imho das Tag, obwohl laut wiktionary beides möglich ist. Der Duden meint auch 'das'.

Bei der Eindeutschung von Fremdwörtern oder dem Gebrauch fremdsprachiger Wörter in deutschen Sätzen ist die Frage nach dem Genus oft schwierig zu beantworten; oft gibt es mehrere Ansichten darüber, was richtig ist.

Beim Begriff "Tag" würde ich aber auch ganz stark das Neutrum empfehlen (also "das Tag"), um ihn von "der Tag" als Zeiteinheit abzugrenzen.

Ciao,
 Martin

[Rolfi]

ola Matthias,

Es handelt sich um ein Element. Beachte den Unterschied.

Das ist bisher die beste Darstellung die ich dazu gesehen habe. - Ich war aber noch mit dem Kopf bei der Überschrift gewesen "<details>", ist natürlich richtig, das gesamtheitlich zu betrachten und nicht nur einen Tag.

Für eure Mühe: ein kleiner D A N K :-)

Schönen Tag noch,
Rolfi

[Matthias Apsel]

Om nah hoo pez nyeetz, Rolfi!

Es handelt sich um ein Element. Beachte den Unterschied.

Das ist bisher die beste Darstellung die ich dazu gesehen habe.

Danke.

Für eure Mühe: ein kleiner D A N K :-)

Danke.

Matthias

[Jörg Reinholz]

Und außerdem wüßte ich trotzdem gerne, wie man das vor HTML5 gemacht hätte?

Früher hat man in etwa solche Späße betrieben: (Das ist jetzt mal "sehr grob zurecht gezimmert" und sollte nicht "in jedem Detail" so einfach übernommen werden!)

<html>  
<head>  
<title>Test</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<style type="text/css">  
  
th, td {  
   width:10em;  
   padding:.3em;  
}  
  
th {  
   background-color:blue;  
   color:#fff;  
}  
  
td {  
   background-color:#ddd;  
}  
  
td.details {  
    display:none;  
}  
  
#box {  
    display:none;  
    position:absolute;  
    background-color:#fff;  
    padding:.3em;  
    margin-top:1em;  
    margin-left:2em;  
    box-shadow: 3px 3px 5px 6px #ccc;  
    border-radius:.3em;  
    max-width:200px;  
}  
  
  
.closer {  
   text-align:right;  
   background-color:blue;  
   color:#fff;  
   margin:-.3em;  
   margin-bottom:.3em;  
   padding:.1em;  
}  
  
.closer span {  
   background-color:#fff;  
   color:black;  
   border-radius:.1em;  
   padding-left:.5em;  
   padding-right:.5em;  
}  
  
</style>  
<script type="text/javascript">  
  
function LayerPosition (Ereignis) {  
    //alert(Ereignis.pageX + "px");  
    var box=document.getElementById("box");  
    box.style.left = Ereignis.pageX + "px";  
    box.style.top = Ereignis.pageY + "px";  
  
}  
document.onmouseup = LayerPosition;  
  
function show_details(str) {  
   var box=document.getElementById("box");  
   box.innerHTML='<div class="closer"><span>x</span></div>' + document.getElementById(str).innerHTML;  
   box.style.display="block";  
   //document.onmouseup = false;  
}  
  
  
</script>  
</head>  
<body >  
<table id="test" onload=LayerPosition(this)>  
   <tr>  
       <th>Spalte 1</th><th>Spalte 2</th>  
   </tr>  
   <tr>  
      <td onclick="LayerPosition(this); show_details('D_1_1', this)">Foo 11111111</td><td class='details' id='D_1_1'>Ganz wichtige Erläuterung zu Foo 11111111</td>  
      <td onclick="LayerPosition(this); show_details('D_1_2', this)">Bar 11111111</td><td class='details' id='D_1_2'>Ganz wichtige Erläuterung zu Bar 11111111</td>  
   </tr>  
   <tr>  
      <td onclick="LayerPosition(this); show_details('D_2_1', this)">Foo 22222222</td><td class='details' id='D_2_1'>Ganz wichtige Erläuterung zu Foo 22222222</td>  
      <td onclick="LayerPosition(this); show_details('D_2_2', this)">Bar 22222222</td><td class='details' id='D_2_2'>Ganz wichtige Erläuterung zu Bar 22222222</td>  
   </tr>  
</table>  
<div id="box" onclick="this.style.display='none'">[close] test</div>  
  
</body>  
</html>

Jörg Reinholz