Popup aus Event

[Superposchi]

Hallo, ich würde gerne für mein FTUI Popups über den Startbildschirm einblenden.
Als Auslöser soll dabei kein Widget sondern die Änderung eines Readings dienen.

Meine Suche hat leider kein für mich verständliches Ergebnis ergeben.

Ist es überhaupt möglich ein Popup durch ein Event einblenden zu lassen?

[SirMarco]

Hallo

Ja das ist es.

So habe ich es gelöst:

Code Auswählen Erweitern

<ftui-icon popup-target="watcher_Controller_popup"></ftui-icon>
in der index.html plaziert, sowie das das popup auch

Code Auswählen Erweitern


<ftui-popup id="watcher_Controller_popup" timeout="" shape="round" [open]="watcher_Controller_popup:state | map('on:true, off:false')" width="80%" height="20%">
<header class="size">Controller Meldungen</header>
<ftui-label slot="close"> </ftui-label>
  <ftui-row style="margin-bottom: 0px;">
<ftui-column style="width: 50px; margin-left: 5px;">
  <ftui-icon name="exclamation-circle" color="red" ></ftui-icon>
</ftui-column>
<ftui-tab view="content_controller" title="Controller" color="black">
<ftui-column>
  <ftui-label [text]="watcher_Controller:timeouts" color="red" class="size-1"><span slot="end"> Controller Status Timeout</span></ftui-label>
</ftui-column> 
</ftui-tab>
  </ftui-row>
  </ftui-popup>


und dann ein dummy "watcher_Controller_popup" angelegt auf den das popup reagiert.

Grüsse

[Superposchi]

also wenn ich es richtig lese entspricht "ftui-xxx" dem div-Tag. Doch ich sehe nirgends das Popup-Widget.
Überhaupt entspricht das nicht gerade der Beschreibung des Popup-Widgets für FTUI 2.x.

Handelt es sich dabei vielleicht eher um eine normale Webseite die drübergelegt wird?

[Eisix]

SirMarco hat dir die Lösung für FTUI3 geschickt.

Hier ein Beispiel für FTUI2. Wenn es Klingelt geht das Popup mit dem Kamerabild auf.

Code Auswählen Erweitern


<div class="vbox">   
        <div class="card bg-transparent">
                <div data-type="symbol"
                        data-device="Klingel"
                        data-states='["on","off"]'
                        data-icons='["fa-bell-o","fa-bell-slash-o"]'
                        data-colors='["orange","grey"]'
                        class="large top-narrow"
                ></div>
                <div class="normal bottom">Klingel</div>
                <div data-type="popup"
                        data-device="Klingel"
                        data-get-on="on"
                        data-height="350px" data-width="550px">
                        <div class="dialog">
                                <header>Hof</header>
                                <br>
                                <div data-type="image"
                                        data-url="http://192.168.X.XXX/snapshot_720.jpg"
                                        data-size="100%"
                                        data-refresh="5"
                                        class="nocache"
                                ></div>
                        </div>
                </div>
        </div>
</div>



Gruß
Eisix

[Superposchi]

Ah ok, mit FTUI3 habe ich mich noch gar nicht auseinander gesetzt. Dachte das wäre bisher noch im Entwicklungsstadium.

Also wenn ich den Code richtig verstehe brauche ich eigentlich nur diese beiden zeilen:

Code Auswählen Erweitern

data-device="Klingel"
data-get-on="on"data-device gibt das Device an auf dessen Event reagiert werden soll und data-get-on das Event. Richtig?
Wobei wenn ich das richtig sehe hier auf das Reading state reagiert wird, oder? Kann ich eventuell auch andere Readings als state nutzen?

Und die wichtigste Frage, wo muss der Code eingefügt werden? Ganz a Anfang vor dem eigentlichen Gridster oder kann es irgendwo auf der Seite sein?

Muss ich das Symbol it einbauen oder ist das nur für dich zur besseren Erkennung dabei?

[Eisix]

Ah ok, mit FTUI3 habe ich mich noch gar nicht auseinander gesetzt. Dachte das wäre bisher noch im Entwicklungsstadium.

Ist es

Also wenn ich den Code richtig verstehe brauche ich eigentlich nur diese beiden zeilen:

Code Auswählen Erweitern

data-device="Klingel"
data-get-on="on"data-device gibt das Device an auf dessen Event reagiert werden soll und data-get-on das Event. Richtig?
Wobei wenn ich das richtig sehe hier auf das Reading state reagiert wird, oder? Kann ich eventuell auch andere Readings als state nutzen?
ja, default ist state also ja, andere readings sollten auch funktionieren

