Icons übereinander Rolladen Fenster

[Robert1963]

Hallo,

habe eine grundsätzliche Frage zu Icons auf dem Floorplan.
Nach welcher Gesetzmäßigkeit wird bestimmt ob ein Icon über oder unter einem anderen Icon liegt?

Ich weiß das ich das Verhalten mit "A_Button_1" und "B_Text_1" oder mit Index in der CSS beeinflussen kann (was ich z.Zt. nicht mache).
Aber wenn ich ein neu erzeugtes PNG-Icon im Editmodus über den Floorplan ziehe, ist es mal über den anderen Icons, mal drunter. Konnte bis jetzt kein System erkennen.

Hintergrund ist der, das ich meine Rollladen vor ein Fenster Icon legen will um den Status des Fensters sehen zu können aber auch den Rollladenstatus sehen und bedienen zu können.

Vielleicht hat ja einer ne andere Idee wie man den Rollladenstatus und den Fensterstatus  möglichst in einem Icon platzsparend auf dem Floorplan darstellen kann.

Viel Grüße,
Rob

[ahlermi]

Hi,

ich hatte jetzt auch sehr viel Ärger damit.

Du kannst im CSS mit z-index arbeiten.

Code Auswählen Erweitern


.devicestate {
    z-index: 5;
    position: relative;
    display: block;
}


die Rollade ist ja steuerbar, also hast du einen "Link"

Code Auswählen Erweitern


a {
    display: inline-block;
    position: relative;
    z-index: 10;
    padding: 0.2em;
    margin: -0.2em;
}

so sollte das Icon immer über dem anderen liegen.

PS:
ein eigenes CSS für den Floorplan kannst du als Attribute hinzufügen:

Attributes
CssFiles pgm2/myhome.css

Gruß Michael

[ahlermi]

Ich habe es gerade getestet und festgestellt das es schwierig ist mit z-index zu arbeiten da die Elemente leider nicht auf der selben Herachi-ebene sind...

z-index funktioniert nur wenn die Elemente auf selber Ebene sind.

Code Auswählen Erweitern


<div id=1>  //<-- z-index 5
  <a href....>test</a> //<-- z-index 10  hier ist 10 leider nicht höher als 5 weil Element tiefer...
</div>
<div id=2>  //<-- z-index 5
  text
</div>


was funktioniert ist das DIV Element mit Javascript anzuheben:

Code Auswählen Erweitern


window.onload = testeMich;

function testeMich(){
//  alert('Aufruf');
    var tags = document.getElementsByTagName("div"),
        tagsLength = tags.length,
        index,
        tag,
        rx = /\d+/;


  for (index = 0; index < tagsLength; index += 1) {
        left = 0;
        tag = tags[index];
        if (tag.className === 'col2'){
            if (tag.children.length > 0){
//                alert(tag.children[0].tagName);
                if (tag.children[0].tagName === 'A'){
                    tag.style.cssText = 'z-index: 10;';
                }
            }
        }
  }

}



nicht zu vergessen das css Skript:

Code Auswählen Erweitern



.devicestate {
/*    z-index: 5;*/
    position: relative;
    display: block;
    text-align: -webkit-center !important;
    text-align: -moz-center !important;
    font-size: 12px;
}

.devicecommands {
    z-index: 6;
    position: relative;
    display: block;
    text-align: -webkit-center !important;
    text-align: -moz-center !important;
}

.col2 {
    z-index: 5;
    position: relative;
    display: block;
}



[bastelfeak]

Hallo,
da klinke ich mich als Rooky nochmal ein:

Ich habe eine Readingsgroup mit hübschen Rahmen ringsherum. Leider sind dann die Commands alle "verdeckt" und man kann sie nicht mehr auslösen.

Kannst du vielleicht nochmal etwas genuaer erklären was du gemacht hast?

Viele Grüße
baselfreak

[ahlermi]

Man kann im Foorplan Objekt über Attribute sowohl eine Javascript Datei wie auch eine eigene CSS Datei quasi anhängen.

Das solltest du tun.

In die Javascript Datei gehört:

Code Auswählen Erweitern


window.onload = testeMich;

function testeMich(){
//  alert('Aufruf');
    var tags = document.getElementsByTagName("div"),
        tagsLength = tags.length,
        index,
        tag,
        rx = /\d+/;


  for (index = 0; index < tagsLength; index += 1) {
        left = 0;
        tag = tags[index];
        if (tag.className === 'col2'){
            if (tag.children.length > 0){
//                alert(tag.children[0].tagName);
                if (tag.children[0].tagName === 'A'){
                    tag.style.cssText = 'z-index: 10;';
                }
            }
        }
  }

}



In die CSS-Datei gehört:

Code Auswählen Erweitern



.devicestate {
/*    z-index: 5;*/
    position: relative;
    display: block;
    text-align: -webkit-center !important;
    text-align: -moz-center !important;
    font-size: 12px;
}

.devicecommands {
    z-index: 6;
    position: relative;
    display: block;
    text-align: -webkit-center !important;
    text-align: -moz-center !important;
}

.col2 {
    z-index: 5;
    position: relative;
    display: block;
}


Der Z-Index ist ein HTML Element um die Herachi zu steuern, leider gilt das aber nur für Elemente auf der selben Herachiebene, weshalb du das Javascript nutzen musst um den Elementen nachträglich direkt den richtigen Z-Index zu geben.

Gruß Michael