H.J. Pallesen

Yes, this is a very irritating bug in Mozilla - also get related bugs in
Safari and IE Mac

To make it scrollable, you should use
<div style="overflow:auto;height:100px;width:100%;" id="blah">CONTENT</div>
as the content. This will only work if you restrict the height to an exact
size. It will not work if you use a relative size, so you may not want to
make the mini windows resizable.

I did once find someone else's script that could make a (very ugly) mini
window resizable and have a scrollbar, but it never worked properly in all
the main browsers, so I'm afraid that this is the best I can do.


Hope you find this useful

Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

I'm afraid it is not as easy as that page makes it seem. It uses a clipped
scrolling layer and does not actually use real scrollbars. If I were to
implement this, I would use real scrollbars, using the overflow:auto; style,
as that allows the browser to do it all itself.

However, there are a number of issues that I would need to take into
consideration. One of the primary goals of my scripts is to work in as many
browsers as possible. With the technique used by that site, there are many
problems with older browsers (to the extent that content is either missing
or is spread across the page), and using overflow would also cause problems
in OmniWeb, Konqueror and Safari 1.1- (and these are current browsers, not
legacy ones).

Until I can work out how to avoid these problems, I will not be
implementing the functionality into my script. I do have plans to implement
it, but I am afraid it will not be as easy as just changing one or two
style declarations.

if done properly, it would scroll and be resizable, since the CSS would
make it dynamic.
but when I tried it, it didn't work as well as I had wanted in everything I
wanted it to work in. I will get it to work eventually, but I am afraid it
will not be as soon as you seem to want it.

ok, ok, I'm working on it :)

I got a major bug in Mozilla that I need to work around - it should only
take a few hours work for me to work out what I need to do to avoid it.
Basically, each of the browsers has its own little bugs, but mozilla has got
as many as all the other browsers put together. I hope to have it working,
with scrollbars and resizable, within the next few days.

> I am eager to see the result.

It is ready now.
http://www.howtocreate.co.uk/tutorials/jsexamples/movablewindow.html

> I have tried to figure out the height of the mini window, but can't.

you can find the exact height using this code:
var x = getRefToDivNest( nameOfMaximisedWindow );
var windowHeight = 0;
if( nameOfMaximisedWindow
 if( nameOfMaximisedWindow.offsetHeight ) {
   windowHeight = nameOfMaximisedWindow.offsetHeight;
 } else if( nameOfMaximisedWindow.clip ) {
   windowHeight = nameOfMaximisedWindow.clip.bottom;
 }
}

You can also set the height manually using this code:
maximiseWin( nameOfMaximisedWindow, nameOfMinimisedWindow );

