if Condition für responsive Design?

André Daub · 12. Sep. 2013

Gibt es eine if Condition mit der ich abfragen kann ob der Style gerade in maximaler Breite angezeigt wird, oder zusammengestaucht?

Ich möchte nämlich heute die Ads konfigurieren und da wäre das sehr hilfreich.

Also so in der Art:

Wenn 100%
-> dann Banner 728 x 90
wenn responsive dann
-> gar kein Banner oder Banner 250 x 250

Walter · 12. Sep. 2013

Die Sache ist ein wenig komplizierter, responsive passiert nämlich nicht am Server (d.h. zur Zeit der Auslieferung der Seite) sondern am Client (d.h. zu dem Zeitpunkt wo die Seite angezeigt wird).

Brogan hat dazu einige Anleitungen erstellt:
http://xenforo.com/community/resources/responsive-design.2193/
http://xenforo.com/community/resources/responsive-adsense.2084/

De fakto haben viele Anbieter noch gar keine Responsive Ads im Programm und selbst Google, mit dem es machbar ist (siehe zweiter Link) ist nicht perfekt.

Bei Adsense ist es noch am leichtesten, da genügen ein paar IFs im Javascript...

André Daub · 12. Sep. 2013

Ok, das hatte ich schon mal so im groben gesehen. Ich habe aber einen Anbieter (kein adsense) der bucht einen festplatzierten Banner 728 x 90.

Da war die Idee den Banner halt nur anzuzeigen, wenn der die Seite am Rechner angezeigt wird oder breit genug für den banner. Das geht aber offenbar dann wohl nicht.

Da bleibt mir fast nur übrig, das responsive zu deaktivieren und die Breite der Seite komplett fix zu machen, oder?

rellek · 12. Sep. 2013

Du kannst ab abfragen, wie gross das Browserfenster zum Zeitpunkt des Ladens der Seite war und dann entweder den Banner anzeigen oder eben nicht...

Code:

<script>if($(window).width() > 750) {
     document.write('bannercode');
}</script>

Hoffi · 12. Sep. 2013

Natürlich geht das. Du musst nur den ersten Artikel lesen, den Walter verlinked hat, lesen. Da steht drin wie das geht.

Hoffi · 12. Sep. 2013

Nein, Rellek. So würde ich das nicht machen. a) Wegen JS und Größenänderungen und b) weil es eleganter geht.

Example 3 wäre der richtige Ansatz.

André Daub · 12. Sep. 2013

rellek schrieb:
Code:

<script>if($(window).width() > 750) { document.write('bannercode'); }</script>

Das klingt für mich logisch und machbar.
Example 3:

Code:

<xen:if is="@enableResponsive">
    @media (max-width:800px) {
        .MyContent {
        color: red;
        }
    }

    @media (max-width:610px) {
        .MyContent {
        color: green;
        }
    }

    @media (max-width:480px) {
        .MyContent {
        color: blue;
        }
    }
</xen:if>

Wenn ich das richtig verstehe, wird ja ein und das gleiche Banner in 3 Stufen anders angezeigt? Das banner ist aber nicht variabel und müsste bei kleinerem Bildschirm durch ein komplett anderes ersetzt werden.

Oder könnte ich in das CSS den HTML Code vom Banner reinschreiben, der im jeweiligen Fall geladen werden soll?
Und vor allem wie würde dann dann der Code aussehen der ins Ad-Template müsste?

ragtek · 12. Sep. 2013

Du könntest auch die XF Klassen verwenden, damit da nicht zuviel Chaos mit den verschiedenen Größen reinkommt, da die max. Breite ja auch im Style hinterlegt ist.

http://xenforo.com/community/threads/responsive-helper-classes.56459/#post-601743

André Daub · 12. Sep. 2013

Das klingt doch gut und wie frage ich die ab?

<xen:if is=".visibleResponsiveFull&visibleResponsiveWide">
Großer Banner
<xen:else />
Kleiner Banner
</xen:if>

So im Prinztip würe mir das vollkommen langen, nur die Abfrage müsste funktionieren.

Hoffi · 12. Sep. 2013

Nix mit Abfragen, du musst nur einem Objetk diese Klasse geben.

HTML:

<div class="banner visibleResponsiveDesignFull">
Some Content
</div>

André Daub · 12. Sep. 2013

Hm, also könnte ich das so machen:

Template: ad_below_content

Code:

<xen:if is="!{$visitor.user_id}">

<div class="banner visibleResponsiveDesignFull">Banner-code 728 breit</div>
<div class="banner visibleResponsiveDesignWide">Banner-code 728 breit</div>
<div class="banner visibleResponsiveDesignMedium">Banner-code 350 breit</div>
<div class="banner visibleResponsiveDesignNarrow">Banner-code 350 breit</div>

</xen:if>

? Und dann wird auch nichts doppelt angezeigt?

Das wäre ja ziemlich einfach und genial.

Aber wie kommst Du auf:

banner visibleResponsiveDesignFull

die Klasse heißt doch:

.visibleResponsiveFull

Muss ich dann irgendwo noch was im CSS definieren?

Hoffi · 12. Sep. 2013

André Daub schrieb:
Hm, also könnte ich das so machen:

Template: ad_below_content

Code:

