Frage zum Popup

[Sprocky]

Hallo,

ich möchte ein Popup für meine Rolladen einbauen. Auf einem icon.shutter soll die aktuelle Stellung der Rollade angezeigt werden. Wenn ich auf das Icon klicke, dann soll ein Popup mit einem Slider aufgehen. Das Popup mit dem Slider bekomme ich auch hin, wenn ich den icon.shutter(..) anstatt des <img claas... einfüge wird nichts angezeigt.

<a href="#popup2" data-rel="popup">
<img class="icon icon1" style = "fill:icon1; stroke:icon1;" src="{{ icon0 }}light_light.svg" /> 
</a>

<div id="popup2" data-role="popup">
{{ basic.switch('switch4', 'bath.light.switch') }}
{{ basic.switch('switch5', 'bath.light.switch') }}
{{ basic.switch('switch6', 'bath.light.switch') }}
</div>

Also, das <img class="icon icon1" style = "fill:icon1; stroke:icon1;" src="{{ icon0 }}light_light.svg" />
möchte ich durch icon.shutter(...) ersetzen. Kann mir jemand sagen wie das geht?

Gruß

Sebastian

[Sprocky]

Hat sich erledig, mein Fehler...

[smai]

Noch ein Hinweis am Rande: style = "fill:icon1; stroke:icon1;" ist aus zwei Gründen nicht richtig:
1. Darf vor und nach dem = kein Leerzeichen sein.
2. Ist die ganze Angabe falsch und sollte weggelassen werden, da icon1 keine CSS-Farbe ist. Dies wird nur benötigt um von icon1 abweichende Farben anzugeben.

[Sprocky]

Das habe ich aber so aus der Doku 2.8 raus kopiert.

Gruß

[smai]

Ok... aus welcher Doku?

[Sprocky]

Es gibt doch eine offizielle Doku der SmartVisu um Netz. Auch unter Pages zu finden.

[smai]

Ok, habe es jetzt gefunden - ist beim Popup, nicht bei den Icons.
Leider ist das Unfug, was da in der Doku steht. Ich werde das für 2.9 korrigieren.

Korrekt/sinvoll wäre simpel:

<a href="#popup1" data-rel="popup">
<img class="icon icon1" src="{{ icon0 }}light_light.svg" />
</a>

[Keule09]

Hallo Zusammen,

ich klick mich hier mal mit ein

Habe auch 2 Fragen zu Popups

In meinem Menü habe ich die Zentralfunktionen,Wetter und meine Fernbedienung für den TV jeweils als Popup eingebunden.
Kann man ein Timer einfügen der nach 10 Sek. das Popup schliesst und wenn ja wie ?
Zu meiner 2.Frage:
Möchte ich die Popups gerne in seperaten Dateien z.B. POPUP.html auslagern und in dem Menü einbinden weil mir die Menu.html zu unübersichtlich wird. Habe aber keine Ahnung ob das geht und wie ich dies bewerkstelligen könnte.

Gruß Marco

[smai]

Schliessen müsste etwa mit folgendem JavaScript funktionieren:

$('#idDesPopups').on('popupafteropen', function() {
  var p = $(this);
  setTimeout( function() { p.popup('close'); }, 10000);
});

Zur zweiten Frage: Mit include kannst du andere Dateien einbinden.

[Keule09]

Vielen Dank für deine Hilfe

das mit Include hat prima geklappt.

Mit dem einbinden das JS-Code hat aber nicht funktioniert. Mit Chrome-Verknüpfung auf Android Homescreen schließt sich die Seite nach 10 Sec komplett und unter WIN 10 auf Firefox und Chrome passiert leider nichts. Hab deinen Code so wie er oben steht in die Visu.js eingebunden und nur die ID mit der meines Popups abgeändert. Muss ich noch was beachten beim einfügen?

Gruß Marco

[smai]

Wenn man es direkt in die visu.js schreibt, wird es tatsächlich zu früh geladen und macht nichts. Folgendermassen sollte es funktionieren:

$(document).on('popupafteropen', '#idDesPopups', function() {
  var p = $(this);
  setTimeout( function() { p.popup('close'); }, 10000);
});

Die sich komplett schliessende Seite klingt hingegen sehr speziell.
Hast du evtl. für das Popup dieselbe ID verwendet wie der Seitenname? Also heisst die Seite z.B. popup1.html und das Popup hat ebenfalls die ID popup1?

[Cybers]

damit sich die Popups automatisch schließen, habe ich folgendes in meiner visu.js. Damit sich das Popup nicht während man im Popup noch klickt schon schließt, schließt das Popup erst x Sekunden nach dem letzten Klick:

var timeout;
$( document ).on( "pageinit", function() {
    $( '.ui-popup:not(.alert)' ).on({
                popupafteropen: function() {
            timeout = setTimeout( function(){ $( '.ui-popup' ).popup( 'close' ) }, 30000 );
        },
        click: function() {
                        clearTimeout(timeout);
            timeout = setTimeout( function(){ $( '.ui-popup' ).popup( 'close' ) }, 30000 );
        }
    });
});

Gruß, Sascha

[Keule09]

Hallo Smai und Cybers,

vielen Dank für eure Hilfe, jetzt klappt es mit dem automatischem schliessen der Popups

Gruß Marco