homepage Welcome to WebmasterWorld Guest from 54.196.195.158
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Hide/Show Layers based on Screen Width
Should be an easy one
idiotgirl




msg:572986
 7:03 am on Sep 5, 2001 (gmt 0)

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




msg:572987
 3:10 pm on Sep 5, 2001 (gmt 0)

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




msg:572988
 10:25 pm on Sep 5, 2001 (gmt 0)

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




msg:572989
 8:09 pm on Sep 6, 2001 (gmt 0)

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




msg:572990
 10:57 pm on Sep 6, 2001 (gmt 0)

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!!!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved