Element über DOM per Java Script in einem Hidden-DIV ansprechen

[flughund]

Lustiger Titel, was? ;-)

Ich bin ein nicht wirklich guter Programmierer. Java Script und DOM-Manipulationen lerne ich erst.

Ich habe nun folgendes Problem, bei dem ich eure Hilfe brauche:

Es wird eine Seite per PHP angezeigt. Darin befinden sich verschiedene DIVs (mit ID's). Eines dieser DIV's muss am Anfang auf "hidden" sein (lege ich im CSS-File fest). Bei "onload" wird dieses DIV auf "visible" gesetzt und ajaxmässig per Javascript ein PHP Script angesprochen, welches HTML-Code zurückgibt, welcher das Javascript dann wieder in eben diesem DIV anzeigt.

Hier das CSS des DIVs:

#hiddenDIV {
	clear: both;
	float: left;
	visibility:hidden; 
	background-color: silver; 
	height: 283px;
	\height: 300px;
	h\eight: 283px;
	width: 100%;
	border: 0px;
	margin: 0px;
	padding: 0px;
	overflow: scroll;
}

So. Jetzt habe ich das Problem, dass mir dieser HTML-Teil, welche in das DIV per JS geladen wird, gar nicht als Quellcode erscheint. D.h. ich kann die Dokument Objekte in diesem DIV auch nicht ansprechen, oder? Zumindest gehts nicht.

Mit "this.bgColor" oder so funktionieren JavaScript-Manipulationen. Nicht aber wenn ich eine Funktion im z.B. Head-Bereich aufrufen will.

Was ich eigentlich ganz am Ende will, ist, eine Zeile einer Tabelle (siehe Anhang) per onCLick auszuwählen und diese Zeile entsprechend zu higlighten. Also dass der Zustand auch bei MouseOut so bleibt.

Frage: muss ich das DIV im Objekt-Pfad mitangeben, wenn ja, wie?
Oder kapiert man meine Überlegungen gar nicht?

Wäre cool, wenn mir jemand einen Tipp hätte... :-)

[jmc]

ein bisschen mehr Code wäre nützlich

[jahlives]

Also gemäss Selfhtml solltest du \ nicht vor Buchstaben a-f setzen

Manual
Setzen Sie das Escape-Zeichen \ an eine beliebige Stelle innerhalb der Eigenschaft, jedoch nicht direkt vor einen der Buchstaben a bis f, da dieser sonst als hexadezimaler Wert interpretiert werden würde.

Gruss

tobi

[flughund]

Das CSS-Teil ist nicht so wichtig, die /-Geschichten sind lediglich Hacks, welche nix mit dem Problem zu tun haben.

Hier die Website (achtung, extreme BETA!):

http://www.miniguide.ch

[jahlives]

document.getElementById('id_aus_html').style.visibility = 'hidden';
geht nicht ? Normalerweise kannst du über document.getElementById() alle Elemente im HTML Quellcode ansprechen und damit dann entsprechendes Zeugs anstellen.

Gruss

tobi

[jmc]

Hast du eine Javascript-Konsole?

Wenn ja, dann verbessere mal die dort angegebenen Fehler.

[flughund]

Vielen Dank für eure Antworten. Ich habe mal soweit es gieng die Fehler beseitigt.
Das Problem bleibt.

Nun, da ich scheinbar die Objekte nicht über das DOM ansprechen kann, gebe ich einfach das Objekt beim Aufruf der JS-Funktion mit. So könnte es klappen. Habe mal ein JavaScript geschrieben/ergänzt:
[COLOR=blue]

function chcol(nama) { 
if (nama.style.backgroundColor != 'red'){
    if(nama.id=='alt1') { nama.style.backgroundColor = 'yellow'} 
    else if (nama.id=='alt2') { nama.style.backgroundColor = 'green'} 
}
return true; 
}

function retcol(nama) { 
if (nama.style.backgroundColor != 'red'){
    if(nama.id=='alt1') { nama.style.backgroundColor = '#F0F0F0'} 
    else if (nama.id=='alt2') { nama.style.backgroundColor = '#FFF'}
}
return true; 
}

function clickcol(nama) {
if (nama.style.backgroundColor != 'red'){
    var lastclicked = document.getElementById('colselect').value;
//    alert (lastclicked);
    if ((document.getElementById('colselect').value) != '0'){    
        lastclicked.style.backgroundColor = '#F0F0F0';
//        alert ('letzter gewechselt!');
    }
    nama.style.backgroundColor = 'red';
    document.getElementById('colselect').value = nama;
}
return true; 
} 

[/COLOR]
Zusätzlich habe ich im HTML-Body ein Hidden-Field, indem ich den Wert speichere:

[COLOR=blue]

<input type="hidden" id="colselect" value="0"> 

[/COLOR]

Die Funktionen werden wie folgt aufgerufen:
[COLOR=blue]

