Paul Lambert

Email conversation

From	Paul Lambert
To	Me
Subject	window size
Date	22 August 2003 18:02

I found in your past emails a reference to obtaining the document 
size.  there was no link in the email to your example nor could the search
feature find anything for "window size."

For printing purposes, I need to determine when I have reached the end of
a page.  It would handy to be capable of getting how many pixels, etc. the
document has consumed so one could fill out the end of a page and begin a
new one.

My two questions are: 1) is there a document attribute that gives the x,y
pixel position within a document and 2) is there a way to get the current
paper size, margins, etc. as configured in the "page setup" for the
browser so one can set the <div>l field up to reflect this in the document.

Thanks, I periodically use your web site for reference.

Paul

From	Me
To	Paul Lambert
Subject	Re: window size
Date	23 August 2003 15:19

Paul

> I found in your past emails a reference to obtaining the document 
> size.  there was no link in the email to your example nor could the
> search feature find anything for "window size."

Sorry you couldn't find anything. You needed to search in the JavaScript
section: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow I
will add a link from the email as well.

> For printing purposes, I need to determine when I have reached the end
> of a page.  It would handy to be capable of getting how many pixels,
> etc. the document has consumed so one could fill out the end of a page
> and begin a new one.

This is not available cross browser, and I only document cross browser
techniques. You may find PPK's documentation helpful here:
http://www.quirksmode.org/index.html?/viewport/intro.html

basically, if you don't care about layers browsers like Netscape 4:

if(document.documentElement&&
   document.documentElement.scrollHeight)
height = document.documentElement.scrollHeight;
else if(document.body&&document.body.offetHeight)
height = document.body.offsetHeight;
else
height = 'unknown';

> 1) is there a document attribute that gives the x,y pixel position
> within a document

truly cross browser, you can only work out the position of links, but in
non layers browsers, you can work out the position of any element (CSS
positioning and overflows will show up several browser bugs here)
http://www.howtocreate.co.uk/tutorials/javascript/browserspecific adding
offsetHeight for that element will give the position of the bottom of that
element.

> 2) is there a way to get the current 
> paper size, margins, etc. as configured in the "page setup"

none that I know of (not even in IE I think, although it does let you
manipulate print media CSS)


hope you find this useful

Tarquin - author of http://www.howtocreate.co.uk

From	Paul Lambert
To	Me
Subject	more on page position
Date	26 August 2003 03:28

Mark,

Thanks for your input on my previous email regarding the current page
position in pixels.  Forgetting about layers the body offsetHeight works
(cross browser) just fine when using the approximation of 90 pixels per
inch and using the "spacer" tag.  The spacer height is calculated and
serves as an invisible field that fills the page (emulating a feed form). 
To give my document the "word" affect, I even added a "hr" tag that draws
a line at the page break.

It would be nice if the hr tag had a field that was an output to the
printer to force a form feed (0x0C).  Currently, the special char &#012; is
not defined as part of the standard.  Just as attractive would be to set
the "body" margins and have these feed to the same file as that of the
"page setup" dialog box.

For the specific javascript DHTML app that I am writing this code will
work.  However, I am developing javascript front end apps and one app
would be a document processor based on HTML which would need to know about
pages.

// page break  use 90 pxls = 1 inch.  11 inch paper = 990 pixels 0 margins
if(document.body.offsetHeight > 990)  	
   diff = 990 - document.body.offsetHeight;
   wnd.writeln("<spacer type='block' height='"+diff+"'>");

Finally, what is up with events?  I have two issues.  1) When capturing a
right click, I return "true" from the event handler but I still get the
Netscape right click menu.  2) I am capturing click events on a table. 
Table cells can produce a "onclick" event.  However, I would prefer to
capture the table?/document click event and then iterate the table to find
which cell was selected.  To do this I need to know the coordinates of the
cell or the cell needs to have a "clicked" or "selected" attribute that
was set by the click event.  Got any ideas?

Thanks

Paul

From	Me
To	Paul Lambert
Subject	Re: more on page position
Date	27 August 2003 21:09

> Forgetting about layers the body offsetHeight works 
> just fine when using the approximation of 90 pixels per 
> inch and using the "spacer" tag.

