Hide/Show Layers based on Screen Width

Should be an easy one

[idiotgirl]

It seems to me there must be a fast hack for hiding or showing layers based on screen width via javascript. There may have been a posting about this earlier but I used the WMW search and couldn't locate it.

I want to detect screen width, and if more than 640 pixels wide, show another layer or an IFRAME (Netscape or MSIE) to the right in a column. Else, false, show nothing, retreat and die.

Seems like this could be done in about six or eight lines of code. I'm sure people do it all the time (I just never had a reason until now) so I'm guessing it's already been posted.

Can anyone post the link or ???

<added>I'm also wondering if I can pass js vars of screen width to an embedded server script using if, elif - I don't know a way to get the screen width var using anything other than javascript<added>

Thanks much,

Idiotgirl

[MikeFoster]

Hi iGirl,

This is from a dhtml api and shows how to get "innerWidth" for IE4+, NN4+, NS6, and Opera4+.

function cbeInnerWidth()
{
var w = 0;
if (is.nav4up) {
w = window.innerWidth;
if (document.height > window.innerHeight) // has vert scrollbar
w -= 16;
}
else if (is.ie4up) {
w = document.body.clientWidth;
}
else if (is.opera) {
w = window.innerWidth;
}
return w;
}

[idiotgirl]

Dear Mike-

I think what I'm trying to do is something on the order of (this isn't real code! - it's just a note to myself while I was pondering this)

var thiswidth = screen.width
if thiswidth value is [more than ] 640 > = [yes] AND browser is MSIE 4 > or 5 >
document.write ('show IFRAME [source]')
else if value is 640 > [ yes ] AND browser is Netscape 4 >
document.write ('show layer [source]')
else thiswidth value is < 640 [ no room here ] EXIT and DIE

and go through configuring browser versions blah blah

I'm guessing this is anything new or rocket science - but I'm wondering what the most flexible and efficient way to do it would be. I use SSI and embedded server commands a lot and don't want to pigeonhole myself any more than I have to.

Thanks,

Idiotgirl

[MikeFoster]

Hi iGirl,

Sorry, I didn't read your question well enough. Maybe this will help:

<script type='text/javascript'><!--
function MiniClientSniffer()
{
  this.ua = navigator.userAgent.toLowerCase();
  this.major = parseInt(navigator.appVersion);
  // Opera
  this.opera = this.ua.indexOf('opera') != -1;
  if (this.opera) return;
  // MSIE
  this.ie = this.ua.indexOf('msie') != -1;
  this.ie4up = this.major >= 4;
  if (this.ie) return;
  // Gecko, NN, and NS
  this.gecko = this.ua.indexOf('gecko') != -1;
  this.nav = (this.ua.indexOf('mozilla') != -1 && this.ua.indexOf('spoofer') == -1 && this.ua.indexOf('compatible') == -1);
  this.nav4 = this.nav && this.major == 4;
}
is = new MiniClientSniffer();
if (screen.width > 640) {
  if (is.ie4up) {
    ...
  }
  else if (is.nav4) {
    ...
  }
  else {
    ...
  }
}
else {
  if (is.ie4up) {
    ...
  }
  else if (is.nav4) {
    ...
  }
  else {
    ...
  }
}
//--></script>

[idiotgirl]

Hi Mike,

Well well well! I worked on this last night and came up with an all together different approach, but wasn't able to effectively simplify getting the version for each browser. (Think I went var-happy). Basically, yours looks like a shiny new gun and my version looked like a wooden club with nails at the end of it.

I kept trying to Perl-ize it to no avail.

I'm going to try this out tonight. Can't wait. Thanks!!!