kostenloser Webspace werbefrei: lima-city


Style eines untergeordneten DIV-Tags ergänzen?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mathesoft

    Kostenloser Webspace von mathesoft

    mathesoft hat kostenlosen Webspace.

    Hallo,

    ich habe da etwas kniffliges (aus meiner Sicht). Ich möchte einen Kartenausschnitt drehen auf einer Webseite, dessen Besitzer diese Funktion nicht einbauen will... Es ist die Funktion da, die Kartenansicht auszudrucken und ich habe es probiert, daß die Ansicht bis auf den Ausdruck nicht durch neu-laden verloren geht.

    Mit der Chrome-Konsole direkt klappt das. Nun möchte ich es automatisieren mit Javascript in einer Browser-Erweiterung.

    Dazu muss ich ein untergeordnetes DIV manipulieren; das DIV darüber kann ich mit der ID finden.

    Das sieht so aus:
    <div id="map_canvas" class="map-canvas" style="position: relative; overflow: hidden;">
        <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);"> 
    ...
        </div>
    </div>

    Das map_canvas finde ich so:
    var map_id=document.getElementById("map_canvas");
    map_id.style.webkitTransform="rotate(30deg)";
    und kann dann eine Drehung ausführen. Aber ich muss ein paar weitere untergeordnete Elemente ebenfalls verändern, damit sich nur bestimmte Ebenen verändern.

    Da das aber nur der Gipfel von unüberschaubar vielen DIVs ist, die darunter folgen und keine ID haben, frage ich mich jetzt, wie ich an die nachfolgenden Unter-DIVs komme?

    Ergänzend wäre es hilfreich, wenn ich den letzten Winkelwert speichern könnte, wenn der Nutzer dann zB 5 Grad weiterdrehen möchte. Wie mache ich das mit dem Werte speichern am besten - irgendwo auf der Page einen Value setzen?

    Vielleicht möchte ich später auch die Kartenfarben ändern, das ist ähnlich, aber werd ich dann fragen ;-)
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Wenn du ein Element ausgewählt hast, kannst du mit dem Attribut "children" an die inneren Elemente gelangen.

    Also, ein deinem Beispiel würde
    map_id.children
    ein Array liefern mit allen Elementen, die sich im Baum direkt unter dem ausgewählten div befinden. Ausgenommen sind Text-Elemente, also die Textbereiche, die nicht in ein weiteres Tag eingeschlossen sind.

    Du musst dich dann von Knoten zu Knoten durch den Baum nach unten vorarbeiten. Oft reicht es, die children abzuzählen, um an das gewünschte Element zu kommen.

    mathesoft schrieb:
    Ergänzend wäre es hilfreich, wenn ich den letzten Winkelwert speichern könnte, wenn der Nutzer dann zB 5 Grad weiterdrehen möchte. Wie mache ich das mit dem Werte speichern am besten - irgendwo auf der Page einen Value setzen?
    Klar, dazu reicht zunächst einmal eine Variable. Im Normalfall hast du einen Skriptblock, in dem die Funktion zur Drehung deklariert ist. Du kannst dann außerhalb des Funktionsblocks die Variable deklarieren, damit sie ihren Wert behält solange die Seite offen ist.

    Möchtest du den Wert auch gespeichert lassen wenn der Nutzer die Seite schließt, musst du z.B. auf LocalStorage zurückgreifen.
  4. Autor dieses Themas

    mathesoft

    Kostenloser Webspace von mathesoft

    mathesoft hat kostenlosen Webspace.

    Hallo,

    vielen Dank erstmal, das klappt schon prima.

    Jetzt stehe ich vor dem Problem, daß ich übergeordnete Elemente ausblenden möchte. Dazu füge ich einen Button hinzu, der das erledigt (appendChild).

    Wird der Button nun angeklickt, will ich 3 Ebenen höher alles darunter ausblenden (ein Container eben).
    In dieser CallBack-Funktion schreibe ich:
    function $id(id) {
      return document.getElementById(id);
    }
    
    //...Buttons legt erfolgreich meine Function an: AddButton( i, function() {
     var loc=$id("inject_nb"+i);
    
    // in folgender Zeile meldet die Console den Fehler:
     loc= loc.parentElement.parentElement; //loc (=hierbinich) - 1 höher - noch 1 höher 
    
     if (loc) loc.parentElement.style.display = "none"; //wenn es diese Ebene gibt, kann man noch 1 höher
    }


    Leider erläutert mir die Chrom-Console:
    Uncaught TypeError: Cannot read property 'parentElement' of null


    Aussehen in der Seite tut das so:
    ... //ganze Menge DIVs davor
    <div id="lolist">
        <div class="lo-group">
            <div class="los">
                <div class="caption">Überschrift <input type="button" id="inject_nb0" value="Verbergen" ></div>
                    <div class="lo-list">
    ... //und es geht noch tiefer


    Ich will also "lo-group" mit Klick auf den "inject_nb"-Button ausblenden. Von den "lo-group" kann es nachfolgend zwischen 0 und 25 geben...

    Ich habe es anstelle von parentElement auch mit parentNode versucht - wenn ich diese Seite richtig verstehe, sollte das funktionieren...

    Was mache ich falsch?
  5. Ich konnte jetzt bei den geposteten Codestücken nicht direkt einen Fehler erkennen.

    Vermutlich bist du auf einen der gemeinen Fallstricke von Javascript hereingefallen. Speziell geht es um die Variable i. Wenn du eine for-Schleife hast, die etwa so aussieht:
    for (var i=0; i<=25; i++) {
      // ...
    }
    dann solltest du das "var" durch "let" ersetzen, also so:
    for (let i=0; i<=25; i++) {
      // ...
    }
    Hintergründe dazu gibts z.B. auf Stackoverflow. Das Problem dabei ist, dass die Variable i bis zum Ende gezählt wird und schließlich einen Wert annimmt, der zur Abbruchbedingung führt. Wird dann das Callback aufgerufen, hat i einen zu großen Wert und es wird kein Element mehr gefunden.

    Wenn ich mit der Vermutung nicht richtig liege, müsstest du wohl etwas mehr Code liefern. Praktisch wäre, wenn du einen Link zu deiner Seite senden könntest.
  6. Autor dieses Themas

    mathesoft

    Kostenloser Webspace von mathesoft

    mathesoft hat kostenlosen Webspace.

    Hm...

    Das mit dem let ist interessant, aber der Fehler kam trotzdem noch.

    Ich hab plötzlich gedacht, ich probiere mal was ...
    var loc=this.parentElement;//$id("THinject_nb"+i);
             if (loc) loc = loc.parentElement;
             if (loc) loc.parentElement.style.display = "none";


    So geht es. Statt also den Button wiederzufinden, nehme ich hier this und auf wundersame Weise macht es das, was es soll - danke für deine Hilfe :kiss: (ich frag bestimmt wieder mal was).
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!