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

2 New Member

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

 
DivImg {

  position:   absolute;

  visibility: visible;

  z-index:    auto;

  overflow:   hidden;

  top:        0px;

  left:       0px;

  width:      16px;

  height:     16px;

  right:      auto;

  bottom:     auto;

  clip:       rect(auto auto auto auto);

  margin:     4px;

  padding:    4px;

  border:     2px solid #0000FF;

  background-color:      #00FFFF;

  background-image:      none;

  background-repeat:     no-repeat;

  background-position:   center center;

  background-attachment: fixed;

}

Code Framework (the alerts are for test purposes)
==============

Expand|Select|Wrap|Line Numbers

 
<HTML>

<HEAD>

  <title>INDEX</title>

  <link href="TEST.CSS" rel="stylesheet" type="text/css">

  <script language="JavaScript">

  <!-- Local Code
 
DivWid = -1;

DivHgt = -1;

function GetDivDim(DivNameID) {

var DivRef = null;

  if (BrowserTyp == "NN") {

    DivRef = document.getElementsByName(DivNameID) ???;

    if (DivRef != null) {

      DivWid = DivRef.width ???;

      DivHgt = DivRef.height ???;

      alert('NN:GetDivDim - '+DivWid+' x '+DivHgt);

    } else alert('NN:GetDivDim - DivRef is NULL');

  }

  if (BrowserTyp == "IE") {

    DivRef = document.getElementsByName(DivNameID) ???;

    if (DivRef != null) {

      DivWid = DivRef.width ???;

      DivHgt = DivRef.height ???;

      alert('IE:GetDivDim - '+DivWid+' x '+DivHgt);

    } else alert('IE:GetDivDim - DivRef is NULL');

  }

}
 
ImgWid = -1;

ImgHgt = -1;

function GetImgDim(ImgName) {

var ImgRef = null;

  if (BrowserTyp == "NN") {

    ImgRef = document[ImgName] ???;

    if (ImgRef != null) {

      ImgWid = ImgRef.width ???;

      ImgHgt = ImgRef.height ???;

      alert('NN:GetImgDim - '+ImgWid+' x '+ImgHgt);

    } else alert('NN:GetImgDim - ImgRef is NULL');

  }

  // This part functions correctly

  if (BrowserTyp == "IE") {

    ImgRef = document[ImgName];

    if (ImgRef != null) {

      ImgWid = ImgRef.width;

      ImgHgt = ImgRef.height;

    }

  }

}
 
  // -->

  </script>

</HEAD>

<BODY>
 
<DIV ID="LogoDiv" CLASS="DivImg">

  <IMG NAME="LogoImg" src="Logo.JPG" alt="LOGO IMAGE" border="0">

</DIV>
 
<script>

  GetDivDim('LogoDiv');

  GetDivDim('LogoImg');

</script>
 
<TABLE border="1">

<TR>

  <TD align="center"> DIV WxH </TD>

  <TD align="center"><script>document.write(DivWid+' x '+DivHgt);</script></TD>

</TR>

<TR>

  <TD align="center"> IMG WxH </TD>

  <TD align="center"><script>document.write(ImgWid+' x '+ImgHgt);</script></TD>

</TR>

</TABLE>
 
<!-- etc. etc. etc. -->

</BODY>

</HTML>

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

Subscribe Reply

2423

Mentat

New Member

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

 
.DivImg {

  position:   absolute;

  visibility: visible;

  z-index:    auto;

  overflow:   hidden;

  top:        0px;

  left:       0px;

  width:      16px;

  height:     16px;

  right:      auto;

  bottom:     auto;

  clip:       rect(auto auto auto auto);

  margin:     4px;

  padding:    4px;

  border:     2px solid #0000FF;

  background-color:      #00FFFF;

  background-image:      none;

  background-repeat:     no-repeat;

  background-position:   center center;

  background-attachment: fixed;

}

Code Framework (the alerts are for test purposes)
==============

Expand|Select|Wrap|Line Numbers

 
<HTML>

<HEAD>

  <title>INDEX</title>

  <link href="TEST.CSS" rel="stylesheet" type="text/css">

  <script language="JavaScript">

  <!-- Local Code
 
DivWid = -1;

DivHgt = -1;

