Welcome to the MetaMod and Chameleon Support Forums.

Before posting, please check out the FAQs.

helpme

 

Need extra help with your Joomla site? Consider paid Joomla support by the developer of Chameleon and MetaMod.

 

Run adsense code according to window.innerWidth

Run adsense code according to window.innerWidth

is it possible to check the window.innerWidth and run a if statement to have differenct size adsense come up in a responsive design like

if (window.innerWidth >400) {

}

Please help?

bossies
Beginner Modder
ranks
useravatar
Offline
5 Posts
Administrator has disabled public posting

Re: Run adsense code according to window.innerWidth

i found this code below which works fine in metamod - just do not know how to use a if statement with the info

<script type="text/javascript">
<!--

var viewportwidth;
var viewportheight;
 
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
if (typeof window.innerWidth != 'undefined')
{
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
}
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
{
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
}
 
// older versions of IE
 
else
{
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>

bossies
Beginner Modder
ranks
useravatar
Offline
5 Posts
Administrator has disabled public posting

Re: Run adsense code according to window.innerWidth

Hi,

this is not really a MetaMod question - it's a Javascript question. You are just using MetaMod as a module for outputting Javascript (and you could probably do this with a standard HTML module).

However, at the point where there is the "document.write" statement, you can do an "if" statement to test the clientWidth and/or clientHeight values:

if (viewportWidth > 1000) {
  // insert AdSense code here
}
else if (viewPortWidth > 500) {
  // insert AdSense code here
}
else {
// for everything less than 500:
// insert AdSense code here
}

Stephen Brandon
MetaMod / Chameleon developer
If you use MetaMod or Chameleon, please post a rating and a review at the Joomla! Extensions Directory: Chameleon | MetaMod

metamodguy
useravatar
Offline
3329 Posts
User info in posts
Administrator has disabled public posting

Re: Run adsense code according to window.innerWidth

?>
<script type="text/javascript">
if(window.innerWidth < 400) {
    document.writeln('hello');
}
</script>
<?php


i got this to work - but now i would like to know if it's possible to return a module in a script? I tried below, but that does not work

?>
<script type="text/javascript">
if(window.innerWidth < 400) {
    return 75;
}
</script>
<?php

bossies
Beginner Modder
ranks
useravatar
Offline
5 Posts
Administrator has disabled public posting

Re: Run adsense code according to window.innerWidth

Simple answer - no. You're mixing up client-side and server-side logic. These happen at completely different times and in different places.

However, I have seen some clever setups that use systems like RocketTheme's RokModule. It's a system that allows the client, with JS, to load a module from the server with AJAX. I don't have any code to hand for this, so I'm sorry it's a bit unfair to say that it's possible but I can't help you make it happen! But if you can work out how to do an AJAX call on your site (perhaps with MooTools or jQuery, whichever your site is using), and if you can find the URL that it needs to call on your site in order to get the HTML for a module using RokModule, then this could be a great way to go.

http://www.rockettheme.com/extensions-d … -rokmodule

And when you solve it, can you please post back here with details?  ;-)

ok, I decided to at least look for the URL you need to use to get the contents of a module via AJAX, once the RokModule component is installed:

http://example.com/index.php?option=com … p;type=raw

Best regards,
Stephen

Stephen Brandon
MetaMod / Chameleon developer
If you use MetaMod or Chameleon, please post a rating and a review at the Joomla! Extensions Directory: Chameleon | MetaMod

metamodguy
useravatar
Offline
3329 Posts
User info in posts
Administrator has disabled public posting

Re: Run adsense code according to window.innerWidth

i am no coder but understand that you cannot mix the stuff - how about going the other way around to have your normal if statement - then call the script in in it and if it's true, return 75? - i found below - maybe it could help you in some sort of direction i HOPE...smile

if ('<script> document.write(window.innerWidth); </script>' < 1008) retrun 75;

bossies
Beginner Modder
ranks
useravatar
Offline
5 Posts
Administrator has disabled public posting

Re: Run adsense code according to window.innerWidth

No, sorry, this can't and won't work. You cannot mix front-end and back-end logic like this. The JS has to get run on the client, and the PHP on the server, and these happen at different times. You can't mix them.

Stephen Brandon
MetaMod / Chameleon developer
If you use MetaMod or Chameleon, please post a rating and a review at the Joomla! Extensions Directory: Chameleon | MetaMod

metamodguy
useravatar
Offline
3329 Posts
User info in posts
Administrator has disabled public posting

Board Info

Board Stats:
 
Total Topics:
1684
Total Polls:
6
Total Posts:
5940
Posts this week:
1
User Info:
 
Total Users:
5174
Newest User:
frashaomran
Members Online:
0
Guests Online:
138

Online: 
There are no members online

Forum Legend:

 Topic
 New
 Locked
 Sticky
 Active
 New/Active
 New/Locked
 New Sticky
 Locked/Active
 Active/Sticky
 Sticky/Locked
 Sticky/Active/Locked