Und die wichtigste Frage, wo muss der Code eingefügt werden? Ganz a Anfang vor dem eigentlichen Gridster oder kann es irgendwo auf der Seite sein?

Kenne deinen Seitenaufbau nicht aber bei mir liegt es in einem content file auf meiner defaultseite

Muss ich das Symbol it einbauen oder ist das nur für dich zur besseren Erkennung dabei?

Gute Frage habe ich noch nicht ohne das Symbol probiert, mußt du ausprobieren

[Superposchi]

ja, default ist state also ja, andere readings sollten auch funktionieren

Kannst du auch sagen wie? Kenne mich mit FTUI noch nicht sonderlich aus und klaue mir hauptsächlich die Codebeispiele zusammen.

Ich arbeite mit Gridster. Anbei der code der Startseite(n)

Menu:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="js/fhem-tablet-ui.js" defer></script>


    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>Haussteuerung</title>
</head>
<body>
    <div class="gridster">
        <ul>
<li  data-row="1" data-col="1" data-sizex="2" data-sizey="18">
<header><div data-type="label" class="menulist"></div></header>
<div>
<div class="big" data-type="pagebutton" data-url="#1_uebersicht.html"      data-load="#1_uebersicht" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*1_uebersicht.html||.*#1_overview.html)" data-icon="transparent" class="default top-space">
<div class="menu_image" data-type="image" data-url="../images/home.png" data-size="75px"></div>
</div>
<!--
<div class="big" data-type="pagebutton" data-url="#1_grundriss_menu.html"    data-load="#1_grundriss_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_grundriss_menu.html||.*#1_grundriss.*.html||.*#3_rooms_.*.html)" data-icon="transparent" class="prefetch top-space">
<div class="menu_image" data-type="image" data-url="../images/grundriss.png" data-size="75px"></div>
</div>
-->
<div class="big" data-type="pagebutton" data-url="#1_light.html"      data-load="#1_light" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_light.html||.*#2_light_etage_.*.html)" data-icon="transparent" class="prefetch top-space">
<div class="menu_image" data-type="image" data-url="../images/licht.png" data-size="75px"></div>
</div>
   <div class="big" data-type="pagebutton" data-url="#1_klima_menu.html"      data-load="#1_klima_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_klima_menu.html||.*#2_klima_etage_.*.html)" data-icon="transparent" class="prefetch top-space">
<div class="menu_image" data-type="image" data-url="../images/klima.png" data-size="75px"></div>
</div>
<!--
<div class="big" data-type="pagebutton" data-url="#1_timer_menu.html"    data-load="#1_timer_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_timer_menu.html||.*#2_heating_etage_.*.html)" data-icon="transparent" class="prefetch top-space">
<div class="menu_image" data-type="image" data-url="../images/timer.png" data-size="75px"></div>
</div>
<div class="big" data-type="pagebutton" data-url="#1_rollaeden_menu.html"    data-load="#1_rollaeden_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_rollaeden_menu.html||.*#2_heating_etage_.*.html)" data-icon="transparent" class="prefetch top-space">
<div class="menu_image" data-type="image" data-url="../images/rolladen.png" data-size="75px"></div>
</div>
<div class="big" data-type="pagebutton" data-url="#1_security_menu.html" data-load="#1_security_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_security_menu.html||.*#2_rollaeden_etage_.*.html)" data-icon="transparent" class="prefetch top-space">
<div class="menu_image" data-type="image" data-url="../images/kamera.png" data-size="75px"></div>
</div>
-->
<div class="big" data-type="pagebutton" data-url="#1_multimedia_menu.html"    data-load="#1_multimedia_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_multimedia_menu.html||.*#2_multimedia_.*.html)" data-icon="transparent" class="prefetch prefetch top-space">
<div class="menu_image" data-type="image" data-url="../images/multimedia.png" data-size="75px"></div>
</div>
<div class="big" data-type="pagebutton" data-url="#1_wetter.html"    data-load="#1_wetter" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_wetter.html||.*#2_wetter_.*.html)" data-icon="transparent" class="prefetch top-space">
<div class="menu_image" data-type="image" data-url="../images/umwelt.png" data-size="75px"></div>
</div>
<div class="big" data-type="pagebutton" data-url="#1_batterie.html"    data-load="#1_batterie" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_batterie.html||.*#2_sonstiges_.*.html)" data-icon="transparent" class="prefetch top-space">
<div class="menu_image" data-type="image" data-url="../images/batterie.png" data-size="75px"></div>
</div>
<!--
<div class="big" data-type="pagebutton" data-url="#1_auswertung_menu.html"    data-load="#1_auswertung_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_auswertung_menu.html||.*#2_sonstiges_.*.html)" data-icon="transparent" class="prefetch top-space">
<div class="menu_image" data-type="image" data-url="../images/auswertung.png" data-size="75px"></div>
</div>
<div class="big" data-type="pagebutton" data-url="#1_systeminfo_menu.html"    data-load="#1_systeminfo_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_systeminfo_menu.html||.*#2_sonstiges_.*.html)" data-icon="transparent" class="prefetch top-space">
<div class="menu_image" data-type="image" data-url="../images/systeminfo.png" data-size="75px"></div>
</div>
-->
<div class="big" data-type="pagebutton" data-url="#1_setup_menu.html"    data-load="#1_setup_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_setup_menu.html||.*#2_sonstiges_.*.html)" data-icon="transparent" class="prefetch top-space">
<div class="menu_image" data-type="image" data-url="../images/setup.png" data-size="75px"></div>
</div>
<div class="big bottom bottom-space-5x newline center-align top-space-3x">
   <div data-type="clock" data-format="H:i" class="center-align normal"></div>
   <div data-type="clock" data-format="d.n.Y" class="center-align mini"></div>
