We help IT Professionals succeed at work.

Changing image size based on browser size??

mcneil
mcneil asked
on
What I need to do is align a table cell's bottom to the bottom of the browser frame.  Ordinarily you could (try) just giving the table a "height=100%", but due to the fact that this table is nested in several other cells, this doesn't work.

What would work is to be able to find the browser window size, and based on that, add or subtract to the height of a spacer gif within the cell to acheive the desired result.  I have found info on how to get the browser dimensions, but how can you use it to manipulate an image size?  I am by no means a javascript guru, so if you could please provide a code snipit, that would be GREAT!

Thanks!
Comment
Watch Question

Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:
<body>
<script>
h=(document.all) ? document.body.clientheight;window.innerHeight;
</script>
.
.
.
.
.
<script>
document.write('<img src="spacer.gif" width=1 height='+h+'>');
</script>
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:
clientHeight, sorry
what does the '?' do?

Commented:
mplungjan--
typo:
h=(document.all) ? document.body.clientheight:window.innerHeight;


chromonium,
the (document.all) is a logical test if the page accepts it, then use the document.body.clientHeight value, else use the window.innerHeight value

The "?" is the logic parameter (like if)

marilyng

Commented:
Focusing on what you want to do, instead how you want to do it...

If the table you want aligned to the bottom edge of the screen  is nested inside another table, why don't you make your outer table 100% tall? Then, put VALIGN="bottom" on the TD which holds the desired bottom-oriented table.
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:
It was late. Sorry.


h=(document.all) ? document.body.clientHeight:window.innerHeight;

is the same as

if (document.all)
     h=document.body.clientHeight
else h= window.innerHeight;

Michel



Commented:
mplungjan.. of course I did the same thing on the clientHeight when I was typing... smile.

marilyng

Author

Commented:
aetheros,

That won't work.  Making the outer table 100% doesn't help anything because it's the content of the inner table that must fill up the space to the bottom of the screen.  If I then make the inner table fill 100% then it is an ADDITIONAL 100% to the screen. (At least that's what it does in IE 5).  Which is why I'm having this delima ;-)

Author

Commented:
mplungjan and everyone,

The method works in netscape 4x and 6.1, but it doesn't work in IE 5, and it also screws up my DHTML layers.  When refreshing the page, an error sign appears for a split second, and if I'm fast enough, I can click it to show the error... "Object required, line 35".

Line 35 is: "h=document.body.clientHeight"

out of:
"
if (document.all)
    h=document.body.clientHeight
else h= window.innerHeight;
"

I was also getting an error saying that "h" is undefined, so I declared it, but I've never had to explicitly declare a variable in the rest of the code... so maybe that's related to the problem?

You can view the page yourself at: http://www.kakkoiimono.com/store.asp?t=32

I've turned the image border on so you can see where the spacer image is at... it's in the bottom left corner by the copyright. (In netscape the image appears too high, but I'll fix it later...)

I'm very close, and I appreciate everyones help! I've increased the points for your efforts!

Commented:
OK, Here's my code for my popwindows -- works in IE5:

function popWinWH(theURL) {//v2.0 Pop Window WH
     var wWidth = w;
     var wHeight = h;    
     var wXPos = Math.round((screen.availWidth -wWidth)/2);
     var wYPos = Math.round((screen.availHeight - wHeight ) / 2);
     var pgYPos = 150;
 
  winName="moreinfo";
  features="width=" + wWidth + ",height=" + wHeight + ",pageYOffset=" + pgYPos + ",dependent=yes,resizable=yes,status=no,scrollbars=yes,toolbars=no,top=" + wYPos + ",left=" + wXPos;
  remote=window.open(theURL,winName,features);
  remote.opener.name="moreinfowin";
  remote.window.focus();
 }

This one declares all the w,h,name and you pass in the URL.  You can also use a different winName.

Hope it helps..
Marilyng

Commented:
another note.. 'h' is undefined message  is because it is computing as null--  "window.innerHeight" is Netscape4, try "screen.availHeight" (as in the formula above)


marilyng
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:
Sorry - I could not get online.

The reason it gives an error is that you cannot run the script in the head - the function can be in the head but not executed until AFTER the body tag!!!

<body>
<script>

if (document.all)
   h=document.body.clientHeight
else h= window.innerHeight;

</script>
IT Expert
SILVER EXPERT
Top Expert 2009
Commented:
Do this in the head:

<html>
<head>
<script>
h=800;
layerRef = "";
endLayerRef = "";
styleRef = "";


function initPage() {

if (document.all)
   h=document.body.clientHeight;
else if (window.innerHeight)
   h= window.innerHeight;
}

</script>
</head>
<body onLoad="initPage()">

Author

Commented:
Well, unfortunately it doesn't work.  The good news is that if I define "h=800" at the top, it doesn't generate errors, but in NN and IE h is always 800.  It's like initPage() never gets called. (Yes I'm calling it from the body tag).  Well, here is the whole script... maybe something is conflicting? Also, my preload script doesn't work either! (All rollovers work, but they are obviously not getting preloaded, which is also called from the body tag.  Sorry so long! I've increased the points for your effort again!