Be warned: the default number of pixels per inch varies drastically 
between PCs and Macs, as does the pt measure.

> It would be nice if the hr tag had a field that was an output to the
> printer to force a form feed (0x0C).  Currently, the special char &#012;
> is not defined as part of the standard.

You should try print media CSS. Look at
http://www.blooberry.com/indexdot/
something like page-break-after

> Just as attractive would be to set 
> the "body" margins and have these feed to the same file as that of the
> "page setup" dialog box.

possible using ActiveXControls, but only IE and only with local security.

> 1) When capturing a 
> right click, I return "true" from the event handler but I still get the
> Netscape right click menu.

You need to use return false, and you need to use mousedown:

if(document.captureEvents&&Event.MOUSEDOWN) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=function (e) {
 if(e&&e.which==3) {
  return false;
 }
}

> 2) I would prefer to capture the table?/document click event and
> then iterate the table to find which cell was selected.

set up the document/table to detect clicks and put this in the handler
function:

if(!e){e=window.event} if(!e) { return; }
e = e.srcElement ? e.srcElement : e.target;

e is now the element that detected the event within the table.

Is that what you needed?


Tarquin/Mark

From	Paul Lambert
To	Me
Subject	poor man's plotter
Date	2 September 2003 15:38
Attachment	script that draws shapes using hundreds of pixel sized positioned elements

Mark,

I am including a graphics class the I put together.  This really tests the
speed of W3C document rendering, slow very.  However, using div (or p)
tags in this way does offer some elegance since graphics and text can be
over-layed eliminating the need to perform bit mapped alphnumeric chars. 
I tested this with NS 7.1, I am not sure it works with IE yet.

You will notice that the line does not get clipped.  Can I create one
large drawing div and set the clipRect for it and then use this as a
"container" for the divs the form the lines, etc.?  The clipRect of this
div would then truncate and out of bounds graphics from the divs that form
the graphics.

It is hard to tell how much of the rendering time is from the math and how
much from drawing the HTML.  Ideally, this should be put into a plugin,
something I plan to do later.

Thanks assistance.

Paul

From	Me
To	Paul Lambert
Subject	Re: poor man's plotter
Date	2 September 2003 19:24

Wow! Excellent tool, shame about the speed.

Practically all of the speed problems are created by DOM scripting, not
the maths. If you want to know about speed, you may find PPK's page is a
good guide: http://www.quirksmode.org/dom/innerhtml.html

The only object that can be clipped is an absolutely positioned element.
You can either use a relatively positioned div with an absolutely
positioned div inside it with clipping, or you could just use a relatively
positioned div and set its overflow to hidden. This could then contain all
your positioned elements.

From	Paul Lambert
To	Me
Subject	event followup
Date	2 September 2003 16:13
Attachment	script that replaces the browser's right click menu with a select box

Mark,

Here is my right click example.  I did get the Onclick and Dblclick to
work okay.  I am using the right click to pop up a menu.  I have most of
the menu working okay but do not like a couple of things.  First, how do I
get the scroll bar to go away?  Second, to unselect the user's choice, I
need to add a blank menuItem, make it the selected menuItem and then
delete it.  Third, when I hide the menu it leaves the dotted menu item box
and moves it to 0,0.  Finally, I need to position this popup menu near the
point clicked.  This requires me to know about the display boundaries and
move the menu to the right or left should the point selected be near a
boundary.  There is a "float" property.  Will this property do this for me
or must I create my own algorithm?

I have found that using divs is faster and easier to use than popup
dialogs.

Paul

From	Me
To	Paul Lambert
Subject	Re: event followup
Date	2 September 2003 19:30

1. You cannot remove the scrollbar in Netscape 6 / Mozilla

2. Set the selectedIndex to -1, this special value means that nothing is
selected

3. Set display to 'none'. Does that help? Alternatively, instead of hiding
it, move it to -1000,-1000.

4. You must create your own algorithm, as float does not know anything
about the position of the mouse, and always positions at the far left or
right of the parent element. I have documented most of the things you need
on http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
http://www.howtocreate.co.uk/tutorials/javascript/eventinfo use
offsetWidth to find the width of the hidden menu

From	Paul Lambert
To	Me
Subject	popup revisited
Date	5 September 2003 21:23

Mark,

I have attached my popup menu snippet that renders the popup menu as a
collection of divs rather than options.  Test the code by right clicking
and then either selecting a menuItme, right or left clicking again.  I
have several embedded questions earmarked by a number and ?.  If you a
comment on any or all of them just list the number before your response.

With CSS2 I can do so much more.  If fact, after coming up the CSS2 
learning curve the light starting blinking!  I am not sure any HTML 
document needs to contain more than divs, text and styles except for links
and form data.  Even a table can be represented as a 2 dimensional array
of divs.  Web page designers are being encouraged to use divs and not
tables to layout pages and use the CSS2 style attribute for embedded table
text as well.  In my opinion many of the previous tags related to
positioning, text attributes, lists and a few others are now obsolete.

By using popup divs and not popup windows, the popup divs are always in
front and do not get lost when the page is not the front one.  Custom
alerts, dialog  boxes can all be replaced with divs and made to look like
the original window.

I still have two other uses.  I would like to try HTML to see if I can
speed up my graphic div class.  Would this be done with "outerHTML."  How
do I add a  new div in HTML?

Second, I would like to add submenus to my popup menu.  This now becomes
simple with popup divs.  However, there is a certain delay before the
submenu is displayed.  How would you suggest doing this?  Maybe start a
timer when the mouseover routine is called and then if the timer gets over
500? milliseconds show the submenu?

Again,  thanks for input that you might share.

Paul

From	Me
To	Paul Lambert
Subject	Re: popup revisited
Date	7 September 2003 09:52

> Even a table can be represented as a 2 dimensional array of 
> divs.

My latest site redesign replaced a tables based structure with CSS2.

But tables re-arrange themselves so that the cells line up correctly 
reguardless of content. There are in fact some CSS properties designed 
to convert regular elements into table rows and cells, but browser 
support is not as good as it could be. see
http://www.blooberry.com/indexdot/css/propindex/all.htm
and look for the display style.

> I still have two other uses.  I would like to try HTML to see if I can 
> speed up my graphic div class.  Would this be done with "outerHTML."  How 
> do I add a  new div in HTML?

see
http://www.howtocreate.co.uk/tutorials/javascript/dhtml#dhtmlCONT
which documents how todo 4th gen DHTML (which is what you are after)
look under rewriting the contents of positioned 
refToObject.innerHTML = '<div style="blah">content</div>'
What I suggest you do is put together the whole string of divs you need 
before adding them to the document like this, it will save the browser 
from having to re-adjust the document so many times.

> Second, I would like to add submenus to my popup menu.  This now becomes 
> simple with popup divs.  However, there is a certain delay before the 
> submenu is displayed.  How would you suggest doing this?  Maybe start a 
> timer when the mouseover routine is called and then if the timer gets over 
> 500? milliseconds show the submenu?

yes. run timers for mouseover, then clear the timer onmouseout. if the mouse
stays long enough, the div will be shown. Note of course, this menu will not
work in Opera (because it does not detect right clicks). You may want 
to try detecting the left click along with Ctrl (the Mac standard).

From	Paul Lambert
To	Me
Subject	create before adding
Date	11 September 2003 19:40

Mark,

Regarding your included reply to my question about building the graphic
divs before adding to the document is there an alternative using CSS.  
Can an array of divs be created and then added to the document one time
similar to building outerHTML and placing it in one array and then adding
it all at once to the document, thereby, bypassing the multiple document
rendering scheme as each div is added?

Thanks

Paul

From	Me
To	Paul Lambert
Subject	Re: create before adding
Date	12 September 2003 09:43

Yes, that is a perfectly good way to do it

var x = [];
while( someCondition ) {
 x[x.length] = '<div style="left:'+leftVar+'px;etc."></div>';
}
containerReference.innerHTML = x.join("");

Please note, you should use innerHTML, not outerHTML as outerHTML 
is not supported by very many DOM browsers, but innerHTML is 
supported by all of them.

Tarquin

From	Paul Lambert
To	Me
Subject	suppressed doc rendering
Date	23 September 2003 19:06
Attachment	script file that uses W3C DOM methods to create multiple DIV elements directly and using a documentFragment

Mark,