function GetDivDim(DivID) {

var DivRef = null;

  if (BrowserTyp == "NN") {

    // NN:4.7(NT4) substitute for this DivRef ???

    DivRef = document.getElementById(DivID);

    if (DivRef != null) {

      DivWid = DivRef.offsetWidth;

      DivHgt = DivRef.offsetHeight;

      // addition MARGIN ???

    }

  }

  if (BrowserTyp == "IE") {

    DivRef = document.getElementById(DivID);

    if (DivRef != null) {

      DivWid = DivRef.offsetWidth;

      DivHgt = DivRef.offsetHeight;

      // addition of MARGIN, BORDER, PADDING ???

    }

  }

}
 
ImgWid = -1;

ImgHgt = -1;

function GetImgDim(ImgName) {

var ImgRef = null;

  if (BrowserTyp == "NN") {

    ImgRef = document[ImgName] ???;

    if (ImgRef != null) {

      ImgWid = ImgRef.width ???;

      ImgHgt = ImgRef.height ???;

      alert('NN:GetImgDim - '+ImgWid+' x '+ImgHgt);

    } else alert('NN:GetImgDim - ImgRef is NULL');

  }

  // This part functions correctly

  if (BrowserTyp == "IE") {

    ImgRef = document[ImgName];

    if (ImgRef != null) {

      ImgWid = ImgRef.width;

      ImgHgt = ImgRef.height;

    }

  }

}
 
  // -->

  </script>

</HEAD>

<BODY>
 
<DIV ID="LogoDiv" CLASS="DivImg">

  <IMG NAME="LogoImg" src="Logo.JPG" alt="LOGO IMAGE" border="0">

</DIV>
 
<script>

  GetDivDim('LogoDiv');

  GetDivDim('LogoImg');

</script>
 
<TABLE border="1">

<TR>

  <TD align="center"> DIV WxH </TD>

  <TD align="center"><script>document.write(DivWid+' x '+DivHgt);</script></TD>

</TR>

<TR>

  <TD align="center"> IMG WxH </TD>

  <TD align="center"><script>document.write(ImgWid+' x '+ImgHgt);</script></TD>

</TR>

</TABLE>
 
<!-- etc. etc. etc. -->

</BODY>

</HTML>

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

Similar topics

1626

funcs vs vars in global namespace

by: David Rysdam | last post by:

Getting no answer yesterday, I've done some investigation and I obviously don't understand how python namespaces work. Here's a test program: #!/usr/bin/python b = 2 def sumWithGlobal(a):...

Python

1193

Capture Information IN a Text Box for later use

by: kscdavefl | last post by:

I am developing a dseries of web pages. I have a name entered in a text box on one of the pages which I need to be able to capture for use on another page without going back to the original page. ...

C# / C Sharp

1636

Problem: Capture screen returns black image on webserver

by: kris_scheyer | last post by:

Ok, here's what im trying to do: I have a machine running XP embedded that has a webserver. I have a button on the aspx web form that is supposed to capture the screen of the computer hosting the...

ASP.NET

6054

Screen capture problem - CreateCompatibleBitmap API

by: Juan Romero | last post by:

Guys, I am trying to capture the desktop screen (everything). I am having a problem with the "CreateCompatibleBitmap" API call. For some reason the function is creating a 1x1 pixels bitmap...

Visual Basic .NET

4489

Screen capture control using WebBrowser control and GDI+ in a web app

by: JP2006 | last post by:

I'm trying to write a control that will take a screen capture of a particular website when a user submits a form in a web application; one of the form fields is for a URL - the control needs to get...

ASP.NET

8723

Capture the current page(url) into a variable?

by: Akhenaten | last post by:

What's the most effective way to capture a URL to pass as a variable? I have a login function I want to modify to redirect the user back to the page they logged in from. I know how to do the...

PHP

1742

Sharing global vars with Explorer driving me insane...

by: pcaisse | last post by:

I'm having issues sharing global variables with Explorer. This problem probably has a simple answer (as with most newbie questions). The script.pl file: #!/usr/bin/perl -w use strict; use...

Perl

1957

Can't change vars in JSON after consolidating lists into one

by: RMWChaos | last post by:

Previously, I had used independent JSON lists in my code, where the lists were part of separate scripts. Because this method did not support reuse of a script without modification, I decided to...

Javascript

3486

Capture Mouse Coordinates to variable

by: mbatestblrock | last post by:

I hope this makes some sense. My ultimate goal here is to execute a block of code if the mouse has not moved in a minute or so within the broswer. The machine I am running this on is for internal...

Javascript

7231

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

7336

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

7401

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

7063

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

7504

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

5640

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

4720

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3196

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

432

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General