473,396 Members | 1,826 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

How to find height and width of webpage?

How can I find the height and width of a webpage? Say I want to make
sure someone's webpage is within an 800X600 viewing area. Width is the
most important but if I can get width, I should also be able to get
height.

I don't need to modify the page in anyway. Just get the width and
height. I can reference the page in an iframe, cfhttp (CFMX) or
something if it needs to be on my server.

Thanks,
Brett

Jul 23 '05 #1
8 39488
brett wrote:
How can I find the height and width of a webpage? Say I want to make
sure someone's webpage is within an 800X600 viewing area. Width is the
most important but if I can get width, I should also be able to get
height.

I don't need to modify the page in anyway. Just get the width and
height. I can reference the page in an iframe, cfhttp (CFMX) or
something if it needs to be on my server.


Have a read here, it's not as simple as it sounds.

<URL:http://www.quirksmode.org/js/>
First you need to figure out exactly what you mean by "the
height and width of a webpage" - it means different things in
different browsers.

--
Fred
Jul 23 '05 #2
The number horizontal and vertical pixels. I'm not exactly sure how
that can be figured out. If their page can wrap, well, it has a
relative width and what does that mean? It should be fine. Maybe I
should just be looking for any tables or something with a hard coded
width greater than 800 right?

Brett

Jul 23 '05 #3
brett wrote:
The number horizontal and vertical pixels. I'm not exactly sure how
that can be figured out. If their page can wrap, well, it has a
relative width and what does that mean? It should be fine. Maybe I
should just be looking for any tables or something with a hard coded
width greater than 800 right?

Brett


If you follow the link I provided, then click on the "viewport"
link and look for innerWidth/Height and clientWidth/Height and
read about document.body, you'll find out how to get it.

You must use different techniques for different browsers and the
results are also doctype dependencies to deal with.

--
Fred
Jul 23 '05 #4
Fred Oz wrote:
brett wrote:
The number horizontal and vertical pixels. I'm not exactly sure how
that can be figured out. If their page can wrap, well, it has a
[...] You must use different techniques for different browsers and the results
are also doctype dependencies to deal with.


So here's some code, slightly modified from quirksmode. Note
that removing/changing the doctype changes IE's behaviour (a
different element is used and clicking below the bottom-most
element does not record a click in strict mode).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>docment height/width</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">

<script type="text/javascript">
function doClick(){
var x, y, msg='';

// for all except Explorer
if (self.innerHeight) {
x = self.innerWidth;
y = self.innerHeight;
msg += 'self.innerHeight/Width: '
+ y + ', ' + x + 'px';

// Explorer 6 Strict Mode
} else if (document.documentElement
&& document.documentElement.clientHeight) {
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
msg += 'document.documentElement.clientHeight/Width: '
+ y + ', ' + x + 'px';

// other Explorers
} else if (document.body) {
x = document.body.clientWidth;
y = document.body.clientHeight;
msg += 'document.body.clientHeight/Width: '
+ y + ', ' + x + 'px';
}
alert(msg);
}
</script>
</head>
<body onclick="doClick();">
<div style="width: 200px; height: 200px;
border: 1px solid red;">
</div>
</body>
</html>

--
Fred

Jul 23 '05 #5
That works nice. However, the above document should only be 200 wide.
It reports the browser doc width based on browser width, not the widest
tag element. I suppose I'm really looking for the widest "width"
attribute of any tag. That would give me the width based on what the
designer had in mind.

It can be tricky looking for width attributes. If a 100% width is
nested in a width=400, I might want to use your code to get the doc
width based on browser width. However, the true width is only 400.

Thanks,
Brett

Jul 23 '05 #6
brett wrote:
That works nice. However, the above document should only be 200 wide.
It reports the browser doc width based on browser width, not the widest
tag element. I suppose I'm really looking for the widest "width"
attribute of any tag. That would give me the width based on what the
designer had in mind.

It can be tricky looking for width attributes. If a 100% width is
nested in a width=400, I might want to use your code to get the doc
width based on browser width. However, the true width is only 400.


The code only determines the internal width of the browser
window containing the document, it does not have any reference
to the width that the document requires or consumes.

I think you are getting too deep into HTML and CSS here.
JavaScript will help you find out whether elements have width
attributes defined, but that is only part of the story.

