• Wenn du hier im Forum ein neues Thema erstellst, sind schon Punkte aufgeführt die du ausfüllen musst. Das dient im Allgemeinen dazu die notwendigen Informationen direkt mit der Frage bereitzustellen.
    Da in letzter Zeit immer wieder gerne das Formular gelöscht wurde und erst nach 3 Seiten Nachfragen die benötigten Infos für eine Hilfe kommen, werde ich nun jede Fragestellung die nicht einmal annähernd das Formular benutzt, sofort in den Sondermüll schicken.
    Füllt einfach die abgefragte Daten aus und alle können euch viel schneller helfen.

if Condition für responsive Design?

André Daub

André Daub

Bekanntes Mitglied
Registriert
23. Feb. 2012
Beiträge
272
Punkte
93
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
 
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...
 
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?
 
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>
 
Natürlich geht das. Du musst nur den ersten Artikel lesen, den Walter verlinked hat, lesen. Da steht drin wie das geht.
 
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.
 
rellek schrieb:
Code: 
<script>if($(window).width() > 750) {
     document.write('bannercode');
}</script>
Zum Vergrößern anklicken....
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?
 
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. :help:
 
Nix mit Abfragen, du musst nur einem Objetk diese Klasse geben.
HTML: 
<div class="banner visibleResponsiveDesignFull">
Some Content
</div>
 
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?
 
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?
Zum Vergrößern anklicken....

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>
 
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.
 
Ich vermute es, ausprobiert habe ich es noch nicht.
 
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.
 
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.
 
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:
 
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?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben