Javascript / php wizard for browser size problem...

[rbrown]

rewriting one of my search engine sites (using Bing API) to use html5 and now I'm at the templating part and I want to check the browser window size before I output the php. The site is written so it does a lot of preproceesing before it out puts the page.

Like:

builds all the meta tags.

 

strips all the coding and gets the keywords based number of times the word is used.

then it will output them from high to low or low to high or random mix, will change case and add additional words and allow you to set the total number of keywords displayed and of the addtional are pre post or mixed into the total.

 

builds a tag cloud.

 

has template switching so you can preset christmas, easter, etc... templates and it will switch them based on the day range set.

 

has ads switching for amazon or ebay where it will change the ads based on the search term.

 

I have it so it works displays perfectly from a browser, to a tablet, to a phone... except for the ad sizes are too big. So I need to switch the the ads size based on the browser size.

 

So anyway.... what I'm trying to do and I'm not a javascript wizard, is get the browser window size so I can change the ad size... so if the window size is smaller than X it will display a smaller ad.

 

Like with css3 where you can switch the css with the

@media handheld, only screen and (max-width: 767px)

  setting.

 

I found this, but I'm not sure how to get it to a php var. I would run this while it is getting the rest of the page set then have it switch the php code for the ads. Like...  if($width > etc...

 

<script type="text/javascript">
  function getWidth()
  {
    xWidth = null;
    if(window.screen != null)
      xWidth = window.screen.availWidth;

    if(window.innerWidth != null)
      xWidth = window.innerWidth;

    if(document.body != null)
      xWidth = document.body.clientWidth;

    return xWidth;
  }
function getHeight() {
  xHeight = null;
  if(window.screen != null)
    xHeight = window.screen.availHeight;

  if(window.innerHeight != null)
    xHeight =   window.innerHeight;

  if(document.body != null)
    xHeight = document.body.clientHeight;

  return xHeight;
}

</script>

 

So how would I get and set the "getWidth()" to a php var?

 

Or do you have any other suggestions on reinventing the wheel?

 

Thanks,

Bob

 

 

 

 

[Mahngiel]

are you checking the user-agent to determine which stylesheets to bring in?  you don't need to pass a php variable to javascript to resize certain elements.  if you've built your site as responsive as you're suggesting, then all the javascript needs to do

 

you can get this value with jQuery simply with $(document).width();.  Based on that value you can automatically resize an element thusly: $('#ad_banner').css('width', '80px');

http://api.jquery.com/width/

[rbrown]

yeah... after doing some more poking around I see it's either jquery or ajax...

Was trying to avoid having to use / learn it.

 

Reading about css3 and html5 and the different options and then trying to put it all together with my script (you can type any url and it will give you a search result. with no 404 error) which is driven off one page with no database and no apache rewrites was tricky enough.

 

I got it to output the browser window size and it works pretty slick, except you need to refresh the screen to see change after you resize the browser. This wouldn't be a problem because most people don't resize their browsers while surfing.

 

But I can't get it to a php var (from what I have found so far) unless I use jquery or ajax.

 

So I guess it time to start reading...

 

Thanks,

Bob

 

[trq]

jQuery is just a JavaScript framework. You need Ajax.

 

Why? Because JavaScript executes on the client side while PHP, executes server side.