</div>
</div>
   
</li>
<li data-row="1" data-col="3" data-sizex="28" data-sizey="18">
<div class="page" id="1_uebersicht"></div>
<div class="page" id="1_grundriss_menu"></div>
<div class="page" id="1_light"></div>
<div class="page" id="1_klima_menu"></div>
<div class="page" id="1_timer_menu"></div>
<div class="page" id="1_rollaeden_menu"></div>
<div class="page" id="1_security_menu"></div>
<div class="page" id="1_multimedia_menu"></div>
<div class="page" id="1_phone_menu"></div>
<div class="page" id="1_wetter"></div>
<div class="page" id="1_batterie"></div>
<div class="page" id="1_auswertung_menu"></div>
<div class="page" id="1_systeminfo_menu"></div>
<div class="page" id="1_setup_menu"></div>
</li>
</ul>
</div>
</body>
</html>


Hauptseite:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * main page
     *
     load this page via widget pagebutton
     
      * - Tablet Acer Iconia One 10 B3-A20: 10 Zoll 1280x800 1 GB Quad Core 1,3 GHz 16GB
* -   Breite: 30 Felder / Höhe: 18 Felder
* -    <meta name="widget_base_width" content="41">
* -    <meta name="widget_base_height" content="30">

* -   Schalter mit Label: Breite: 3 Felder / Höhe: 3 Felder
     <li data-row="1" data-col="15" data-sizex="14" data-sizey="9">
        <header><div data-type="label" class="medium orange">Widget 2</div></header>   
    </li>
   
    <li data-row="10" data-col="1" data-sizex="14" data-sizey="9">
        <header><div data-type="label" class="medium orange">Widget 3</div></header>   
    </li>
   
    <li data-row="10" data-col="15" data-sizex="14" data-sizey="9">
        <header><div data-type="label" class="medium orange">Widget 4</div></header>   
    </li>

-->

<!-- ======================================== Startseite ======================================== -->


</head>
<body>
  <div class="page" id="1_uebersicht">
    <div class="gridster">
      <ul>
     
<li data-row="1" data-col="1" data-sizex="11" data-sizey="7">
<header><div data-type="label" class="">Status</div></header>   
<div class="center" width="100%" height="100%" border="0">
<div class="vbox">
<div data-type="label" class="big bold center">Marko</div>   
<div class="top" data-type="homestatus" data-device='Homestatus_Marko' data-alias='["Zuhause","Schlafen","Abwesend","Urlaub"]' data-fgcolor="lightblue","red","red","red"></div>
</div>
<div class="bigger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="vbox">
<div data-type="label" class="big bold center">Marion</div>   
<div class="top normal" data-type="homestatus" data-device='Homestatus_Marion' data-alias='["Zuhause","Schlafen","Abwesend","Urlaub"]' data-fgcolor="lightblue","red","red","red"></div>
</div>
</div>
</li>
       
<li data-row="1" data-col="12" data-sizex="5" data-sizey="7">
<header><div data-type="label" class="">Alarm</div></header>   
<div class="vbox">
<div class="abstand0">
<div class="big" data-type="symbol" data-device="" data-states='["off","looked"]' data-icons='["fa-lock-open","fa-lock"]' data-colors='["#ffffff","#ffffff"]'></div>
<div class="center round bold" data-type="link" data-width="130" data-height="35" data-color="white" data-background-color="red" data-fhem-cmd="set AllDoors locked">Aktivieren</div>
<div class="center round bold" data-type="link" data-width="130" data-height="35" data-color="black" data-background-color="green" data-fhem-cmd="set AllDoors open">Ausschalten</div>
</div>
</div>
</li>
   