<xen:if is="!{$visitor.user_id}"> <div class="banner visibleResponsiveDesignFull">Banner-code 728 breit</div> <div class="banner visibleResponsiveDesignWide">Banner-code 728 breit</div> <div class="banner visibleResponsiveDesignMedium">Banner-code 350 breit</div> <div class="banner visibleResponsiveDesignNarrow">Banner-code 350 breit</div> </xen:if>

? Und dann wird auch nichts doppelt angezeigt?

Das wäre ja ziemlich einfach und genial.

Aber wie kommst Du auf:

banner visibleResponsiveDesignFull

die Klasse heißt doch:

.visibleResponsiveFull

Muss ich dann irgendwo noch was im CSS definieren?

Nein, im CSS nicht. Und du kannst mehr als eine Klasse vergeben. Du hast da redundaten Code. Die Klasse banner von mir war auch nur ein Beispiel. Wenn du keine eigene hast, dann eher so.

Code:

<xen:if is="!{$visitor.user_id}">

<div class="visibleResponsiveDesignWide visibleResponsiveDesignFull">Banner-code 728 breit</div>
<div class="visibleResponsiveDesignMedium visibleResponsiveDesignNarrow">Banner-code 350 breit</div>

</xen:if>

André Daub · 12. Sep. 2013

Das klingt doch super, werde ich gleich direkt mal antesten.

Und kurz zum Verständnis nochmal:

Code:

<xen:if is="!{$visitor.user_id}">
<div class="visibleResponsiveDesignWide visibleResponsiveDesignFull">Banner-code 728 breit</div>
</xen:if>

So würde die Werbung dann nur im wide oder full Style angezeigt, und bei medium oder narrow würde gar nichts angezeigt, richtig?

Vielen Dank schonmal.

Hoffi · 12. Sep. 2013

Ich vermute es, ausprobiert habe ich es noch nicht.

André Daub · 13. Sep. 2013

Mal folgendes zum testen probiert:

Code:

<div class="visibleResponsiveDesignWide visibleResponsiveDesignFull"><img src="/upload/test.jpg" width="800" height="250" border="0" alt="Abendbaum"></div>

Funktioniert nicht. Der Banner wird auch am Smartphone ausgeliefert.

Code:

<xen:hook name="ad_above_top_breadcrumb" />
<div class="visibleResponsiveDesignWide visibleResponsiveDesignFull"><img src="/upload/test.jpg" width="800" height="250" border="0" alt="Abendbaum"></div>
<div class="visibleResponsiveDesignMedium visibleResponsiveDesignNarrow">Banner-code 350 breit</div>

So werden jeweils am Desktop als auch am Smartphone beide Varianten ausgegeben.

Die Abfrage funktioniert so also nicht.

André Daub · 13. Sep. 2013

Das Script von @rellek funktioniert im Prinzip, aber nicht wenn der Banner code selbst ein Script ist.

Code:

<script type="text/javascript" src="http://imagesrv.adition.com/js/adition.js"></script>
<script type="text/javascript" src="http://ad3.adfarm1.adition.com/js?wp_id=705822"></script>

Dann wird statt des Banners folgendes ausgegeben: '); }

Gibt es da eine Lösung für? Das würde mir für den Anfang schon helfen bei dem einen Banner. An den anderen Stelen baue ich eh responsive adsense ein.

André Daub · 13. Sep. 2013

Jeremy hatte für meinen Fall die perfekte Idee:

Code:

<div id="banner123" class="hiddenResponsiveWide hiddenResponsiveMedium hiddenResponsiveNarrow">
Bannercode
</div>

Wird nur angezeigt, wenn jemand der Style auf Maximum angezeigt wird (Bei mir 110 Pixel)

Perfekt und einfach, nur muss man erstmal drauf kommen. :cool:

André Daub · 26. Sep. 2013

Im vorigen Post das funktioniert ja. Wieso funktioniert dann folgendes nicht:

Code:

<div id="banner124" class="hiddenResponsiveMedium hiddenResponsiveNarrow">
Banner large
</div>

<div id="banner125" class="hiddenResponsiveFull hiddenResponsiveWide hiddenResponsiveNarrow">
Banner medium
</div>

<div id="banner126" class="hiddenResponsiveFull hiddenResponsiveWide hiddenResponsiveMedium">
Banner small
</div>

In dem Fall werden nämlich wieder alle Banner angezeigt?

André Daub · 23. Okt. 2013

Vielleicht kann mir jemand helfen. Vermutlich drücke ich mich auch völlig falsch aus:

http://xenforo.com/community/threads/only-show-banner-ad-if-fullwidth-style.59582/

Vom Prinzip habe ich 2 unterschiedliche Banner. Je nach Größe will ich Banner 1 oder Banner 2 laden lassen.

Jemand eine Idee?

principia · 23. Okt. 2013

schau mal hier:
http://xenforo.com/community/resources/responsive-design.2193/
beispiel 2

if Condition für responsive Design?

Bekanntes Mitglied

Bekanntes Mitglied

Bekanntes Mitglied

Bekanntes Mitglied

!important

!important

Bekanntes Mitglied

ragtek

Gast

Bekanntes Mitglied

!important

Bekanntes Mitglied

!important

Bekanntes Mitglied

!important

Bekanntes Mitglied

Bekanntes Mitglied

Bekanntes Mitglied

Bekanntes Mitglied

Bekanntes Mitglied

Bekanntes Mitglied

Wir schützen deine Privatsphäre