[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
Solved

# tile windows

Posted on 2000-03-27
Medium Priority
548 Views
If you have n popup windows, how do you make them tile in such way that they fill up the entire screen?

We are going to assume that the size of the screen is 640*480.
0
Question by:yes4me
• 9
• 4
• 4
• +4

Author Comment

ID: 2662353
Adjusted points from 200 to 300
0

LVL 10

Expert Comment

ID: 2662501
Quite easy..

<script>
w=screen.width;
h=screen.height;
w=window.open('some.html','neWin','width='+w+',height='+h)
w.moveTo(0,0);
</script>

0

Expert Comment

ID: 2662714
how do yopu mean by that all "n popup windows"? Do you mean you have to dynamically arrange all the new windows you popup while having all tiled over the screen ?
say, at the beginning 1 windows covering whole, than 2 windows cutting the screen into halves, and later 3 windows .....
like that ?
0

LVL 22

Expert Comment

ID: 2663197
You mean:

??
0

LVL 75

Expert Comment

ID: 2663395
Tile means fill the screen with non overlapping windows.

Yes4Me wants us to
1. Calculate the width and height available
2. Divided that by number of windows
3. Open each window so it does not overlap

Not trivial.

So something like
n = 4:
w=w/4
h=h/4
for (i=0;i<=n;i++)
wPos = w+(w*n)
hPos = h+(h*n)
window.open('','win1','width='+w+',height='+h+',left='+wPos+',top='+hPos);

Needs some refinement...

Let me see what I can do...

Michel
0

LVL 75

Expert Comment

ID: 2663425
And now it needs the code to tile across and not diagonally ;-)

<script>
aw = screen.availWidth;
ah = screen.availHeight;
function tile(n) {
w=parseInt(aw/n);
h=parseInt(ah/n);

for (i=0;i<n;i++) {
wPos = w+(w*i)
hPos = h+(h*i)
windId.document.writeln(i+':<BR>'+w+'x'+h+'<br>'+wPos+'x'+hPos)
windId.document.close();
}
}
</script>

0

LVL 75

Expert Comment

ID: 2663428
So someone needs to change

wPos = w+(w*i)
hPos = h+(h*i)

to reflect if there is enough room across  - perhaps a parameter to specify if it is across or down ;-)

I am sorry, I do not have time right now...

Michel
0

LVL 2

Expert Comment

ID: 2663665
yes4me,
Try this script :

<html>

<script language = JavaScript>
function putTiledWnd(numX, numY)
{
var wndObjs = new Array();

var scrX = top.screen.width;
var scrY = top.screen.height;

var i1, i2;

if ((Math.round(scrX / numX) < 100) || (Math.round(scrY / numY) < 100))
alert("Too many windows !");

scrX = scrX - (scrX % numX);
scrY = scrY - (scrY % numY);

for (i2 = 0 ; i2 < numY ; i2++)
for(i1 = 0 ; i1 < numX ; i1++)
wndObjs[wndObjs.length] = open("default.htm", "", "left=" +((scrX / numX) * i1)+ ", top=" +((scrY / numY) * i2)+ ", width=" +(scrX / numX - 10)+ ", height=" +(scrY / numY - 30));

// Returns an array of window object to those created windows ...
return wndObjs;
}
</script>

<body>
<form>
<input type = button value = "Click me now !" onClick = "putTiledWnd(5, 5)">
</form>
</body>
</html>

Good Luck !
-- Holy Spirit
0

LVL 10

Expert Comment

ID: 2663842
BTW, what's the sense to create N tiled windows...
Wouldn't it be better to create
N frames in frameset ?????

At least for my taste I'd prefere to
close one frame than N times click
on [x] to close all your frames..

Take care about people who would come to your site, and they will come back..

0

Author Comment

ID: 2664466
Adjusted points from 300 to 400
0

Author Comment

ID: 2664467
I saw all you guys posts and I think I need to clarify a little my situation.

I have a ASP file that use Javascript and CAN create over 500 windows by just clicking one button. Now to make them tile is actually harder than what holyspirit guys even wrote.

The main problem is that the windows need to fill up the ENTIRE screen. Now all your examples work for a number of windows such as 1,4,9, or 16.. but what about 5? 5 mean something like dividing the screen in 2 parts, the top one with 2 windows and the lower part with 3 windows. That also mean that the top part popup windows will be larger than the lower part!

Good luck. I am working on it also and hope to be done by the end of the day. However I will still give the points away and not delete the question like some people do.
0

Author Comment

ID: 2664832
Nope, hkthomas

You don't need to "dynamically arrange all the new windows you popup while having all tiled over the screen".

mplungjan actually explains in his first post exactly what I meant.
0

Author Comment

ID: 2665220
Okie dokie... I just wrote the program and it works... and it is not as bad as I was expected.

I am still interested to see what kind of code you guys will end up with... and I still have the points to give away.

BTW, no worry for me... my "available" points I just wasted will be back in no times :)
0

Author Comment

ID: 2674855
Hello?? Anyone wanna give a shot at this problem? I will give you the points... promised.
0

LVL 10

Accepted Solution

kollegov earned 1600 total points
ID: 2675824
<script>

// this is deltas for borders
// one can pop test window to get it borders width first
//and than use them, but I just choosed constants

var dw = 10;
var dh = 26;

//helper open window function

function openWin(x,y,w,h,cnt){
win = window.open('test.html','win'+cnt,'width='+(w-dw)+',height='+(h-dh)+',top='+y+',left='+x);
}

// number of windows to popup and size of area to fill up
var NWIN = 3;
var a = 480;
var b = 640;