<li data-row="1" data-col="17" data-sizex="8" data-sizey="7">
<header><div data-type="label" class="">Wetter</div></header>   
<div class="center vbox " width="100%" border="0">
<div class="abstand0">
<div class="bigger bold" data-type="label" data-device="Wetter_Heinsberg" data-get="temperature" data-unit=" °C"></div>
<div class="bigger">&nbsp;</div>
<div class="big bold" data-type="label" data-device="Wetter_Heinsberg" data-get="humidity" data-pre-text="Luftfeuchte: " data-unit=" %"></div>
<div class="big bold" data-type="label" data-device="Wetter_Heinsberg" data-get="pressure" data-pre-text="Luftdruck: " data-unit=" mbar"></div>
</div>
</div>
</li>

<li data-row="8" data-col="1" data-sizex="3" data-sizey="7">
<header><div data-type="label" class="">Reinigung</div></header>   
<div class="vbox">
<div class="Abstand0">
<div>Roborck S6 Max V<br></div>
<div class="wetter_image" data-type="image" data-url="../images/roborock.png" data-size="125px"></div>
<div class="big" data-type="symbol" data-device="Saugroboter" data-get="state" data-states='["Cleaning","Docked","Returning to base","Waiting"]'
data-icons='["vacuum_top","vacuum_top","vacuum_top","vacuum_top"]'
data-classes='["blink","","","blink"]' data-colors='["red","white","orange","orange"]'>
</div>
</div>
<div class="center round bold" data-type="link" data-width="130" data-height="35" data-color="white" data-background-color="red" data-fhem-cmd="set Saugroboter start">Start</div>
</div>
</li>
 
<li data-row="8" data-col="4" data-sizex="12" data-sizey="7">
<header><div data-type="label" class="">???</div></header>   
<div class="vbox">
<div class="abstand0">
</div>
</div>
</li>

<li class="top" data-row="8" data-col="15" data-sizex="9" data-sizey="11">
<header><div data-type="label" class="top">Kalender</div></header>   
<table class="top fields" border="0" width="100%" height="93%">
<tr width="100%">
<td class="left-align top" width="100%">
<div width="100%" class="left-align top calview" data-type="calview" data-device="Kalenderansicht" data-get="all" data-detail='["weekdayname","bdate","btime","summary","age"]' data-class="left-align" data-detailwidth='["40","100","65","300","35"]' data-sourcecolor="yes" data-daysleft-values='[0,1]' data-daysleft-classes='["blink left-align darker","normal left-align darker"]' data-daysleft-colors='["white",""]' data-header='["&nbsp;&nbsp;&nbsp;","&nbsp;&nbsp;&nbsp;am","&nbsp;&nbsp;&nbsp;","&nbsp;&nbsp;&nbsp;Beschreibung"]' data-header-class="large left-align" data-showempty="Yes" data-oneline="yes"></div>
</td>
</tr>
</table>
</li>
   
<li data-row="17" data-col="1" data-sizex="5" data-sizey="4">
<header><div data-type="label" class="">Funktnetz</div></header>   
<table class="topcenter">
<tr>
<td>
<div colspan"5">&nbsp;</div>
</td>
</tr>
<tr>
<td>
<div class="left center normal" data-type="label" >2,4 Ghz</div>
</td>
<td>
<div class="left small" data-type="symbol" data-device="FritzBox" data-get="box_wlan_2.4GHz" data-states='["on","off"]' data-icons='["fa-wifi","fa-wifi"]' data-colors='["#32a054","#ad3333"]'></div>
</td>
<td>
<div>&nbsp;</div>
</td>
<td>
<div class="left center normal" data-type="label" >Gast-WLan</div>
</td>
<td>
<div class="left small" data-type="symbol" data-device="FritzBox" data-get="box_guestWlan" data-states='["on","off"]' data-icons='["fa-wifi","fa-wifi"]' data-colors='["#32a054","#ad3333"]'></div>
</td>
</tr>
<tr>
<td>
<div class="left center normal" data-type="label" class="">5.0 Ghz</div>
</td>
<td>
<div class="left small" data-type="symbol" data-device="FritzBox" data-get="box_wlan_5GHz" data-states='["on","off"]' data-icons='["fa-wifi","fa-wifi"]' data-colors='["#32a054","#ad3333"]'></div>
</td>
<td>
<div>&nbsp;</div>
</td>
<td>
<div class="left center normal" data-type="label" class="">DECT</div>
</td>
<td>
<div class="left small" data-type="symbol" data-device="FritzBox" data-get="box_dect" data-states='["on","off"]' data-icons='["mi-phone_in_talk","mi-phone_in_talk"]' data-colors='["#32a054","#ad3333"]'></div>
</td>
</tr>
</table>
</li>
   