I am including a snippet that uses W3C interfaces to add nodes to the 
document but suppresses drawing the document until all nodes are 
added.  You had suggested that my previous graphic widget was consuming 
lots of time in redrawing the document with the addition of each node (a 
"div" with a text ".").  You stated that this could be done via DHTML by 
simply writing out the document to a text string before writing the entire 
string to the document window.

I have used a W3C document "fragment" to perform a similar function.  The 
timer I have implemented shows a reduction is execution time of 10 to 1 on 
the example I wrote.  Try and see what you think.

In my graphics example, I have always created a "text" node.  How is an 
HTML node created?  If I embed HTML code within a "text" node it is ignored.

Second, I believe the current Mozilla browser is based on java or some 
other "interpreted" language.  Correct?  Are there any public/shareware 
browsers that are written in pure C/C++ code.

Thanks for all of your assistance.  I will pass along any related tidbits 
that I find that may assist your testing as I discover them.

Paul

From	Me
To	Paul Lambert
Subject	Re: suppressed doc rendering
Date	24 September 2003 09:41

> The timer I have implemented shows a reduction is execution time of 10 to 1

Times shown in seconds as: [non-fragment:fragment]

I get
  (WinXP 1.8GHz 512M RAM)
    Mozilla: [56:10]
    IE6: [6:5]
    Opera 7: [25:3(rendering bug shows only righthand 8 columns)]
    ICEbrowser: [7:6]
  (MacOS X G4 400 MHz 128M RAM)
    IE5: [?(gave up after 10 minutes):22]
    Safari: [6:5]
  (WinNT 500MHz 128M RAM)
    IE5.0: [15:14]
that is a significant improvement for many of them, and the times are just
about good enough for people to wait for it to finish drawing.

By the way, window.personalbar etc. are Gecko properties, so the other
browsers produce errors here
Also, some browsers (ICE,IE5+Win/Mac) do not like
'setAttribute("style", etc.)' so you should always use
element.style.position='absolute'; etc.

I'm not sure yet how many other 5G browsers (NetBox, OpenTV, etc.) support
createDocumentFragment. PPK's page shows no tests for it.

> How is an HTML node created?

You already create an HTML node:
document.createElement('DIV');
HTML nodes can be appended to other HTML nodes if the parent node supports
child elements.
I suggest you take a look at my introduction to W3C DOM nodes:
http://www.howtocreate.co.uk/tutorials/javascript/dombasics
subsection 'Creating new nodes and removing existing ones'.

> I believe the current Mozilla browser is based on java or some
> other "interpreted" language

Mozilla is written in C/C++, not Java. Mozilla.org do write a Java based
JavaScript engine - it is called Rhino, and it is used in ICEbrowser.
Mozilla is very slow compared with the other browsers, but makes up for it
in terms of flexibility and its unsurpassed level of DOM support.

Konqueror is also written in C/C++, but that only runs on Linux, or Safari
(which uses the same KHTML code) can be run on Mac OS 10.2+.
KHTML is much faster, but has not got such good DOM support (import XML,
StyleSheet rule modification and table manipulation are all missing).

The other browsers are all closed source, but can all be obtained for free
(ICE requires registration and is time limited). Opera 7 is by far the best
IMO, although I am disappointed by its rendering bug. It has lower DOM
support than some of the others (import XML and StyleSheet rule
modification are missing) but has the best CSS support of any browser.

Incedentally, you should specify the position with units, or the script
will not work with strict doctypes:
top: "+y+"px; left: "+x+"px;
(note, I have added 'px')

From	Paul Lambert
To	Me
Subject	W3C no print
Date	7 October 2003 16:48

Mark,

When I attempt to print my W3C derived "poor mans" graphics, I get nothing
when using NS7.1.  The graphics are all generated by "divs" and then
appended to the document.  They all are rendered successfully on the CRT
display they just will not print.  Is this a known bug?

Paul

From	Me
To	Paul Lambert
Subject	Re: W3C no print
Date	8 October 2003 08:12

I take it you mean the image is set as the background for the DIV.
If so, your problem is that NS 7.1 has been told not print backgrounds.

File - Page Setup - Format & Options (tab) - Print Background

Paul Lambert

Navigation

Search

Site navigation

Email conversation