You must also consider width set by CSS - essentially, you have
to emulate the browser rendering engine. Can you deal with
relative & absolute positioned elements? Float left/right?
Display/visibility? Most browsers struggle to get it right.

If everyone used tables to layout their content, wouldn't life
be sooooo much simpler - friken' CSS-heads... :-)

IIRC, most non-IE browsers will not report a width attribute if
none is specified, you have to use getComputedStyle - for those
browsers, getting the HTML established width is trivial (though
likely slow). However, IE seems to report attributes that
aren't set, as well as providing it's own version of a
getComputedStyle method too.

Finally, your job may be possible where the width is set
everywhere as pixels, but what about width as em, en or percent?
Do you know how to convert those to pixel widths?

Sorry to be such a pessimist! :-x

--
Fred
Jul 23 '05 #7
You must also consider width set by CSS - essentially, you have
to emulate the browser rendering engine. Can you deal with
relative & absolute positioned elements? Float left/right?
Display/visibility? Most browsers struggle to get it right.

If everyone used tables to layout their content, wouldn't life
be sooooo much simpler


First off, I'm NOT being sarcastic here.. if the things you're talkin
about really can be done with tables, I'd really like to know how?

And second, the question that led me here in the first place: whethe
with tables or css, is there any way to dynamically convert percent
back to pixels? (i.e. as the user is rescaling their browser, it coul
return the value in pixels of the height and width of things.)

I'm trying to create scalable image content that maintains its aspec
ratio, (like Flash does, which is not an option for this case.) I
there's a simpler way I'm not seeing, maybe someone could point me i
the right direction, but I've found surprisingly little of use on th
subject. Thanks in advance

--
Malkalyps
-----------------------------------------------------------------------
Malkalypse's Profile: http://www.highdots.com/forums/member.php?userid=2
View this thread: http://www.highdots.com/forums/showthread.php?t=7015

Jul 23 '05 #8
Malkalypse wrote:
You must also consider width set by CSS - essentially, you have
to emulate the browser rendering engine. Can you deal with
relative & absolute positioned elements? Float left/right?
Display/visibility? Most browsers struggle to get it right.

If everyone used tables to layout their content, wouldn't life
be sooooo much simpler
First off, I'm NOT being sarcastic here.. if the things you're talking
about really can be done with tables, I'd really like to know how?


Yes, you would.
And second, the question that led me here in the first place: whether
with tables or css, is there any way to dynamically convert percents
back to pixels? (i.e. as the user is rescaling their browser, it could
return the value in pixels of the height and width of things.)


Sure, you only have to re-implement a renderer as described in the CSS
specification. However, it would be much easier to use percents without
the need for client-side scripting in the first place.
PointedEars
Jul 23 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Ana | last post by:
I just ran a report on a site I'm redesigning and came up with all these missing height/width tags. How important are they? Should I go through the trouble of making sure they're there? Ana
5
by: Dave Hammond | last post by:
You'd think this would be a basic part of the window object (and perhaps it is and I'm just being dense), but I can't find any reference in the IE window object documentation to a property which...
5
by: Linda | last post by:
Hi, I'm trying to get the Left/Top/Height/Width properties for some text boxes on a form to match exactly. Three of them are fine, but the fourth will not accept the changes I type into the...
1
by: Pums | last post by:
How to get the information(like height, width) of an image to be uploaded?
9
by: Adam | last post by:
Can someone please help!! I am trying to figure out what a font is? Assume I am working with a fixed font say Courier 10 point font Question 1: What does this mean 10 point font Question 2:...
8
by: Kentor | last post by:
Hello, I have users that submit images to my website. By default I choose to make the width bigger than the height because usually pictures are taken horizontally... But in some cases people take...
1
by: gopihmkrishna | last post by:
Hi, There is an html table. In that I am not defining any width for the TD's. Depending on the data that is loaded dynamically into the TD,I need to find the width of the TD. Could you tell me...
2
by: Atul | last post by:
I am unable to find image height and width in mozilla firefox. My code is working in IE but not in Mozilla. How can i find image width and height in mozilla? function check(sel) { if(sel != "")...
11
by: PerumalSamy | last post by:
Hi, I am developing program using asp.net in which i am using javascript coding in particular part. I need to find height and width for loaded image file. How can i write coding for it.
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
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,...
0
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...
0
tracyyun
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...
0
agi2029
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,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.