Unterschiedliche Banner Formate anzeigen

chris73 · 17. April 2023

Hallo,

abhängig von der Bildschirmgröße möchte ich ein unterschiedliche Banner mittels der Komponente Banner und user.css anzeigen lassen.

Hierzu habe ich ein Banner wie folgt eingerichtet:

Code

<div class="ad_fullscreen" style="margin-left: auto; margin-right: auto; max-width:800px; height:250px;">
<script bannercode 1></script>
</div>
<div class="ad_mobile" style="margin-left: auto; margin-right: auto; max-width:300px; height:120px;">
<script bannercode 2></script>
</div>

Dazu habe ich in der user.css noch folgenden Code eingefügt:

CSS

/* Anzeige mit Mobile Version */
@media and (max-width: 799px) {
.ad_fullscreen{
display:none;
}
.ad_mobile{
display:block!important;
}
}
/* Anzeige mit Fullscreen Version */
@media (min-width: 800px) {
.ad_fullscreen{
display:block!important;
}
.ad_mobile{
display:none;
}
}

Alles anzeigen

Bei Fullscreen wird das große Banner auch angezeigt. Wenn man dann aber die Bilschirmgröße auf Mobile verkleinert, so wird weiterhin das große Banner und zusätzlich darunter das kleiner Banner angezeigt. Eigentlich sollte aber das große Banner verschwinden und nur das kleine Banner angezeigt werden.

Ich hoffe der Ansazt mit Komponente Banner und user.css ist der Richtige. Was mache ich hier aber noch falsch bzw. was fehlt noch, das der richtige Effekt (Switch der Banner) eintritt?

Schon vorab vielen Dank für Euren Support.

Chris

Stef · 17. April 2023

Vielleicht statt:

Code

bannercode 2"

so

bannercode 2

Kontrolliere nochmals dein Code.

chris73 · 17. April 2023

Vielen Dank. Das Anführungszeichen tut aber nichts zur Sache, da ich damit nur zeigen wollte, das dort ein Bannercode ist.

Chris

Stef · 17. April 2023

Browsercache gelöscht ?

Kontrolliere nochmals dein Code.

Versuche es mal so:

CSS

/* Anzeige mit Mobile Version */
@media and (max-width: 799px) {
.ad_fullscreen{
display:none;
}
}
.ad_mobile{
display:block!important;
}
}
/* Anzeige mit Fullscreen Version */
@media (min-width: 800px) {
.ad_fullscreen{
display:block!important;
}
.ad_mobile{
display:none;
}
}

Alles anzeigen

Da fehlte noch ein }

Kommt

Code

.ad_fullscreen

Wirklich unter @media ?

chris73 · 17. April 2023

Ich denke nicht, da die

Code

.ad_fullscreen und .ad_mobile

jeweils unter einer @media zusammengefasst sind --> media ((ad_fullscreen) (ad_mobile))

Chris

PS: Cache habe ich mehrmals gelöscht

Stef · 17. April 2023

Ja stimmt schon. Aber eben, ohne Link ist es schwierig, darum ist eine Testseite auf einem subDomain ideal.

chris73 · 17. April 2023

Leider nur lokal. Mache ich aber im Lösungsansatz falsch? Derzeit: beide Bannerscripte als Benutzerdefinierter Code wie oben geschildert in ein Banner der Banner-Komponente integrieren und dann die Steuerung via user.css? Warum funktioniert das nicht?

chris73 · 18. April 2023

Hallo,

noch ein Hinweis. Auf einer Nicht-Joomla Website von mir funktioniert die o.g. Lösung. Warum klappt das nicht unter Joomla? Muss hier noch etwas aufgrund der CMS-Struktur beachtet werden?

Wäre echt klasse, wenn jemand hierzu noch eine gute Idee hätte.

Schon vorab vielen Dank.

Chris

Re:Later · 18. April 2023

Ich hinterfrage mal das "and" in deiner Zeile 2.