<script language="javascript">
h = 800
layerRef = "";
endLayerRef = "";
styleRef = "";


function initPage() {

if (document.all)
  h=document.body.clientHeight;
else if (window.innerHeight)
  h= window.innerHeight ;
}


browser = navigator.appName;
browserNum = parseInt(navigator.appVersion);
if ((browser == "Netscape") && (browserNum < 5))
{
      //Netscape 4.x
      layerRef = "document.layers['";
      endLayerRef = "']";
      styleRef = "";
}
else if ((browser == "Netscape") && (browserNum >=5))
{
      //Netscape 6
      layerRef = "document.getElementById('";
      styleRef = ".style";
      endLayerRef = "')";
      
}
else
{
      //Internet Explorer
      layerRef = "document.all['";
      endLayerRef = "']";
      styleRef = ".style";
}

function showLayer(layerName)
{
      eval(layerRef + layerName + endLayerRef + styleRef + ".visibility='visible'");
      eval(layerRef + "layerFive" + endLayerRef + styleRef + ".visibility='hidden'");
}

function hideLayers()
{
      eval(layerRef + "layerOne" + endLayerRef + styleRef + ".visibility='hidden'");
      eval(layerRef + "layerTwo" + endLayerRef + styleRef + ".visibility='hidden'");
      eval(layerRef + "layerThree" + endLayerRef + styleRef + ".visibility='hidden'");
      eval(layerRef + "layerFour" + endLayerRef + styleRef + ".visibility='hidden'");
      eval(layerRef + "layerFive" + endLayerRef + styleRef + ".visibility='visible'");
}

function newImage(arg) {
      if (document.images) {
            rslt = new Image();
            rslt.src = arg;
            return rslt;
      }
}


