By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,444 Members | 3,110 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,444 IT Pros & Developers. It's quick & easy.

JS: Capture DIV and IMG dimensions into vars for use later.

P: 2
In the description below ??? marks specific problem areas.
Any help is appreciated.

Required
========
A method to detect the width and height values of a
<DIV... element. Since there are two ways to "style"
a DIV, it should be noted that a CSS file is used in
this case. The same is required for an <IMG... element
contained within the DIV.

SOLUTION
========
1. ???

Specification
=============
A file, INDEX.HTML, exists and is loaded into a browser.
The browser is version 4 or better, NN or IE (OS=Win32).
A file, TEST.CSS, provides a class for the DIV.

Using JavaScript, establish the actual WIDTH and HEIGHT
of the DIV declared in the html code. The same applies
for the IMG contained in the DIV.

These values are to be stored in two global variables
(as pixel counts) that may be accessed by scripts later
in the code.

Specifically, the structuring of the content will depend
on these values so placing the function call in <BODY onload..>
(which executes on completion of loading) is unacceptable
since the page may be "jumbled" until fully loaded.

TEST.CSS
========
Expand|Select|Wrap|Line Numbers
  1. DivImg {
  2.   position:   absolute;
  3.   visibility: visible;
  4.   z-index:    auto;
  5.   overflow:   hidden;
  6.   top:        0px;
  7.   left:       0px;
  8.   width:      16px;
  9.   height:     16px;
  10.   right:      auto;
  11.   bottom:     auto;
  12.   clip:       rect(auto auto auto auto);
  13.   margin:     4px;
  14.   padding:    4px;
  15.   border:     2px solid #0000FF;
  16.   background-color:      #00FFFF;
  17.   background-image:      none;
  18.   background-repeat:     no-repeat;
  19.   background-position:   center center;
  20.   background-attachment: fixed;
  21. }
  22.  
Code Framework (the alerts are for test purposes)
==============
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3.   <title>INDEX</title>
  4.   <link href="TEST.CSS" rel="stylesheet" type="text/css">
  5.   <script language="JavaScript">
  6.   <!-- Local Code
  7.  
  8. DivWid = -1;
  9. DivHgt = -1;
  10. function GetDivDim(DivNameID) {
  11. var DivRef = null;
  12.   if (BrowserTyp == "NN") {
  13.     DivRef = document.getElementsByName(DivNameID) ???;
  14.     if (DivRef != null) {
  15.       DivWid = DivRef.width ???;
  16.       DivHgt = DivRef.height ???;
  17.       alert('NN:GetDivDim - '+DivWid+' x '+DivHgt);
  18.     } else alert('NN:GetDivDim - DivRef is NULL');
  19.   }
  20.   if (BrowserTyp == "IE") {
  21.     DivRef = document.getElementsByName(DivNameID) ???;
  22.     if (DivRef != null) {
  23.       DivWid = DivRef.width ???;
  24.       DivHgt = DivRef.height ???;
  25.       alert('IE:GetDivDim - '+DivWid+' x '+DivHgt);
  26.     } else alert('IE:GetDivDim - DivRef is NULL');
  27.   }
  28. }
  29.  
  30. ImgWid = -1;
  31. ImgHgt = -1;
  32. function GetImgDim(ImgName) {
  33. var ImgRef = null;
  34.   if (BrowserTyp == "NN") {
  35.     ImgRef = document[ImgName] ???;
  36.     if (ImgRef != null) {
  37.       ImgWid = ImgRef.width ???;
  38.       ImgHgt = ImgRef.height ???;
  39.       alert('NN:GetImgDim - '+ImgWid+' x '+ImgHgt);
  40.     } else alert('NN:GetImgDim - ImgRef is NULL');
  41.   }
  42.   // This part functions correctly
  43.   if (BrowserTyp == "IE") {
  44.     ImgRef = document[ImgName];
  45.     if (ImgRef != null) {
  46.       ImgWid = ImgRef.width;
  47.       ImgHgt = ImgRef.height;
  48.     }
  49.   }
  50. }
  51.  
  52.   // -->
  53.   </script>
  54. </HEAD>
  55. <BODY>
  56.  
  57. <DIV ID="LogoDiv" CLASS="DivImg">
  58.   <IMG NAME="LogoImg" src="Logo.JPG" alt="LOGO IMAGE" border="0">
  59. </DIV>
  60.  
  61. <script>
  62.   GetDivDim('LogoDiv');
  63.   GetDivDim('LogoImg');
  64. </script>
  65.  
  66. <TABLE border="1">
  67. <TR>
  68.   <TD align="center"> DIV WxH </TD>
  69.   <TD align="center"><script>document.write(DivWid+' x '+DivHgt);</script></TD>
  70. </TR>
  71. <TR>
  72.   <TD align="center"> IMG WxH </TD>
  73.   <TD align="center"><script>document.write(ImgWid+' x '+ImgHgt);</script></TD>
  74. </TR>
  75. </TABLE>
  76.  
  77. <!-- etc. etc. etc. -->
  78. </BODY>
  79. </HTML>
  80.  
