window.open - Javascript question

[Bob L]

I'm writing a JavaScript routine that will open a new window and play a
QuickTime move. The new window will be a little bigger than the QuickTime
movie and will execute some script when the window is created. According to
something I found on the MS website, the window.open function looks like
this:

window.open( [sURL] [, sName] [, sFeatures] [, bReplace]) where:

sURL is the URL of the QuickTime movie
sName is the name of the new window
SFeatures is a parameter list for things like the height and width of the
window

The new window gets created okay but how do I go about having some script
executed when the window opens. Among other things, I'd like to resize the
window once the height and width of the movie are known. Is there a way to
have a specific predefined window open?

Anybody have any ideas on how to do this?

 

[Randy Webb]

Bob L said the following on 12/31/2005 5:47 PM:

[follow-up's set to microsoft.public.scripting.jscript]

I'm writing a JavaScript routine that will open a new window and play a
QuickTime move. The new window will be a little bigger than the QuickTime
movie and will execute some script when the window is created. According to
something I found on the MS website, the window.open function looks like
this:

window.open( [sURL] [, sName] [, sFeatures] [, bReplace]) where:

sURL is the URL of the QuickTime movie
sName is the name of the new window
SFeatures is a parameter list for things like the height and width of the
window

The new window gets created okay but how do I go about having some script
executed when the window opens. Among other things, I'd like to resize the
window once the height and width of the movie are known. Is there a way to
have a specific predefined window open?

Anybody have any ideas on how to do this?

Have a generic page that accepts a URL paramater. The page, once opened,
uses the window.onload to trigger a script that would load the
appropriate QuickTime movie and resize the window once the movie size is
known.

 

[Kevin Spencer]

If you put the movie inside a table with no width and height specified, you
can use the offsetWidth and offsetHeight properties of the table element to
get the width and height of the table, which will stretch to fit the movie.
You can then use these properties to dynamically set the size of the window
you've created. Example:

<table id="sizerTable">
<tr>
<td><img border="0" src="images/chutney(large).gif" width="256"
height="260"></td>
</tr>
</table>
<script type="text/javascript"><!--
var el = document.getElementById("sizerTable");
var w = el.offsetWidth + (el.offsetLeft * 2);
var h = el.offsetHeight + (el.offsetTop * 2);
window.resizeTo(w, h);
while(document.body.clientWidth < w)
window.resizeBy(2, 0);
while(document.body.clientHeight < h )
window.resizeBy(0, 2);
</script>

Some Notes: Notice the use of the offsetTop and offsetLeft of the table.
This is because of the margins that are set by the document and body
elements.

The window itself has no client width and height properties, so you can't
directly set the width and height of the window, as it can be resized using
the window.resizeTo() method, but that sets the outer size of the window. As
the window has unknown dimensions outside of the client area, I used the
calculated width and height of the table (plus margins) to check the
document.body element, which represents the client area of the window, and
stretched the window until the client width and height of the body element
were as large as the space taken up by the table containing the image
(movie, in your case).

Unfortunately, this results in a "stretching" effect, as the window
increases visibly in size, first horizontally, and then vertically.

This JavaScript was written using the W3C Standards, except for the window
resizeTo() and resizeBy() methods, which are common to both Mozilla and IE
browsers. I tested it in FireFox and IE, and got the same results.
--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

I'm writing a JavaScript routine that will open a new window and play a
QuickTime move. The new window will be a little bigger than the QuickTime
movie and will execute some script when the window is created. According
to something I found on the MS website, the window.open function looks
like this:

window.open( [sURL] [, sName] [, sFeatures] [, bReplace]) where:

sURL is the URL of the QuickTime movie
sName is the name of the new window
SFeatures is a parameter list for things like the height and width of the
window

The new window gets created okay but how do I go about having some script
executed when the window opens. Among other things, I'd like to resize
the window once the height and width of the movie are known. Is there a
way to have a specific predefined window open?

Anybody have any ideas on how to do this?

 

[Trevor L.]

Kevin,
Your post about sizing a window to suit a movie got me thinking.

I have some pictures (i.e. jpg files) which I open in new window using
spawnJimcoPopup

I place the image as a background image in a table
<table align="center" id="picname" >
with this code:
with (document)
{
title = cap
getElementById("picname").background = pic
getElementById("picname").height = height
getElementById("picname").width = width
}
(The reason it is placed as a background image is that 4 corner images are
also used to give rounded corners.)

All of cap, pic, height and width are passed as parameters. So, I not only
have to know the name of the pic and its caption (fair enough) but also its
dimensions. These are also used to set the dimensions of the window - same
height and a bit deeper. For example, a 500*500 jpg in a 500*550 window

My question is:
Can I use the same approach as you have described to set the window size
automatically?
(I want to do this so I can use different size pictures without having to
type each one's size in the code)

How would I obtain the width and height of the background image?
I tried using your script, but I got (for "picname")
offsetWidth = 500 offsetLeft = 0
offsetHeight = 41 offsetTop = 0
clientWidth = 500 clientHeight = 550

As I said the image is 500 high and the window 550 high. The window is
positioned at the very top, in the centre. I am using 1024*768 screen
resolution.

What is the offset width and height?
The height of 41 could possibly the height of the margin of the new window,
i.e. the grey bar at the top before the table starts.
But 500 seems to be the image width (or the new window width which is the
same). It can't be the distance from the left of the main window to the new
window. This should be (1024-500)/2 = 262.

You can see what I am referring to at
http://tandcl.homemail.com.au/heading.html
The first <a> tag calls http://tandcl.homemail.com.au/picture.html which
calls getPic() on http://tandcl.homemail.com.au/external.js

I am wondering whether there is some JS which obtains an image width and
height. In an image tag, it would be getElementById('imgtagid').width and
getElementById('imgtagid').height.

But I have a background image
When I set var el = document.getElementById("picname"),
alert ('el.background-image.width =' + el.background-image.width)
doesn't work
alert ('el.background.width =' + el.background.width) gives the result
'undefined'

 

[Kevin Spencer]

Hi Trevor,

Can I use the same approach as you have described to set the window size
automatically?

You should be able to. The approach is based upon the fact that a table
resizes to fit its contents, unless a size is specified.

How would I obtain the width and height of the background image?
I tried using your script, but I got (for "picname")
offsetWidth = 500 offsetLeft = 0
offsetHeight = 41 offsetTop = 0
clientWidth = 500 clientHeight = 550

Looks like clientHeight and clientWidth should work for you. These specify
the size of the client area of an element, such as a table, or a div. The
client area is the area inside the borders.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.

 

[Bob L]

Well, actually , what I'm planning on doing is to display a QuickTime movie
in the popup window so in order to get the movie height and width I plan to
use info I've found on the QuickTime developer site. The plan is to display
a picture on a client page ("client.htm") and when the user clicks on the
picture, a window will popup and display the client's movie. There will
likely be several movies/pictures for each client.

When the client clicks on the picture, a script is triggered The problem
I'm having is in using the window.open () function. I've defined the popup
window as "movie_viewer.htm. What I can't figure out is how to pass the
name of the movie to be played to the popup window. I open the popup window
like this: window.open('movie_viewer.htm','movie_viewer', options); where
options="scrollbars=no,menubar=no,titlebar=no, etc. ".

Once movie_viewer opens, I'd like to set up the window size and other
parameters by initializing the movie and using some QuickTime JavaScript
functions. But how can I pass the movie name from client.htm to
movie_viewer.htm?

 

[Steve Easton]

Trevor,

Take a look at this "experiment" and see if it gives you any clues:
http://www.95isalive.com/test/

The script is in the source for the page.
Seems to work fine in IE6 and FF 1.5

--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

 

[Bob L]

Interesting. This may help. Thanks.

Trevor,

Take a look at this "experiment" and see if it gives you any clues:
http://www.95isalive.com/test/

The script is in the source for the page.
Seems to work fine in IE6 and FF 1.5

--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
.......................with a computer

 

[Trevor L.]

Trevor,

Take a look at this "experiment" and see if it gives you any clues:
http://www.95isalive.com/test/

Thanks Steve,

I gave it a go and my first try didn't work. All the windows were very
small - about 100*100, i.e. the orginal dimensions.
Your comment:
// we need a little pause while the script gets the image since the image is
on the server,
// or the browser will open the window and write the script before the image
is cached,
// which causes the script to write zeros for the resizeto dimensions.
gave me the clue.

That is, the pause wasn't long enough.

When I started again, all resized fine. Clearly they were cached at this
stage. Is there a test to determine when an image has been cached?

Now all I have to do is see whether I can adapt this to my requirements
which is to size a window according to the size of the *table* in which the
image is a background image. (In your example, it is the body which has the
image as a background, not a table.) Hopefully I don't have to make too many
changes.

P.S. I also have to get my head around the structure of your JS
function newWindow(img)
{
new function testit()
{
// This function calls loadit()
function loadit()
{
// This function calls testit()
} // end of loadit()
} // end of testit()
} // end of newWindow()

The comments are mine. I see that you have a function newWindow() which
contains function testit() which contains (and calls) function load it()
which (conditionally) calls testit()

Some questions.
1. I note loadit() is defined differently - as "new function testit()". Does
this mean that it executes without being called?

2. Function loadit() calls testit() which calls loadit(). That is, testit()
is recursive, which is a bit new to me.
I assume that this is perfectly valid JS. (Clearly or you wouldn't have
written it.)

3. newwindow is opened with:
width=" + imageToLoad.width + ",height=" + imageToLoad.height
and then resized to the same dimensions.
Why is it so?
Isn't one of these sufficient?

4. Why did the image first appear as 100*100?
Isn't the code:
if (imageToLoad.width = 0)
{ testit(); }
sufficient to keep trying to reload the image until the dimensions are
known?
or is there another solution along the lines of my earlier query
"Is there a test to determine when an image has been cached?"

BTW, your comment "see if it gives you any clues:" certainly aplies. You
sure have given some ideas to follow up on.

 

[Trevor L.]

4. Why did the image first appear as 100*100?
Isn't the code:
if (imageToLoad.width = 0)
{ testit(); }
sufficient to keep trying to reload the image until the dimensions are
known?

I found part of the answer to this question

The code should be
if (imageToLoad.width == 0)
{ testit(); }

I have made this mistake before.

So even the learned fall into the same trap.

:-D (very big grin)

 

[Steve Easton]

Actually the comment needs to be edited:

The delay isn't for the image to be cached, it's actually to allow time for the script to
make the round trip to the server, or the script will open the window before the file
dimensions are returned.

It's been a while since I worked on this, but iirc "new function" is ignored when the script
runs unless it is specifically called.


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed..................
...............................with a computer

 

[Steve Easton]

Yep, you got me.

;-)

Actually when I started playing with this whole thing, I was also banging my head against
the wall in Visual Studio working on FP Cleaner and Hit Me FP.

--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed..................
...............................with a computer

 

[Bob L]

I can see how the image gets displayed in the popup window but I don't see
how I can get the popup window to run the QuickTime movie.

 

[Trevor L.]

Actually the comment needs to be edited:

The delay isn't for the image to be cached, it's actually to allow
time for the script to make the round trip to the server, or the
script will open the window before the file dimensions are returned.

It's been a while since I worked on this, but iirc "new function" is
ignored when the script runs unless it is specifically called.

So after a bit of experimentation, I came up with this

function newWindow(newwin_img,caption)
{
new function testit()
{
var imageToLoad = new Image()
imageToLoad.src = newwin_img

var h = imageToLoad.height
var w = imageToLoad.width
var windh = h + 50

// check to see if we have the dimensions and if not, wait 0.5 second
and go back
if (h*w == 0)
setTimeout('testit()',500)
else
spawnJimcoPopup
('picture.html?picture=' + newwin_img + '&amp;caption=' +
caption
+ '&amp;height=' + h + '&amp;width=' + w
,'_blank'
,'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'
,windh,w,'center','0','pixel')
}
}

This is called like this
<a href=''
onclick="newWindow('images/display/trevor.jpg','Trevor');return
false" >
<img src="images/display/trevor.jpg" alt=""
width="65" height="65" />
</a>
newwin_img is a global variable

Does the delay seem to be in the right place?

The code works OK locally.

From what I can tell, the code in the new function does execute without
being called. Otherwise the new window wouldn't open

 

[Trevor L.]

Steve,

I am trying to improve my Javascript knowledge, so I hope I can ask you a
few questions

I found that the function newWindow() works quite OK if newwin_img is *not*
global. I couldn't see why it needed to be and it doesn't. I have now
abbreviated it it to img - being local it doesn't matter if this name is
used somewhere else.

The big question is why does testit() work without being called and how is
it that img and caption are known inside testit(). They are parameters to
newWindow() but they are *not * passed from newWindow() to testit().

Is this a different type of function?