var preloadFlag = false;
function preloadImages() {
      if (document.images) {
            strip2_lingerie_over = newImage("images/header/strip2--lingerie_over.gif");
            strip3_shoes_m_over = newImage("images/header/strip3--shoes_m_over.gif");
            strip3_coolthings_over = newImage("images/header/strip3--coolthings_over.gif");
            strip4_feedback_over = newImage("images/header/strip4-feedback_over.gif");
            lingerie_shoes_w_over = newImage("images/header/lingerie-shoes_w_over.gif");
            lingerie_over = newImage("images/header/lingerie-over.gif");
            shoes_w_lingerie_over = newImage("images/header/shoes_w-lingerie_over.gif");
            shoes_w_over = newImage("images/header/shoes_w-over.gif");
            shoes_m_accessories_m_over = newImage("images/header/shoes_m-accessories_m_over.gif");
            shoes_m_over = newImage("images/header/shoes_m-over.gif");
            accessories_w_lingerie_over = newImage("images/header/accessories_w-lingerie_over.gif");
            accessories_w_over = newImage("images/header/accessories_w-over.gif");
            accessories_m_over = newImage("images/header/accessories_m-over.gif");
            accessories_m_shoes_m_over = newImage("images/header/accessories_m-shoes_m_over.gif");
            outer_wear_w_lingerie_over = newImage("images/header/outer_wear_w-lingerie_over.gif");
            outer_wear_w_over = newImage("images/header/outer_wear_w-over.gif");
            outer_wear_m_shoes_m_over = newImage("images/header/outer_wear_m-shoes_m_over.gif");
            outer_wear_m_over = newImage("images/header/outer_wear_m-over.gif");
            bottoms_w_lingerie_over = newImage("images/header/bottoms_w-lingerie_over.gif");
            bottoms_w_over = newImage("images/header/bottoms_w-over.gif");
            lounge_wear_shoes_m_over = newImage("images/header/lounge_wear-shoes_m_over.gif");
            lounge_wear_over = newImage("images/header/lounge_wear-over.gif");
            feedback_faq_over = newImage("images/header/feedback-faq_over.gif");
            feedback_over = newImage("images/header/feedback-over.gif");
            tops_w_lingerie_over = newImage("images/header/tops_w-lingerie_over.gif");
            tops_w_over = newImage("images/header/tops_w-over.gif");
            bottoms_m_shoes_m_over = newImage("images/header/bottoms_m-shoes_m_over.gif");
            bottoms_m_over = newImage("images/header/bottoms_m-over.gif");
            suits_w_lingerie_over = newImage("images/header/suits_w-lingerie_over.gif");
            suits_w_over = newImage("images/header/suits_w-over.gif");
            tops_m_shoes_m_over = newImage("images/header/tops_m-shoes_m_over.gif");
            tops_m_over = newImage("images/header/tops_m-over.gif");
            faq_feedback_over = newImage("images/header/faq-feedback_over.gif");
            faq_over = newImage("images/header/faq-over.gif");
            dresses_over = newImage("images/header/dresses-over.gif");
            dresses_lingerie_over = newImage("images/header/dresses-lingerie_over.gif");
            suits_m_shoes_m_over = newImage("images/header/suits_m-shoes_m_over.gif");
            suits_m_over = newImage("images/header/suits_m-over.gif");
            care_tips_feedback_over = newImage("images/header/care_tips-feedback_over.gif");
            care_tips_over = newImage("images/header/care_tips-over.gif");
            women_lingerie_over = newImage("images/header/women-lingerie_over.gif");
            men_shoes_m_over = newImage("images/header/men-shoes_m_over.gif");
            coolthings_over = newImage("images/header/coolthings-over.gif");
            coolinfo_feedback_over = newImage("images/header/coolinfo-feedback_over.gif");
            topBracket = newImage("images/middle/thumb_bottom1-thumb1_over.gif");
            bottomBracket = newImage("images/middle/thumb_top1-thumb1_over.gif");
            topSaleBracket = newImage("images/middle/sold_bottom_over.gif");
            bottomSoldBracket = newImage("images/middle/sale_top_over.gif");
            preloadFlag = true;
      }
}


function changeImages() {
      if (document.images && (preloadFlag == true)) {
            for (var i=0; i<changeImages.arguments.length; i+=2) {
                  document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
            }
      }
}
</SCRIPT>

</HEAD>
<BODY ONLOAD="initPage(); preloadImages();" BGCOLOR=#ffffcc leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


Thanks a million for all the help!

Commented:
Duh.. people, innerHeight only works in Netscape.. use screen.availHeight or screen.availWidth for IE.

marilyng

Author

Commented:
Another note:

If I include the function in the body (as mplungjan suggested) it works! Such as:

<script>
if (document.all)
h=document.body.clientHeight - 471;
else if (window.innerHeight)
h= window.innerHeight - 471;
document.write('<img src="images/header/spacer.gif" width=3 height='+ h +' border=0>');
</script>

But why?  Shouldn't calling it from the body tag work?  I'm concerned because I've discovered that the preload function isn't working either, and it's getting called from the body tag as well.

Thanks for the continuing help!

Author

Commented:
Well, I'll post another question for the second half of this problem...

Thanks to everyone!
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:
The document.body object does not exist until after the body tag.

I use
if (document.all) to find IE and if it is not IE I ask if the browser has window.innerHeight defined - if not it is 800 default.
screen.availWidth/Height is IE/NS for the resolution of the monitor not the size of the current browser window.

Michel

Explore More ContentExplore courses, solutions, and other research materials related to this topic.