Test Results
============

The GetDivDim() and GetImgDim() functions will later be tested in
NN:4.7, NN:6.2.3 and IE:5.0 under WinNT:4.0, but for the moment
NN:6.2.3 and IE:6.0 under WinNT:5.1(XP) were used.

It is expected that the DIV will behave as specified in TEST.CSS
and therefore at least have some detectable dimensions. Of course,
allowing it to interact with it's content, the IMG (for which the
absolute dimensions are verifiable), is expected to change it's
dimensions. Detecting those dimensions, whatever they are, seems
to be failing.

First, is ID="LogoDiv" a better option than NAME="LogoDiv" or are
the two equivalent? A report that the latter is more stable has
been mentioned in some (forgotten) article.

Second, it seems there is a problem establishing how DivRef and
ImgRef should be defined (ascribe this to inexperience and/or
lack of proper documentation).

GetDivDim():
- In cases where document.getElementsByName() is used (with
NAME=), DivRef is not null but .width and .height are both
reported as "undefined".
- The same is true when document.getElementById() is used
(with ID=).
- If document.all.DivNameID is used (in IE with either ID=
or NAME=) then DivRef is null.

GetImgDim():
It seems that ImgRef is valid for NN but values of 0 are reported
for W and H.
The code operates correctly for IE.

Conclusion
==========
???
Nov 14 '06 #1
Share this Question
Share on Google+
1 Reply


P: 2
Required
========
A method to detect the width and height values of a
<DIV... element. Since there are two ways to "style"
a DIV, it should be noted that a CSS file is used
in this case. The same is required for an <IMG...
element contained within the DIV.

SOLUTION
========
1. The DivImg declaration inside TEST.CSS must be
.DivImg (with the period) and not DivImg as it
appears below. This forces the element to obey
the "overflow" and other attributes.

2. DIV should use ID="..." and not NAME="..."

3. DivRef should be = document.getElementById() for
both NN and IE. DivWid and DivHgt are then referred
to as respectively .offsetWidth and offsetHeight.

TEST.CSS and GetDivDim() have been updated to reflect
these changes. New test results are availble.

Specification
=============
A file, INDEX.HTML, exists and is loaded into a browser.
The browser is version 4 or better, NN or IE (OS=Win32).
A file, TEST.CSS, provides a class for the DIV.

Using JavaScript, establish the actual WIDTH and HEIGHT
of the DIV declared in the html code. The same applies
for the IMG contained in the DIV.

These values are to be stored in two global variables
(as pixel counts) that may be accessed by scripts later
in the code.

Specifically, the structuring of the content will depend
on these values so placing the function call in <BODY onload..>
(which executes on completion of loading) is unacceptable
since the page may be "jumbled" until fully loaded.

TEST.CSS
========
Expand|Select|Wrap|Line Numbers
  1. .DivImg {
  2.   position:   absolute;
  3.   visibility: visible;
  4.   z-index:    auto;
  5.   overflow:   hidden;
  6.   top:        0px;
  7.   left:       0px;
  8.   width:      16px;
  9.   height:     16px;
  10.   right:      auto;
  11.   bottom:     auto;
  12.   clip:       rect(auto auto auto auto);
  13.   margin:     4px;
  14.   padding:    4px;
  15.   border:     2px solid #0000FF;
  16.   background-color:      #00FFFF;
  17.   background-image:      none;
  18.   background-repeat:     no-repeat;
  19.   background-position:   center center;
  20.   background-attachment: fixed;
  21. }
  22.  
