Demo: Mobil Page mit Navigation Slideout und Footer Tab Bar

[setstate]

www/tablet/index_nav_footer.html

- Footer bleibt immer fix am unteren Rand
- Navigations-Tab-Bar zum Wechseln auf Unterseiten im Footer
- Zusätzliche Navigation in Slideout-Menü für selten genutzte Unterseiten (z.B. Settings)

[choetzu]

Sehr cool! Das hat mir noch gefehlt!! Danke!

Leider habe ich aber immer noch meine liebe Mühe mit dem laden der Seite. Offensichtlich bin ich da alleine auf weiter Flur..

[klausw]

sehr schick, das habe ich gleich eingebaut 

gibt es eine Möglichkeit den vertikalen Scollbalken wegzubekommen?
Dazu müsste man vermutlich die Höhe der Kopfzeile von der Body Höhe abziehen.
Ich habe leider nicht gefunden wie das geht.
(mit style="max-height: 90%;" geht es zwar einigermaßen, ist das aber von der Bildschirmauflösung abhängig)

[setstate]

wenn man die Seite zum Home-Bildschirm hinzufügt, um sie per Icon im Vollbildmodus direkt zu starten, passt das Ganze schön auf den Bildschirm. Und auf dem Mobilphone sieht man eh keine Scollbalken dauerhaft.
Aber, ja. Du hast Recht. Sauberer wäre es, wenn man beim Vorhandensein eines header-nav, dessen Höhe beim Content abzieht.

Hiermit kann man das in der CSS erzielen:

Code Auswählen Erweitern


#header-nav ~ .page {
    height: calc(100% - 55px);
}


Ich nehme das in die CSS mit auf

[klausw]

Stimmt, auf dem PC fällt es erheblich mehr auf.

Mir ist noch etwas aufgefallen.
Der Text in der Kopfzeile bleibt leer, wenn man auf ein Icon in der Fußzeile klickt (ist auch verständlich, da kein Titel dafür angegeben ist). Dummerweise bleiben deswegen aber auch die Settings oben stehen, nachdem sie einmal ausgewählt wurden.

[klausw]

In der Navigationsfußzeile habe ich jetzt auch einen link auf meine Anrufliste aufgenommen.
Ist es auch Möglich "warn" zu nutzen um die Zahl der verpassten anrufe anzuzeigen (wie bei pagebutton)?
Und falls das möglich ist...kann man den link aus so konfigurieren, das bei einem klick darauf ein Reading (in diesem Fall die verpassten Anrufe) zurückgesetzt wird?

Grüße
Klaus

[setstate]

Code Auswählen Erweitern


    <div data-type="symbol"
            data-device="ftuitest"
            data-get="countWarnings"
            data-states='["0","1"]'
            data-icons='["fa-phone","fa-phone warn"]'
            data-colors='["#999","#999"]'
            onclick="ftui.setFhemStatus('set fritzbox reset');"
            >
    </div>


[klausw]

Danke, der Tip mit dem onklick hat mich schonmal weitergebracht.

die Klasse Symbol nützt mir nicht viel, da ich ja beim draufklicken auch die entsprechende Seite laden will.
Ich habe das jetzt erstmal mit pagebutton gelöst.
Das scheint zu funktionieren.

[choetzu]

Gibt es eine Möglichkeit die Den Footer zu fixieren? Meine Seiten sind teilweise länger und beim scrollen kommt der footer mit?
Danke!

[setstate]

Footer fixiert, das war die Absicht.
Durch das Calc zum Eliminieren der Scrollbar, läuft es auf dem Telefon nicht mehr.
Deshalb muss man das Unterscheiden:

CSS

Code Auswählen Erweitern


#header-nav ~ .page {
    height: calc(100% - 55px);
}

@media screen and (max-width: 480px) {
    #header-nav ~ .page {
        height: 100%;
    }
}


So sollte es bei beiden funktionieren: Telefon - footer fixiert und Desktop: Scollbar weg

[choetzu]

danke. Ich habe ein update gemacht, restart und das neue index_nav_footer.html angepasst. Leider gehts weder auf Safari noch auf Chrome  auf meinem iPhone 6. Oder muss ich von Hand was in einem CSS File ändern?

[setstate]

Hätte gehen müssen. Schade!

[klausw]

Seltsam, bei mir ist die Fußleiste von Anfang an Fix gewesen.
Das Einzige was bei Seiten stört, die länger sind um sie komplett auf dem Bildschirm darzustellen ist, das die Fußzeile immer das letzte Stück verdeckt. Das lässt sich aber einfach umgehen, indem man am Ende eine leere <section> in höhe der Fußzeile anlegt.

[choetzu]

Klausw, hast du auch iPhone 6?

[klausw]

Nee,
Habe es getestet unter Android mit Chrome und dem Browser von HTC und unter Windows mit Firefox und Chrome.