Solved

tile windows

Posted on 2000-03-27
21
538 Views
Last Modified: 2008-02-26
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
Comment
Question by:yes4me
  • 9
  • 4
  • 4
  • +4
21 Comments
 

Author Comment

by:yes4me
Comment Utility
Adjusted points from 200 to 300
0
 
LVL 10

Expert Comment

by:kollegov
Comment Utility
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

by:hkthomas
Comment Utility
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

by:CJ_S
Comment Utility
You mean:

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

??
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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

by:Michel Plungjan
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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

by:HolySpirit
Comment Utility
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

by:kollegov
Comment Utility
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

by:yes4me
Comment Utility
Adjusted points from 300 to 400
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:yes4me
Comment Utility
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

by:yes4me
Comment Utility
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

by:yes4me
Comment Utility
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

by:yes4me
Comment Utility
Hello?? Anyone wanna give a shot at this problem? I will give you the points... promised.
0
 
LVL 10

Accepted Solution

by:
kollegov earned 400 total points
Comment Utility
<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

by:Michel Plungjan
Comment Utility
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

by:kollegov
Comment Utility
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

by:yes4me
Comment Utility
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
 

Author Comment

by:yes4me
Comment Utility
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

by:yes4me
Comment Utility
Now this is odd... how come my question drop from 400 to 40 points?
0
 
LVL 3

Expert Comment

by:darinw
Comment Utility
Reviewing question.

darinw
Customer Service
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

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

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

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now