<label id = "$altclass" onClick="clickcol(this);
document.getElementById('radio$row_count').checked = true; 
makeactive(1,$agent_event_id);" onMouseOver="chcol(this)" 
onMouseOut="retcol(this)">
Inhalt des Objektes
</label> 

[/COLOR]

Da ich JavaScript nur kläglich beherrsche und das Script nur von mir ergänzt wurde (Original nicht von mir), könnt Ihr mir vielleicht weiterhelfen?

Ich bekomme von der JavaScript-Konsole die Meldung:
[COLOR=blue]

Fehler: lastclicked.style has no properties
Quelldatei: http://www.miniguide.ch/js/tabselect.js
Zeile: 22

[/COLOR]

Sieht jemand den Fehler? :-|

[jmc]

Das ist von dir:
var lastclicked = document.getElementById('colselect').value;
lastclicked.style.backgroundColor = '#F0F0F0';

Das würde ja bedeuten das du das schreibst:
document.getElementById('colselect').[COLOR=red]value[/COLOR].style.backgroundColor = '#F0F0F0';

[flughund]

Vielen Dank. Wie das so ist, habe ich selber das Script nun entsprechend geschrieben. Als Dankeschön poste ichs hier rein:

/********************************************************************************************/
/* Table-Higlight functions by frühjahr, [url]http://www.fruehjahr.ch[/url]                            */
/* Based on the script of Moby_Dim, Ukraine (seen at the forum @ [url]www.webmasterworld.com[/url]     */
/* You may use these functions as you wish, for commercial or non-commercial applications,  */
/* but please note that the author offers no guarantees to their usefulness, suitability or */
/* correctness, and accepts no liability for any losses caused by their use.                */
/********************************************************************************************/


// Use it in your source code like this: <tr id=$altclass" class="$altclass" onClick="clickcol(this)" onMouseOver="chcol(this)" onMouseOut="retcol(this)">         //
// you have to define .alt1 and .alt2 in you CSS-File. Also alternate the class and the ID of the row (I did that on the flow with PHP)                            //

// -------------- Farben definieren ----------------------------------------------//
const alt1_bg         =         "#F0F0F0";
const alt2_bg         =         "#FFFFFF";
const hover1_bg     =         "yellow";
const hover2_bg     =         "green";
const highlight     =         "#3D80DF";
const stdtext         =         "black";
const hightext         =        "white";

const hovering         =        "on";                            // MouseOver einschalten = 'on', sonst leerlassen



function chcol(nama) {                                         // Mousover-Funktion...
    if (hovering == "on"){
        if (nama.style.backgroundColor != highlight){
            if(nama.id=='alt1') {nama.style.backgroundColor = hover1_bg}
            else {nama.style.backgroundColor = hover2_bg}
            }
        return true; 
    }
}

function retcol(nama) {                                     // MouseOut-Funktion zum wiederherstellen des Hintergrundes
    if (hovering == "on"){
        if (nama.style.backgroundColor != highlight){
            if(nama.id=='alt1') { nama.style.backgroundColor = alt1_bg} 
            else { nama.style.backgroundColor = alt2_bg }
            }
        return true; 
    }
}

function clickcol(nama) {
        var tabelle = nama.parentNode.parentNode;            // ermittle von 'nama' aus relativ die Tabelle
        var rows = tabelle.getElementsByTagName('tr');        // speichere alle darin enthaltenen Zeilen
        var allcells = tabelle.getElementsByTagName('td');    // speichere alle darin enthaltenen <td>'s
        var zellen = nama.getElementsByTagName("td");        // ermittle alle <td>'s in der selektierten Zeile
        
        var alternieren = "1";                                // Startwert zum die alternierenden Hintergründe wiederherstellen
        for (var i = 0; i < rows.length; i++) {                // ermittle Anzahl Reihen
            
            if (alternieren == "1"){                        // Schalter für den alternierenden Hintergrund
                 rows[i].style.backgroundColor = alt1_bg;    // Setze den Hintergrund auf den Farbwert
                var alternieren = "0";                        // Alternator umschalten
            }
            else {                                            // Schalter für den alternierenden Hintergrund
                rows[i].style.backgroundColor = alt2_bg;        // andere Farbe der Alternation
                var alternieren = "1";                        // Alternator umschalten
            }
        }

        for (var v = 0; v < allcells.length; v++) {            // ermittle Gesamtzahl aller <td>'s in der gesamten Tabelle
          allcells[v].style.color = stdtext;                // setze die Standardfarbe für den Text zurück
        }                                                    

        for (var i = 0; i < zellen.length; i++) {            // ermittle die Gesamtzahl der <td>'s in der selektierten Reihe
          zellen[i].style.color = hightext;                    // setze die Textfarbe auf die selektierte Farbe
        }
        nama.style.backgroundColor = highlight;                // setze die Hintergrundfarbe der selektierten Zeile auf aktiviert
    
return true; 
}
//+-+-+-+-+-+-+-+-+-+-+-+-+ Ende highlight +-+-+-+-+-+-+-+-+-+-+-+-+// 

Vielleicht kann das ja jemand gebrauchen... ;-)