# Abfrage ob mobile und dafür dann den Langtext in einen "MEHR"-Toogle-Aufklappbereich einfügen

**URL:** <https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882>\
**Category:** Deutsches Forum\
**Tags:** development\
**Created:** [January 17, 2018, 2:29pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882 "2018-01-17T14:29:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sandra77](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/77aa72/32.png) [@sandra77](https://forum.oxid-esales.com/u/sandra77)\
**Post date:** [January 17, 2018, 2:29pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/1 "2018-01-17T14:29:18Z")

</div>

Hallo,  
in [einem Shop](http://lunettes-shop.de/) 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”}]_  
\_

MEHR
\_  
\_ 
\_  
\_ 
* * *
\_  
\_ 
[{$oCont-\>oxcontents\_\_oxcontent-\>value}]
\_  
\_ 
* * *
\_  
\_ 
\_  
\_ \_  
\_ [{/oxifcontent}]\_

Tausend Dank  
Sandra

---

<div class="post-metadata">

**Author:** ![rubbercut](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/rubbercut/32/3520_2.png) [@rubbercut](https://forum.oxid-esales.com/u/rubbercut)\
**Post date:** [January 17, 2018, 4:49pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/2 "2018-01-17T16:49:06Z")

</div>

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) {
> ...
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![sandra77](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/77aa72/32.png) [@sandra77](https://forum.oxid-esales.com/u/sandra77)\
**Post date:** [January 17, 2018, 7:31pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/3 "2018-01-17T19:31:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rubbercut](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/rubbercut/32/3520_2.png) [@rubbercut](https://forum.oxid-esales.com/u/rubbercut)\
**Post date:** [January 17, 2018, 8:18pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/4 "2018-01-17T20:18:31Z")

</div>

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;  
> }  
> }

---

<div class="post-metadata">

**Author:** ![tesolutions](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/t/cdc98d/32.png) [@tesolutions](https://forum.oxid-esales.com/u/tesolutions)\
**Post date:** [January 18, 2018, 8:02am UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/5 "2018-01-18T08:02:14Z")

</div>

Mit dem Modul geht das [https://ecomstyle.de/oxid-module/useragent.html](https://ecomstyle.de/oxid-module/useragent.html)

---

<div class="post-metadata">

**Author:** ![sandra77](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/77aa72/32.png) [@sandra77](https://forum.oxid-esales.com/u/sandra77)\
**Post date:** [January 18, 2018, 12:14pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/6 "2018-01-18T12:14:49Z")

</div>

Hi rubbercut,  
und wie definiere ich dann die Zeile in der start.tpl:`"/if normale Ansicht, dann so:/"`

[{ if( !isMobileDevice() ) ?

---

<div class="post-metadata">

**Author:** ![rubbercut](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/rubbercut/32/3520_2.png) [@rubbercut](https://forum.oxid-esales.com/u/rubbercut)\
**Post date:** [January 18, 2018, 12:54pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/7 "2018-01-18T12:54:53Z")

</div>

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](http://www.foxido.de/mobile-detect), fragst ja gezielt ab, welches Gerät die Website darstellt. Da kann man anders vorgehen.

---

<div class="post-metadata">

**Author:** ![sandra77](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/77aa72/32.png) [@sandra77](https://forum.oxid-esales.com/u/sandra77)\
**Post date:** [January 25, 2018, 3:17pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/8 "2018-01-25T15:17:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sandra77](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/77aa72/32.png) [@sandra77](https://forum.oxid-esales.com/u/sandra77)\
**Post date:** [January 25, 2018, 4:31pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/9 "2018-01-25T16:31:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rubbercut](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/rubbercut/32/3520_2.png) [@rubbercut](https://forum.oxid-esales.com/u/rubbercut)\
**Post date:** [January 26, 2018, 4:27pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/10 "2018-01-26T16:27:10Z")

</div>

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 😉

---

<div class="post-metadata">

**Author:** ![sandra77](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/77aa72/32.png) [@sandra77](https://forum.oxid-esales.com/u/sandra77)\
**Post date:** [January 30, 2018, 10:07am UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/11 "2018-01-30T10:07:36Z")

</div>

…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

---

<div class="post-metadata">

**Author:** ![rubbercut](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/rubbercut/32/3520_2.png) [@rubbercut](https://forum.oxid-esales.com/u/rubbercut)\
**Post date:** [January 30, 2018, 10:23am UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/12 "2018-01-30T10:23:34Z")

</div>

> [@sandra77](#):
>
> Wenn “display” nicht über die style.css angesprochen werden kann

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.

---

<div class="post-metadata">

**Author:** ![sandra77](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/77aa72/32.png) [@sandra77](https://forum.oxid-esales.com/u/sandra77)\
**Post date:** [January 30, 2018, 10:26am UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/13 "2018-01-30T10:26:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rubbercut](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/rubbercut/32/3520_2.png) [@rubbercut](https://forum.oxid-esales.com/u/rubbercut)\
**Post date:** [January 30, 2018, 10:31am UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/14 "2018-01-30T10:31:27Z")

</div>

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;”

---

<div class="post-metadata">

**Author:** ![sandra77](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/77aa72/32.png) [@sandra77](https://forum.oxid-esales.com/u/sandra77)\
**Post date:** [January 30, 2018, 10:59am UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/15 "2018-01-30T10:59:17Z")

</div>

[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!!!

---

<div class="post-metadata">

**Author:** ![rubbercut](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/rubbercut/32/3520_2.png) [@rubbercut](https://forum.oxid-esales.com/u/rubbercut)\
**Post date:** [January 30, 2018, 11:05am UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/16 "2018-01-30T11:05:17Z")

</div>

Ohne Ansicht wird Dir da niemand helfen können. Dann hol Dir das Modul zur Unterscheidung.

---

<div class="post-metadata">

**Author:** ![sandra77](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/77aa72/32.png) [@sandra77](https://forum.oxid-esales.com/u/sandra77)\
**Post date:** [January 30, 2018, 2:10pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/17 "2018-01-30T14:10:50Z")

</div>

OK, mich interessiert das nun, wie es ohne Modul gehen würde.  
[Hier im Liveshop eingebaut.](https://lunettes-shop.de) Siehe Startseite unten “Mehr”.

---

<div class="post-metadata">

**Author:** ![rubbercut](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/rubbercut/32/3520_2.png) [@rubbercut](https://forum.oxid-esales.com/u/rubbercut)\
**Post date:** [January 30, 2018, 2:36pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/18 "2018-01-30T14:36:36Z")

</div>

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';
```

---

<div class="post-metadata">

**Author:** ![sandra77](https://forum.oxid-esales.com/letter_avatar_proxy/v4/letter/s/77aa72/32.png) [@sandra77](https://forum.oxid-esales.com/u/sandra77)\
**Post date:** [January 30, 2018, 2:39pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/19 "2018-01-30T14:39:45Z")

</div>

mmm…oh, Danke…allerdings erst beim 2.Mausklick auf "MEHR…ich check nochmal tmp…

---

<div class="post-metadata">

**Author:** ![rubbercut](https://forum.oxid-esales.com/user_avatar/forum.oxid-esales.com/rubbercut/32/3520_2.png) [@rubbercut](https://forum.oxid-esales.com/u/rubbercut)\
**Post date:** [January 30, 2018, 2:41pm UTC](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882/20 "2018-01-30T14:41:55Z")

</div>

TMP geleert?

[Next page](https://forum.oxid-esales.com/t/abfrage-ob-mobile-und-dafuer-dann-den-langtext-in-einen-mehr-toogle-aufklappbereich-einfuegen/92882.md?page=2)