Code Framework (the alerts are for test purposes)
==============
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3.   <title>INDEX</title>
  4.   <link href="TEST.CSS" rel="stylesheet" type="text/css">
  5.   <script language="JavaScript">
  6.   <!-- Local Code
  7.  
  8. DivWid = -1;
  9. DivHgt = -1;
  10. function GetDivDim(DivID) {
  11. var DivRef = null;
  12.   if (BrowserTyp == "NN") {
  13.     // NN:4.7(NT4) substitute for this DivRef ???
  14.     DivRef = document.getElementById(DivID);
  15.     if (DivRef != null) {
  16.       DivWid = DivRef.offsetWidth;
  17.       DivHgt = DivRef.offsetHeight;
  18.       // addition MARGIN ???
  19.     }
  20.   }
  21.   if (BrowserTyp == "IE") {
  22.     DivRef = document.getElementById(DivID);
  23.     if (DivRef != null) {
  24.       DivWid = DivRef.offsetWidth;
  25.       DivHgt = DivRef.offsetHeight;
  26.       // addition of MARGIN, BORDER, PADDING ???
  27.     }
  28.   }
  29. }
  30.  
  31. ImgWid = -1;
  32. ImgHgt = -1;
  33. function GetImgDim(ImgName) {
  34. var ImgRef = null;
  35.   if (BrowserTyp == "NN") {
  36.     ImgRef = document[ImgName] ???;
  37.     if (ImgRef != null) {
  38.       ImgWid = ImgRef.width ???;
  39.       ImgHgt = ImgRef.height ???;
  40.       alert('NN:GetImgDim - '+ImgWid+' x '+ImgHgt);
  41.     } else alert('NN:GetImgDim - ImgRef is NULL');
  42.   }
  43.   // This part functions correctly
  44.   if (BrowserTyp == "IE") {
  45.     ImgRef = document[ImgName];
  46.     if (ImgRef != null) {
  47.       ImgWid = ImgRef.width;
  48.       ImgHgt = ImgRef.height;
  49.     }
  50.   }
  51. }
  52.  
  53.   // -->
  54.   </script>
  55. </HEAD>
  56. <BODY>
  57.  
  58. <DIV ID="LogoDiv" CLASS="DivImg">
  59.   <IMG NAME="LogoImg" src="Logo.JPG" alt="LOGO IMAGE" border="0">
  60. </DIV>
  61.  
  62. <script>
  63.   GetDivDim('LogoDiv');
  64.   GetDivDim('LogoImg');
  65. </script>
  66.  
  67. <TABLE border="1">
  68. <TR>
  69.   <TD align="center"> DIV WxH </TD>
  70.   <TD align="center"><script>document.write(DivWid+' x '+DivHgt);</script></TD>
  71. </TR>
  72. <TR>
  73.   <TD align="center"> IMG WxH </TD>
  74.   <TD align="center"><script>document.write(ImgWid+' x '+ImgHgt);</script></TD>
  75. </TR>
  76. </TABLE>
  77.  
  78. <!-- etc. etc. etc. -->
  79. </BODY>
  80. </HTML>
  81.  
Test Results
============
The GetDivDim() and GetImgDim() functions will later be
tested in NN:4.7, NN:6.2.3 and IE:5.0 under WinNT:4.0,
but for the moment NN:6.2.3 and IE:6.0 under WinNT:5.1
(XP) were used.

After updates from Solutions 1, 2 and 3 GetDivDim()
was tested in all the situations described above.

From TEST.CSS it may be seen that the DIV is supposed
to be square so only one side need be calculated:
margin+border+padding + width + padding+border+margin
= (4 + 2 + 4) + 16 + (4 + 2 + 4)
= 36 pixels on a side.

NN:4.7(NT4) reported "-1 x -1" for GetDivDim() and
failed to launch any of the alerts. It seems that
getElementById() is not supported.

All other NN's report 28, which is the width including
borders and padding on all sides.
Increasing margin to 8px in TEST.CSS had no effect
on the reported values so this theory is confirmed.

All IE's report 16, which may be just the width/height.
Changing of attributes other than width/height had
no effect on the report so this theory is confirmed.
However, visual inspection of the page shows the area
occupied by LogoDiv to be smaller than in NN. It may
be that IE is ignoring some of the CSS attributes due
to the effect of other attributes.

In both IE and NN, there may be a way to include the
missing attributes to obtain the "true" dimensions.

There remains the problem of establishing how ImgRef
should be defined. In addition, the values of other
CSS attributes need to be obtained so that "outer"
dimensions may be accurate.

GetImgDim():
It seems that ImgRef is valid for NN but values of 0
are reported for W and H.
The code operates correctly for IE.

Conclusions
===========
NN and IE include different sets of CSS attributes when
returning dimensions for the DIV element.

NN:4.7(NT4) needs a substitute for the getElementById()
function, or the version should be excluded.

???
Nov 15 '06 #2

Post your reply

Sign in to post your reply or Sign up for a free account.