Hallo,
in einem Shop soll die sehr lange Kategoriebeschreibung in einem aufklappbaren Bereich (toogle) erscheinen, sobald die Seite unter Mobile geöffnet wird, da der Text sonst zu lang ist.
Der toogle-Bereich funktioniert auch schon auf der start.tpl (in der Entwicklungsumgebung).
Allerdings fehlt nun noch die Abfrage, ob mobile, also Handy oder Tablet.
Ich bin nun schon einige Scripte durch, Foren / Module durchsucht, kann aber leider keine passende Abfrage bzgl. UserAgent finden.
Meine Frage: wie/wo baue ich welche Abfrage ein, damit Oxid an dieser Stelle erkennt, ob er sich unter mobile (@media (max-width: 555px) oder desktop befindet?
Vorzugsweise gerne direkt in der start.tpl und list.tpl.
start.tpl
Hier der Toogle-Bereich (die Toogle-Funktion steht im Header)
[{oxifcontent ident=“oxstartwelcome” object=“oCont”}]
_
_
_
_
_
_
_
[{$oCont->oxcontents__oxcontent->value}]
_
_
_
_
_
_ _
_ [{/oxifcontent}]_
Tausend Dank
Sandra
So
[{if method_exists($oViewConf, 'getActiveTheme') && $oViewConf->getActiveTheme() == 'mobile'}]
oder per CSS (alles, was stört, ausblenden)
@media only screen and (min-width: 320px) and (max-width: 1024px) {
...
}
mmh…Danke.
Allerdings läuft der Shop hier nicht mit Theme “mobile”, sondern “roxive”, so dass die Abfrage nicht greift.
Gibt es noch eine Möglichkeit?
In der start.tpl direkt anzugeben, falls @media (max-width: 555px) {
…?
Ganz ausgeblendet soll ja nichts werden. Nur unter mobile der lange Text ins toogle-Script rein. Also ein else brauche ich in der Abfrage.
Ok, bei Flow bringt die erste Variante nichts.
Mit CSS und dem Query kannst doch entscheiden, was ein und ausgeblendet wird. Ist ja quasi wie IF und ELSE und beliebig erweiterbar
/if normale Ansicht, dann so:/
#mehr {
display:block;
}
#mehr_mobile {
display:none;
}
/else mobile Ansicht, dann so:/
@media only screen and (min-width: 320px) and (max-width: 1024px) {
#mehr {
display:none;
}
#mehr_mobile {
display:block;
}
}
Hi rubbercut,
und wie definiere ich dann die Zeile in der start.tpl:"/if normale Ansicht, dann so:/"
[{ if( !isMobileDevice() ) ?
Das ist ja keine richtige Zeile und betrifft nur CSS.
Alles, was nicht in einem Media-Query eingefasst ist, wird zunächst einmal ausgeführt.
Mit den Inhalten in den Media-Queries bestimmt man die Ansichten (Größe, Lage, Einblendung oder nicht) auf den einzelnen Geräten. Trifft ein Query zu (d.h. das Gerät (iPad etc.) liegt zwischen min+max eines Queries), werden diese Anweisungen zusätzlich aufgeführt. Dabei können vorhandene Anweisungen ergänzt oder überschrieben, sowie neue hinzugefügt werden. Das war’s schon.
Mit dem Modul, so etwas gibt’s auch hier, fragst ja gezielt ab, welches Gerät die Website darstellt. Da kann man anders vorgehen.
Hi,
also, mein Script sieht nun folgendermaßen aus:
Allerdings funktioniert das Ausklappen nun nicht mehr, sobald ich “display:none;” in der style.css stehen habe und nicht mehr in der start.tpl.
Das verstehe ich nun absolut nicht.
Hier mein Script
style.css:
@media (min-width: 768px) {
#containerid {color:red;}
}
@media screen and (max-width: 767px){
#containerid{display:none;}
}
Weiss jemand Rat?
Sobald die Angabe style=“display:none;” in der start.tpl steht, funktioniert das Ausklappen. Doch dann hat ja noch keine Screen-Größen, Mobile-Unterscheidung stattgefunden!
Puh,
Danke.
Liebe Grüße Sandra
sorry, habe es herausgefunden:
“visibility” kann mit CSS animiert werden, “display” nicht.
Von dem her kann ich das Gewünschte wohl leider nicht ausschließlich mit css erreichen, muss wohl doch ein Modul zur Endgerät-Abfrage her.
Dennoch vielen Dank 
Grüße Sandra
Eigentlich musst nur mit 2 Parent-DIVs arbeiten, um den gleichen Effekt wie bei der der Endgeräte-Abfrage zu erreichen. Mit display:none; erscheint ein Container überhaupt nicht, dafür der andere und umgekehrt (wie in meinem Beispiel). Fertig 
…irgendwie stehe ich da total auf dem Schlauch, tut mir leid.
Wenn “display” nicht über die style.css angesprochen werden kann, und in der start.tpl-Datei keine CSS-Angaben wie @media only screen and (min-width: 320px) and (max-width: 1024px) stehen können, wie soll dann die Fallunterscheidung stattfinden?
Herzlichst, Sandra
Wer sagt denn das? Du musst doch nur den Container, der nur in “mobile” erscheinen soll, zunächst allgemein ausblenden: display:none;
Nur wenn der Media-Query zutrifft gibst den Container mit z.B. display:block; zur Ansicht frei. Damit kannst doch dann zwischen 2 Containern hin und herschalten.
display:none; reagiert nur, wenn es in der start.tpl-Datei steht. Sobald die display-Angaben in der css-Datei stehen, wird diesbezüglich alles ignoriert. Habe ich ausprobiert, ging echt nicht.
Dann wird es vielleicht von einer Anweisung, die weiter unten steht, überschrieben. Oder hast vielleicht noch einen Element-Style irgendwo? Such mal nach “CSS !important;”
[quote=“rubbercut, post:14, topic:92882”]
CSS !important;
[/quote] oder auch element-styles stehen nirgends.
Habe jetzt auch alles nochmal ursprünglich eingebaut und der Punkt ist nun momentan, in der angegebenen mobile-Größe lässt sich der “Mehr”-Bereich nicht ausklappen!
Das display:none; funktioniert unter mobile! Sorry, keine Ahnung warum es bisher nicht ging.
Allerdings funktioniert die Toogle-Funktion halt nicht, sobald dieses display:none in der .css-Datei steht. Wenn das display:none in der start.tpl steht, funktioniert es. Dann findet aber keine Mobile-Größen-Unterscheidung statt!!!
Ohne Ansicht wird Dir da niemand helfen können. Dann hol Dir das Modul zur Unterscheidung.
OK, mich interessiert das nun, wie es ohne Modul gehen würde.
Hier im Liveshop eingebaut. Siehe Startseite unten “Mehr”.
Naja, im Moment toggled “containerid” zwischen display:none und nix:
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
mmm…oh, Danke…allerdings erst beim 2.Mausklick auf "MEHR…ich check nochmal tmp…