Code

@media (max-width: 799px) {
    .ad_fullscreen{
        display: none;
    }

    .ad_mobile{
        display: block;
    }
}

@media (min-width: 800px) {
    .ad_fullscreen{
        display: block;
    }

    .ad_mobile{
        display: none;
    }
}

Alles anzeigen

und, wenn es nur um die 2 Zustände geht, kannst auch raffen.

Code

.ad_fullscreen{
    display: none;
}

.ad_mobile{
    display: block;
}

@media (min-width: 800px) {
    .ad_fullscreen{
        display: block;
    }

    .ad_mobile{
        display: none;
    }
}

Alles anzeigen

Außerdem lohnt auch immer ein Blick in den CSS-Inspektor des Browsers. Bei mir stand da "Ungültiger Wert" bzgl. "and".

UUUnd, wenn <script> bei dir echt ein JavaScript o.ä. bedeutet, dann hilft display:none; gar nichts: außer es generiert HTML im Container. Es wird trotzdem geladen. Ich habe also so getestet:

Code

<div class="ad_fullscreen" style="margin-left: auto; margin-right: auto; max-width:800px; height:250px;">
blubber
</div>
<div class="ad_mobile" style="margin-left: auto; margin-right: auto; max-width:300px; height:120px;">
blabber
</div>

chris73 · 18. April 2023

Schon einmal vielen Dank für Deine ausführliche Antwort. Wie ich verstehe, müsste die Lösung in Joomla so möglich sein (Komponente Banner + user.css) und auch keine weiteren Modifikationen/Einstellungen in Joomla sonstwo vorgenommen werden, richtig?

Was meinst Du eigentliche mit "and" in Zeile 2?

Bzgl. display:none funktioniert es in meiner Nicht-Joomla Seite ohne Problem. Im Bereich Script wird jweils ein Asynchronous JS Tag geladen.

Schon vorab vielen Dank für Deine Rückinfo hierzu.

Chris

chris73 · 18. April 2023

Hi,

noch ein kurzer Status.

Ich habe jetzt das geraffte CSS (ohne import! und zweitem @media) in die user.css eingebaut und siehe da, es funktioniert jetzt?!?

Das einzige Problem ist nun, dass man bei einer dynamischen Veränderung der Bildschirmgröße noch einmal den Browser refreshen muss, um das große bzw. das kleine Banner dann zu sehen. Wenn man die Bildschirmgröße belässt, dann wird auch gleich die richtige Größe angezeigt.

Kann man hier noch codetechnisch was machen, dass bei einer Veränderung der Bildschirmgröße übergangslos in die andere Bannergröße geswitcht wird?

Was müsste man im user.css machen, wenn man statt 2 auch 3 Bannergrößen integrieren möchte?

Bis dahin schon einmal Danke.

Chris

Re:Later · 18. April 2023

Das lässt sich nicht sagen ohne Link. Es gibt auch JavaScripte, die auf/in versteckte/n Elemente/n nicht funktionieren. Oder es liegt vielleicht an deinen Inline-CSS-Stilen, die vielleicht besser in die user.css gehören(?).

Zitat von Re:Later

UUUnd, wenn <script> bei dir echt ein JavaScript o.ä. bedeutet, dann hilft display:none; gar nichts: außer es generiert HTML im Container. Es wird trotzdem geladen.

... also beide JS werden geladen und das letzte gewinnt vielleicht, weil sie ähnlich sind.

oder, die vielleicht ihre Arbeit als erledigt ansehen und keinerlei Veranlassung haben neu zu starten, nur weil sich die Bildschirmbreite ändert. Da nimmt man dann vielleicht einen resize-EventListener im JavaScript.

oder...

Zitat von chris73

Was müsste man im user.css machen, wenn man statt 2 auch 3 Bannergrößen integrieren möchte?

Im Zweifelsfall halt weitere media-Queries (in der richtigen Reihenfolge).

Tags