Jump to content

Javascript / php wizard for browser size problem...


Recommended Posts

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

 

 

 

 

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/

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

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.