> It puzzles me how a mini window can be shown (you build it with tables and
> div's), because looking at the source code on at page with a mini window, I
> don't see any mini window html tags. How do you do that?

Exactly like you just said. It is not a real window. It is a fake window,
made from carefully styled <div> and <table> tags to look like real windows.

In theory, you can now put this in as the window content, making it almost
a real window:
<iframe src="http://www.google.com" height="100%" width="100%"></iframe>
However, Mozilla will not move the iframe, Opera will not be able to move
it or minimise etc, Safari/OmniWeb, Konqueror and IE Mac will fail to show
the iframe properly if it gets too close to the edge of the page, and may
just decide not to move it at all. Other browsers may just show nothing at
all. My advice, don't use an iframe as the content :)

Real windows, also called popups, can also be opened with JavaScript, but
these may be blocked using popup blockers:
http://www.howtocreate.co.uk/tutorials/jsexamples/popwin.html
http://www.howtocreate.co.uk/perfectPopups.html

Thank you very much for having added the scrolling possibility in the
Mini Windows script.

I have one more thing to ask.


Would it be possible that 'content' could be loaded with e.g. a html
file that were not prepared, so I could
Do a 
var nameObject = createMiniWinLayer('<? include('content.htm');?>', etc.


As it is any text has to be on one line or you get a string constant
error.


Regards


H.J. Pallesen

This looks like PHP :)
Should be fairly easy to make PHP convert a file into valid JavaScript
string.

<?

function include_as_string( $fileName ) {
 $handle = fopen( $fileName, 'rb' );
   if( !$handle ) {
     print 'Unable to open file'.htmlSpecialChars($fileName);
   } else {
     $fileStr = fread( $handle, filesize($fileName) );
     fclose($handle);
     $fileStr = addslashes($fileStr);
     $fileStr = str_replace("/","\\/",$fileStr);
     $fileStr = preg_replace("/\r?\n/","\\\\n",$fileStr);
     print $fileStr;
   }
}

?>

now you can call that function like this:

var nameObject = createMiniWinLayer(
    '<? include_as_string("content.htm"); ?>',
    ...etc...
);

content.htm should have valid HTML (closing </div>, </tr>, </td> and
</table> tags without corresponding opening ones will cause problems), and
should _only_ include the body contents, not the <html>, <head> or <body>
tags.

If you want to do this with JavaScript, it is also possible, but a bit
harder.
create the mini window with no content and immediately set its height to
the desired height
Embed an iframe into the end of the page and use CSS to hide it.
<div  style="visibility:hidden;position:absolute;left:0px;top:0px;">
<iframe src="content.htm" height="1" width="1"></iframe></div>
attach the onload event to the body of content.htm, and make it rewrite the
window:
parent.reWriteWin(nameOfMaximisedWindow,nameOfMinimisedWindow,this.innerHTML);
[Ed. 'this.innerHTML' should be 'document.body.innerHTML' - see below]


Personally, I recommend the PHP approach if at all possible, since it is
more cross-browser compatible, and is much more simple to implement.


Tarquin

> I discovered this:
> this.innerHTML does not work in the body onload event.

I forgot about that one. yes, for some stupid reason, even though the event
handler is in a body attribute, the active object is the window object, not
the body.

you can use document.body.innerHTML to be certain

> Another issue:
> netscape 7.02 won't display the scroll bars

correct. I have disabled scrollbars in browsers using Gecko engines earlier
than Mozilla 1.5, because due to a CSS bug, they made the mini window
collapse to be 0 pixels high when it used overflow: auto; - I tried to fix
it but it was yet another Gecko bug that I found when trying to do
scrollbars. I'm afraid that this is how it will have to stay.

> divIdName.innerHTML

please don't do this. it is non standard and will only work in IE and Opera.
use this instead, as it is fully cross browser (5th generation):

document.getElementById(divIdName).innerHTML

> So - with php how do I in general test for Mozilla < 1.5?

as a general rule; you don't.
server side browser detection is inherently flawed.
Most browsers privide ways to deliberately misidentify themselves as other
browsers, and server side scripts are usually not able to cope with this.

> And could you also pinpoint the code in your movewindows.js script where
> you make that check. I can't find it.

This is what I use to detect these Mozilla releases:
navigator.product == 'Gecko' && navigator.taintEnabled &&
typeof( document.textContent ) == 'undefined'

If you search within the script source for document.textContent you will
find where I have used that code.

With Mozilla based browsers, the product property of the navigator object
is always 'Gecko'. The check for taintEnabled ensures that Safari is not
misidentified as Mozilla, and the check for document.textContent ensures
that the version is less than 1.5, since this property was only implemented
in that version.

yup, looks like you have discovered a bug. let me see if I can solve it

> I get a fine looking mini window with scrollbars in Gecko.
> But as soon as I click the resize image, the mini window grows in height
> to full size, so with a lot of text this could be several pages.

Unfortunately, even after spending many hours struggling with this, I could
not find any way at all to avoid it. It seems to be a bug within the way
that the Gecko engine treats overflow:auto. For some unknown reason, if you
change the element's contents (in this particular case, using innerHTML),
and the new content exceeds the original size of the element, Gecko engine
no longer applies the overflow declaration properly. (It already has enough
problems with overflow:auto; - as testified by the number of bugs I have
already had to fix with that - so this is no real surprise to me) The
problem is made worse when resizing the element with script. I have added a
warning about this into the script instructions.

> The resize image jums from the lower right corner and moves upwards
> - out of place.

yes, known problem - one of the other overflow:auto; bugs. I have alrerady
partially prevented this using a height that is calculated to best avoid
the drag handle displacement. I cannot make this any better without
producing a large, ugly, blank space, please accept it as it is.

> It could be nice also, if you could set the height of the window in the
> createMiniWinLayer function call, as you can do with the width.

There is no need, since you can already set the height using the resizing
function, immediately after creating the mini window. The height is
deliberately omited, firstly to be nice to older browsers, and secondly to
prevent scrolling problems. If I were to implement this, it would be a case
of creating the window, then calling the resize function myself, so there
is nothing that would be saved by my implementing this.

> would it not be possible to actually code the scrolling functionality
> using div's with images (e.g. up and down arrows and a slidebar)

yes it would, but I am not going to write this part. the way I have done it
is the correct (and more accessible) way to do it. If you wish to write
this part yourself, feel free to do so. Personally, I feel that since it is
a bug, it is up to the Mozilla group to fix it, and once fixed it will work
properly. I have already spent a great deal of my time on the bugs in this
browser, and I cannot really afford to use some more to write a scrolling
algorithm, when if the browser did what it was supposed to do, it would
already work.

> And as for loading a lot of html (a whole file for instance) without
> having to put it all on one line, I thought it could be done by
> splitting the createMiniWinLayer in 2 halves:

Yes, you can do this if you want.

var oContent = '<table>...etc...</table>';
var nameObject = createMiniWinLayer(
    oContent,
    ... etc...
);

It might also be useful to note that JavaScript does not insist that the
string is on one line. you can split a string onto multiple lines by using
the concatenation operator:

var oContent = '<table>'+
    '<tr>'+
    '<td>blah</td>'+
    '</tr>'+
    '</table>';