<tr style="display: block;"> Funktioniert nicht ganz richtig
waschbaersiegen
- design/layout
Tach!
Das ganze ist ein Greasemonkey-Script was unterhalb einer Textarea eine Tabelle erzeugen soll.
In der ersten TR sind Smilies drin die man via "click" in das Textfeld einfügen kann.
In der 2. TR sind Sonderzeichen wie zB ✘ ✔ ♣ . Da es von diesen Zeichen doch einige mehr gibt, will ich die 2.TR erstmal verstecken und nur auf wunsch erscheinen lassen:
<tr id="tr_special" style="display: none;">
Die Tabelle wird aufgebaut und die 2.TR ist versteckt. Klicke ich dann auf (mehr) erscheint die 2.TR komplett unter der 1.Zelle der 1.TR???
Kommentiere ich das in dem Script aus mit dem "display: none;" und laß die 2.TR direkt anzeigen passt alles zusammen - bis ich dann einmal auf (mehr) klicke.
Wenn ich mir den Quellcode ansehe den das Script erzeugt ist alles ordentlich geöffnet/geschlossen - sollte passen.
Hab gestern erst etwas ganz ähnliches geschrieben wo TR´s versteckt waren und auf "click" dann erscheinen. Das ging Problemlos.... die Tabelle will einfach nicht.
Hier mal das Script:
var url = document.URL;
var smilie_url = new Array('http://static.werkenntwen.de/images/emoticons/grinsen.gif','http://static.werkenntwen.de/images/emoticons/zwinkern.gif','http://static.werkenntwen.de/images/emoticons/grinsen_zunge.gif','http://static.werkenntwen.de/images/emoticons/ueberrascht.gif','http://static.werkenntwen.de/images/emoticons/ungluecklich.gif','http://static.werkenntwen.de/images/emoticons/breites_grinsen.gif','http://static.werkenntwen.de/images/emoticons/cool.gif','http://static.werkenntwen.de/images/emoticons/kuss.gif','http://static.werkenntwen.de/images/emoticons/boese.gif','http://static.werkenntwen.de/images/emoticons/neidisch.gif');
var smilie_code = new Array(':-)',';-)',':-P',':-O',':-(',':-D','8-)',':-*',':-@','(neidisch)');
var so_zeichen = new Array('♠','♣','♥','♦','€','✓','✔','✕','✖','✗','✘');
function smile()
{
var allTextareas = document.getElementsByTagName('textarea');
if (allTextareas.length)
{
for (var x = 0; x < allTextareas.length; x++)
{
var thisTextarea = allTextareas[x];
var table = document.createElement('table');
table.setAttribute('border' , '1');
///// GB-Eintrag & Blog /////
if ( thisTextarea.id == 'gb_body' || thisTextarea.id == 'body'){
if (url.indexOf('/forum/showThread') > -1)
{
///// Forums-Thread antworten /////
table.setAttribute('style' , 'padding:0px 0px 0px 0px');
}else{
///// GB-Eintrag & Blog /////
table.setAttribute('style' , 'padding:0px 0px 0px 70px');
}
}
///// GB-Kommentar /////
if ( thisTextarea.name == 'comment' ){
table.setAttribute('style' , 'padding:0px 0px 0px 30px');
}
///// Event eintragen /////
if ( thisTextarea.name == 'description' || thisTextarea.name == 'routeDescription'){
table.setAttribute('style' , 'padding:0px 0px 0px 210px');
}
///// Gruppe bearbeiten /////
if ( thisTextarea.id == 'edit_ClubDescription' || thisTextarea.id == 'edit_ClubNews' || thisTextarea.id == 'edit_ClubSnippet' ){
table.setAttribute('style' , 'padding:0px 0px 0px 260px');
}
///// tr1 mit WKW-Smilies /////
tr1 = table.appendChild(document.createElement('tr'));
///// tr mit WKW-Smilies aus Array erzeigen /////
for ( i=0; i < smilie_url.length; i++)
{
td = tr1.appendChild(document.createElement('td'));
img = td.appendChild(document.createElement('img'));
img.src = smilie_url[i]; // URL-Smilie
img.id = smilie_code[i]; // echte schreibweise
img.title = smilie_code[i];
img.alt = smilie_code[i];
img.name = x; // Nummer der aufrufenden Textarea
img.addEventListener('click' , insert , false );
}
///// (mehr)-Link einfügen /////
td = tr1.appendChild(document.createElement('td'));
var a = td.appendChild(document.createElement('a'));
a.appendChild(document.createTextNode(' (mehr)'));
///////////////////// Der Listener soll die TR erzeugen/entfernen /////
a.addEventListener('click', changeTr ,true);
///// tr2 mit Sonderzeichen /////
tr2 = table.appendChild(document.createElement('tr'));
////////////////////// Kommentiere ich die nächste Zeile aus passt das Layout /////
tr2.setAttribute('style' , 'display:none');
tr2.id = 'tr_special';
///// tr mit Sonderzeichen aus Array erzeugen /////
for ( i=0; i < so_zeichen.length; i++)
{
td = tr2.appendChild(document.createElement('td'));
a = td.appendChild(document.createElement('a'));
a.appendChild(document.createTextNode(so_zeichen[i]));
a.id = so_zeichen[i];
a.name = x; // Nummer der aufrufenden Textarea
a.addEventListener('click' , insert , false );
}
thisTextarea.parentNode.insertBefore(table, thisTextarea.nextSibling);
}
}
}
///////// TR Style setzen /////
function changeTr(e)
{
tr_style = document.getElementById('tr_special')
if ( tr_style.style.display == 'none' ) {
document.getElementById('tr_special').style.display = "block";
}else {
document.getElementById('tr_special').style.display = "none";
}
}
function insert(e)
{
var e=e? e : window.event;
var el=e.target? e.target : e.srcElement;
///// http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/beispiel.htm /////
var allTextareas = document.getElementsByTagName('textarea');
///// Welche Textarea hat den Focus? /////
var input = allTextareas[el.name];
input.focus();
if(typeof input.selectionStart != 'undefined')
{
///// Smilie an Pos. 'X' einfügen /////
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + ' ' + el.id + ' ' + insText + input.value.substr(end);
///// Anpassen der Cursorposition /////
var pos;
if (insText.length == 0) {
pos = start + el.id.length+2;
} else {
pos = start + el.id.length+2 + insText.length+2 + el.id.length+2;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
}
Bin ein wenig ratlos. Vor allem weil es gestern mit einer anderen Tabelle problemlos klappte.
LG
Markus
Hi,
In der 2. TR sind Sonderzeichen wie zB ✘ ✔ ♣ . Da es von diesen Zeichen doch einige mehr gibt, will ich die 2.TR erstmal verstecken und nur auf wunsch erscheinen lassen:
Dass display:block nicht der korrekte display-Wert für eine Tabellenzelle ist, wurde hier schon oft erwähnt.
Den korrekten zu setzen, ist aber im IE problematisch.
Setze display einfach auf einen Leerstring, dann setzt jeder Browser das ein, was er für richtig hält.
MfG ChrisB
Den korrekten zu setzen, ist aber im IE problematisch.
Bei einem Greasemonkey-Script aber zu vernachlässigen.
Das ganze ist ein Greasemonkey-Script [...]
Bin ein wenig ratlos. Vor allem weil es gestern mit einer anderen Tabelle problemlos klappte.
Unter Gecko - glaube ich weniger.
Warum willst du eine Tabellenzeile als "block" anzeigen, wenn es doch "table-row" gibt? Dass das im Internet Exploder nicht funktioniert, sollte dir bei einem Greasemonkey-Script aber egal sein.
Unter Gecko - glaube ich weniger.
Doch... wenn ich´s dir doch sage ;-)
Weil die groben Funktionen hab ich von da übernommen.
Warum willst du eine Tabellenzeile als "block" anzeigen, wenn es doch "table-row" gibt? Dass das im Internet Exploder nicht funktioniert, sollte dir bei einem Greasemonkey-Script aber egal sein.
Warum ich "table-row" nicht benutze?
Weil ich das bis vor 4 Minuten noch nicht kannte.
Aber damit scheint es zu funktionieren :-)
function changeTr(e)
{
tr_style = document.getElementById('tr_special')
if ( tr_style.style.display == 'none' ) {
document.getElementById('tr_special').style.display = "table-row";
}else {
document.getElementById('tr_special').style.display = "none";
}
}
Besten dank für die Hilfe. Man kann ja nicht alles kennen und wissen....