tile windows

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.
yes4meAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
kollegovConnect With a Mentor Commented:
<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
 
yes4meAuthor Commented:
Adjusted points from 200 to 300
0
 
kollegovCommented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
hkthomasCommented:
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
 
CJ_SCommented:
You mean:

<body onLoad="resizeTo(640, 480)">

??
0
 
Michel PlungjanIT ExpertCommented:
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
 
Michel PlungjanIT ExpertCommented:
And now it needs the code to tile across and not diagonally ;-)

<head>
<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 = window.open('about:blank','win'+i,'width='+w+',height='+h+',left='+wPos+',top='+hPos+',screenX='+wPos+',screenY='+hPos);  
      windId.document.writeln(i+':<BR>'+w+'x'+h+'<br>'+wPos+'x'+hPos)      
      windId.document.close();
   }  
}
</script>      
</head>

<body onLoad="tile(4)">
0
 
Michel PlungjanIT ExpertCommented:
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
 
HolySpiritCommented:
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
 
kollegovCommented:
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
 
yes4meAuthor Commented:
Adjusted points from 300 to 400
0
 
yes4meAuthor Commented:
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
 
yes4meAuthor Commented:
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
 
yes4meAuthor Commented:
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
 
yes4meAuthor Commented:
Hello?? Anyone wanna give a shot at this problem? I will give you the points... promised.
0
 
Michel PlungjanIT ExpertCommented:
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
 
kollegovCommented:
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
 
yes4meAuthor Commented:
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);
                        diagnosticWindow[nbWindows] = window.open(durl,"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+=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);
                        diagnosticWindow[nbWindows] = window.open(durl,"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+=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
 
yes4meAuthor Commented:
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
 
yes4meAuthor Commented:
Now this is odd... how come my question drop from 400 to 40 points?
0
 
darinwCommented:
Reviewing question.

darinw
Customer Service
0
All Courses

From novice to tech pro — start learning today.