Why is there no 'responsive' variable/switch in XF 1.2?

How about a little toggle switch that says "switch to desktop view"? Some people like to see the whole site as it looks on the desktop even though they are on their phones.
 
Right Here we go, the below code is what I've used to get everything working:

In extra.css
Code: 
.tnads {
margin-left: auto ;
margin-right: auto ;
}
/* For desktops */
.tnadsM { display: none !important; }
.tnadsT { display: none !important; }
.tnadsD { display: inherit !important; }
/* Tablets & small desktops only */
@media (min-width: 481px) and (max-width: 850px) {
.tnadsM { display: none !important; }
.tnadsD { display: none !important; }
.tnadsT { display: inherit !important; }
}
/* Phones only */
@media (max-width: 480px) {
.tnadsD { display: none !important; }
.tnadsT { display: none !important; }
.tnadsM { display: inherit !important; }
}

In my header I've got:

Code: 
<xen:if is="!{$visitor.user_id}">
<script type="text/javascript">// <![CDATA[
        googletag.cmd.push(function() {
            var width = window.innerWidth || document.documentElement.clientWidth;
            if (width >= 851) {
googletag.defineSlot('/9999/Footer-TN-G-D', [728, 90], 'div-gpt-ad-1373383646816-0').addService(googletag.pubads());
<xen:if is="in_array({$contentTemplate}, array('online_list','dark_taigachat_full','forum_list','member_list'))">googletag.defineSlot('/9999/HeaderSmall-TN-G-D', [468, 60], 'div-gpt-ad-1373384704971-3').addService(googletag.pubads());<xen:else />googletag.defineSlot('/9999/Header-TN-G-D', [728, 90], 'div-gpt-ad-1373384704971-0').addService(googletag.pubads());</xen:if>
<xen:if is="{$contentTemplate} == 'thread_view'">googletag.defineSlot('/9999/Post-TN-G-D', [300, 250], 'div-gpt-ad-1373384704971-5').addService(googletag.pubads());</xen:if>
<xen:if is="in_array({$contentTemplate}, array('online_list','forum_list','member_notable'))">googletag.defineSlot('/9999/SidebarBottom-TN-G-D', [250, 250], 'div-gpt-ad-1373388675675-1').addService(googletag.pubads());</xen:if>
<xen:if is="in_array({$contentTemplate}, array('online_list','forum_list','member_notable'))">googletag.defineSlot('/9999/SidebarTop-TN-G-D', [250, 250], 'div-gpt-ad-1373388675675-5').addService(googletag.pubads());</xen:if>
$(".tnadsM").remove();
$(".tnadsT").remove();
            }
            else if ((width >= 481) && (width <= 800)) {
googletag.defineSlot('/9999/Footer-TN-G-T', [468, 60], 'div-gpt-ad-1373383646816-2').addService(googletag.pubads());
<xen:if is="in_array({$contentTemplate}, array('online_list','dark_taigachat_full','forum_list','member_notable'))">googletag.defineSlot('/9999/HeaderSmall-TN-G-T', [468, 60], 'div-gpt-ad-1373384704971-4').addService(googletag.pubads());<xen:else />googletag.defineSlot('/9999/Header-TN-G-T', [468, 60], 'div-gpt-ad-1373384704971-2').addService(googletag.pubads());</xen:if>
<xen:if is="{$contentTemplate} == 'thread_view'">googletag.defineSlot('/9999/Post-TN-G-T', [234, 60], 'div-gpt-ad-1373384704971-6').addService(googletag.pubads());</xen:if>
<xen:if is="in_array({$contentTemplate}, array('online_list','forum_list','member_notable'))">googletag.defineSlot('/9999/SidebarTop-TN-G-T', [234, 60], 'div-gpt-ad-1373388675675-6').addService(googletag.pubads());</xen:if>
$(".tnadsM").remove();
$(".tnadsD").remove();
            }
else if (width <= 480) {
googletag.defineSlot('/9999/Footer-TN-G-M', [234, 60], 'div-gpt-ad-1373383646816-1').addService(googletag.pubads());
googletag.defineSlot('/9999/Header-TN-G-M', [234, 60], 'div-gpt-ad-1373384704971-1').addService(googletag.pubads());

$(".tnadsT").remove();
$(".tnadsD").remove();
}
            googletag.pubads().enableSingleRequest();
            googletag.enableServices();
        });
// ]]></script>
</xen:if>

then in the locations I've got for my header for example:

Code: 
<xen:if is="!{$visitor.user_id}">
<xen:if is="in_array({$contentTemplate}, array('online_list','dark_taigachat_full','forum_list','member_notable'))">
<!-- HeaderSmall-TN-G-D -->
<div class='tnads tnadsD' id='div-gpt-ad-1373384704971-3' style='width:468px; height:60px; margin-top:8px; margin-bottom:8px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1373384704971-3'); });
</script>
</div>
<!-- HeaderSmall-TN-G-T -->
<div class='tnads tnadsT' id='div-gpt-ad-1373384704971-4' style='width:468px; height:60px; margin-top:8px; margin-bottom:8px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1373384704971-4'); });
</script>
</div>
<xen:else />
<!-- Header-TN-G-D -->
<div class='tnads tnadsD' id='div-gpt-ad-1373384704971-0' style='width:728px; height:90px; margin-top:8px; margin-bottom:8px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1373384704971-0'); });
</script>
</div>
<!-- Header-TN-G-T -->
<div class='tnads tnadsT' id='div-gpt-ad-1373384704971-2' style='width:468px; height:60px; margin-top:8px; margin-bottom:8px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1373384704971-2'); });
</script>
</div>
</xen:if>
<!-- Header-TN-G-M -->
<div class='tnads tnadsM' id='div-gpt-ad-1373384704971-1' style='width:234px; height:60px; margin-top:8px; margin-bottom:8px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1373384704971-1'); });
</script>
</div>
</xen:if>
</xen:if>
 
Has anyone figured out solutions for other ad networks. Unfortunately Google won't accept me :(

I have very basic ads that look like:
Code: 
<script type="text/javascript" src="http://adnetwork.....width=728&height=90"></script>
 
TeflonDon said:
Has anyone figured out solutions for other ad networks. Unfortunately Google won't accept me :(

I have very basic ads that look like:
Code: 
<script type="text/javascript" src="http://adnetwork.....width=728&height=90"></script>
Click to expand...
Try Adzerk I've found them much better than Google.
 
Hm... I just scrolled through and didn't see anyone mention this:

1. Don't include the ads in the main templates. Instead have an empty container like <div class="responsiveAds"></div>
2. Use AJAX, onDocumentReady and window.onResize, to send the current viewport size to the server.
3. Have the server pick the ad code you need.
4. Use the AJAX output to populate div.responsiveAds.

A bit roundabout, but you avoid having to use display:none which is a no-no for Google and other networks. And it gives you the freedom to use different types of ads depending on the viewport.
 
Last edited:
I do not see my answer here so I apologize if I missed it.

I have a page node that I created which has our "Featured Videos". However, that is the only page on the forum that is not responsive. How can I go about making it responsive so that it formats better on different screen sizes?
 
majesty95 said:
Yes, I know it needs to be coded. And yes, I've read that thread. But it does not state how to make a single page node responsive, at least does not make it apparent. I'm not great with CSS which is why I was asking what I need to do to make the single page with videos responsive.
Click to expand...

There's no secret formula that is a one-trick pony when it comes to responsive. You'll almost always need to make custom adjustments when it comes to custom pages. Depending on the amount of work it requires you may need to hire someone to do it, or just post on the community styling part to see if someone can help out(they'll need the link).
 
thumped said:
for DFP / Adsense, i just put the usual ad setup stuff for every ad type in page_container HEAD

then wrapped the ad invocation code in a bit of JS to detect screen width

Code: 
<script type='text/javascript'>
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (width > 730) {
display 728x90 leaderboard invocation code
}
</script>

<script type='text/javascript'>
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (width < 729) {
mobile-friendly ad invocation code
}
</script>
Click to expand...

Is this still a good way to load content based on viewport size?
 
You must log in or register to reply here.

Similar threads

H
  • Question Question
XF 2.2 Why is there no phone
Replies
12
Views
304
htsumer
H
B
  • Question Question
XF 2.1 Why is there no meta keywords field for SEO?
Replies
4
Views
661
ShikiSuen
ShikiSuen
nocte
XF 2.0 XF\Mvc\Entity\Finder - why is there no whereIdsNot() method?
Replies
2
Views
877
nocte
nocte
gavpeds
  • Question Question
XF 1.4 Why is there no way to turn off RSS?
Replies
2
Views
2K
AndyB
AndyB
ekine
Add-on Why is there no decent blog addon for xenforo?
2 3 4
Replies
64
Views
21K
Mouth
Mouth
Top Bottom