function tile(){

var n = Math.round(Math.sqrt(NWIN));
var m = n;

//let's see how much wwindows left
rest = NWIN-m*n;

// if too much than add one more row
if(rest > n/2)
{m++
}

cnt=0;

//tile all rows exept last one
for(var i=0;i<m-1;i++){
for(var j=0;j<n;j++){
openWin(
j*b/n,
i*a/m,
(j+1)*b/n-j*b/n,
(i+1)*a/m-i*a/m,
cnt++
);
}
}

// tile last line
rest = NWIN - n*(m-1);
for(var j=0;j<rest;j++){
openWin(
j*b/rest,
(m-1)*a/m,
(j+1)*b/rest-j*b/rest,
a-(m-1)*a/m,
cnt++
);
}
}

tile()
</script>

This script tested with NN4.7 , MIE5.01 (WinNT)

Virtual_Max.
0

LVL 75

Expert Comment

ID: 2675856
Very cute.

One thing though - Netscape will not allow unsigned scripts to create windows smaller than 100x100 pixels due to secruity hobbles...

Frames can be whatever size, to come back on Kollegov's comment

Michel
0

LVL 10

Expert Comment

ID: 2677456
Michel, tiling of say 13 frames
of the SAME size to fill rectangle area
is unsolwable problem.

Meanwhile it's possible to modify  script I proposed, so that frames have equal squares.

But you are right about case when resulting frames need to be less 100x100 pix  In this case signed script will required :(

This limit with tile area 640x480
will be reached on 18 windows...
(maximum number to fit in 4 lines = 4x4+4/2)

0

Author Comment

ID: 2684330
Here is my code... I am not 100% sure if this is really the solution but heck... it is working so far.

function createWindowsTile()
{
<% 'The coordinates of the next popup window%>
Xwindow=0;
Ywindow=0;
<% 'For some odd reason the window overlap. These variables will keep them from overlapping %>
Xdiff  =10;
Ydiff  =25;
<% 'Number of popup windows %>
nbWindows=nbFunctions*nbAgents;
if (document.DIAGNOSTICS.SERVICES[3].checked)
nbWindows++;

<% 'Find the best type of display that will be used %>
col=1;
do {
col++;
}
while (col*col<=nbWindows);
col--;

row=0;
diff=(col*col)-nbWindows;
do {
saveLastResult=diff;
row++;
diff=col*(col+row)-nbWindows;
} while ( Math.abs(diff)<=Math.abs(saveLastResult) );
row = col+row-1;
diff=col*row-nbWindows;

<% 'Display the popup windows for "normal cases" %>
widthWindow = Math.floor( widthScreen /col )-Xdiff;
heightWindow= Math.floor( heightScreen/row )-Ydiff;
agentId=0;
functionId=1;
nbWindows=0;
for (x=1; x<=eval(col-Math.abs(diff)); x++) {
for (y=1; y<=row; y++) {
nbWindows++;
agentId++;
if (nbAgents<agentId) {
agentId = 1;
functionId++;
}
if (functionId<=nbFunctions)
{
durl = "diagmultiplex.asp?agent=" + escape(agentArray[agentId-1]) + "&function=" + escape(functionArray[functionId-1]) + "&target=" + escape(url);
Ywindow+=heightWindow+Ydiff;
}
else if (document.DIAGNOSTICS.SERVICES[3].checked) {
nbWindows++;
diagnosticWindow[nbWindows] = window.open(durlI, "DIAG"+nbWindows, "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,left="+Xwindow+",top="+Ywindow+",height="+heightWindow+",width="+widthWindow);
}
}
Ywindow=0;
Xwindow+=widthWindow+Xdiff;
}

<% 'Display the popup windows for "special cases" %>
heightWindow= Math.floor( heightScreen/(row-diff/Math.abs(diff)))-Ydiff;
for (x=eval(col-Math.abs(diff))+1; x<=col; x++) {
for (y=1; y<=eval(row-diff/Math.abs(diff)); y++) {
nbWindows++;
agentId++;
if (nbAgents<agentId) {
agentId = 1;
functionId++;
}
if (functionId<=nbFunctions)
{
durl = "diagmultiplex.asp?agent=" + escape(agentArray[agentId-1]) + "&function=" + escape(functionArray[functionId-1]) + "&target=" + escape(url);
Ywindow+=heightWindow+Ydiff;
}
else if (document.DIAGNOSTICS.SERVICES[3].checked) {
nbWindows++;
diagnosticWindow[nbWindows] = window.open(durlI, "DIAG"+nbWindows, "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,left="+Xwindow+",top="+Ywindow+",height="+heightWindow+",width="+widthWindow);
}
}
Ywindow=0;
Xwindow+=widthWindow+Xdiff;
}
}

Thank you for all trying, in particular kollegov.
0

Author Comment

ID: 2684364
In case you really wonder about my code, here are some clue about my home-made algorithm:

First I try to found out the best way to display pop up windows.
I check if the number of window is less than, 1, 2*2, 3*3, 4*4...
Let's assume the number of windows is 13. Then the "best" display would be a little above 3*3=9.

Then I calculate 3*(3+i) and get the number the closest and lower to the number of windows to display... I get 3*4.

Then I calculate the width and height of each popup windows.

I display in title 9 windows.

Then I recalculate the width and height of each popup windows.

And the last colum is made up of 4 windows.
0

Author Comment

ID: 2687054
Now this is odd... how come my question drop from 400 to 40 points?
0

LVL 3

Expert Comment

ID: 2687628
Reviewing question.

darinw
Customer Service
0

## Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript â€¦
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQueryâ€¦
###### Suggested Courses
Course of the Month19 days, 7 hours left to enroll

#### 872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.