<li data-row="17" data-col="6" data-sizex="5" data-sizey="4">
<header><div data-type="label" class="">Telefon</div></header>   
<table class="topcenter">
<tr>
<td>
<div colspan"3">&nbsp;</div>
</td>
</tr>
<tr>
<td>
<div class="left smaller" data-type="label" >Standard</div>
</td>
<td>
<div class="left small" data-type="symbol" data-device="FritzBox" data-get="tam1_state" data-states='["on","off"]' data-icons='["oa-phone_answering","oa-phone_answering"]' data-colors='["#32a054","#ad3333"]'></div>
</td>
<td>
<div>&nbsp;</div>
</td>
<td>
<div class="left smaller" data-type="label" class="">Anonym</div>
</td>
<td>
<div class="left small" data-type="symbol" data-device="FritzBox" data-get="tam2_state" data-states='["on","off"]' data-icons='["oa-phone_answering","oa-phone_answering"]' data-colors='["#32a054","#ad3333"]'></div>
</td>
</tr>
</table>
</li>

<li data-row="17" data-col="11" data-sizex="5" data-sizey="4">
<header><div data-type="label" class="">Transferraten</div></header>   
<table class="topcenter">
<tr>
<td>
<div colspan"3">&nbsp;</div>
</td>
</tr>
<tr>
<td>
<div class="left normal" data-type="symbol" data-icon="mi-file_download" data-color="#ad3333"></div>
</td>
<td>
<div class="left normal" data-type="label" data-device="FritzBox" data-get="box_rateDown" data-post-text=" bit/s"></div>
</td>
<td>
<div>&nbsp;</div>
</td>
<td>
<div class="left normal" data-type="symbol" data-icon="mi-file_upload" data-color="#32a054"></div>
</td>
<td>
<div class="left normal" data-type="label" data-device="FritzBox" data-get="box_rateUp" data-post-text=" bit/s"></div>
</td>
</tr>
</table>
</li>
       
   
      </ul>
    </div>
  </div>
</body>
</html>


[Eisix]

Die Dokumentation im Wiki hast du dir angeschaut?!

https://wiki.fhem.de/wiki/FTUI_Widget_Popup

Um das reading welches gelesen wird festzulegen gibt es das Attribut

data-get

Gruß
Eisix

[Superposchi]

Ja, aber data-get bezieht sich doch auf das auslesen und anzeigen von Daten.
Wenn ich dich richtig verstehe, ist damit eher die generelle Ansteuerung eines Readings gemeint.

Das geht für mich so nicht aus dem Wiki hervor. Aber bin wie gesagt noch am Anfang mit FTUI.

[Eisix]

siehe screenshot

[Superposchi]

Oh, mein Fehler.
Hatte wohl die Hilfe zu einem anderen Widget offen.

Bleibt nur die Frage wo auf der Seite ich es einsetzen muss. Das Popup soll sich ja über die gesamte Seite legen, also sowohl das Menü, als auch die Hauptinhaltsseite. Praktischerweise würde ich es auf der Hauptinhaltsseite vor dem eigentlichen Elementen des Gridsters einbauen. Würde das klappen?

[Eisix]

Ich würde es auf deiner Hauptseite dahinter packen und dann mal testen

Code Auswählen Erweitern


<body>
    <div class="gridster">
        <ul>



[Superposchi]

Nach längerem überlegen ist eigentlich klar, dass es ins Hauptmenü rein muss, denn sonst müsste es in jede Seite eingebaut werden.
Es soll ja zu jedem Zeitpunkt aufpoppen können und nicht nur wenn die Hauptseite eingeblendet ist.

Ist mir aber auch nur beiläufig eingefallen.

[Superposchi]

Hallo, hab es ans Laufen gebracht.
Nur ein kleines Problem habe ich noch mit der Größe.
Hab die Breite und Höhe jeweils auf 75% eingestellt, doch es erscheint immer ein vertikaler Scrollbalken und der unterste Teil ist ausgeblendet.

Gibt es im FTUI eine Klasse, die den Scrollbalken unterbindet? per Style im normalen css kein Problem, aber bei FTUI ist ja alles vordefiniert.