PDA

View Full Version : Animated window opener



chechu
12-31-2006, 04:20 PM
1) Script Title: Animated window opener

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex8/animatedwin2.htm

3) Describe problem: Is it possible to make the screen as wide and high as the screen itself. In the script, it just fills up 98% of the screen.

jscheuer1
12-31-2006, 07:54 PM
Set these to 0:


var leftdist = 10; // distance to left edge of window
var topdist = 10; // distance to top edge of window

chechu
01-01-2007, 09:00 AM
Have done that. The problem is at the right and at the bottom. Can you add a var for that ?

jscheuer1
01-01-2007, 09:51 AM
I see, the problem comes in when the winwidth and/or winheight are not evenly divisible by widthspeed or heightspeed, respectively. The fix is to do a final resize to winwidth and winheight after all the incremental resizing has played out:


<script type="text/javascript">

//Animated Window- By Rizwan Chand (rizwanchand@hotmail.com)
//Modified by DD for NS compatibility
//Visit http://www.dynamicdrive.com for this script

function expandingWindow(website) {
var windowprops='width=100,height=100,scrollbars=yes,status=yes,resizable=yes'
var heightspeed = 2; // vertical scrolling speed (higher = slower)
var widthspeed = 7; // horizontal scrolling speed (higher = slower)
var leftdist = 0; // distance to left edge of window
var topdist = 0; // distance to top edge of window

if (window.resizeTo&&navigator.userAgent.indexOf("Opera")==-1) {
var winwidth = window.screen.availWidth - leftdist;
var winheight = window.screen.availHeight - topdist;
var sizer = window.open("","","left=" + leftdist + ",top=" + topdist +","+ windowprops);
for (sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed)
sizer.resizeTo("1", sizeheight);
for (sizewidth = 1; sizewidth < winwidth; sizewidth += widthspeed)
sizer.resizeTo(sizewidth, winheight);
sizer.resizeTo(winwidth, winheight);
sizer.location = website;
}
else
window.open(website,'mywindow');
}

</script>

chechu
01-01-2007, 04:06 PM
Works perfectly. Thanks !

sdasevne
01-01-2007, 09:27 PM
Would it be difficult to allow each window open to be a different size, specified by the user? I'd like to be able to control the window size to fit some images of varying sizes (and even be able to specify yes/no to scrollbars).

chechu
01-02-2007, 09:59 AM
I suppose you would have o change the following:

function expandingWindow(website) {
var windowprops='width=100,height=100,scrollbars=no,status=yes,resizable=no'
var heightspeed = 2; // vertical scrolling speed (higher = slower)
var widthspeed = 7; // horizontal scrolling speed (higher = slower)
var leftdist = 50; // distance to left edge of window
var topdist = 100; // distance to top edge of window

chechu
01-02-2007, 10:01 AM
Or even better:


function expandingWindow(website) {
var windowprops='width=50,height=70,scrollbars=no,status=yes,resizable=no'
var heightspeed = 2; // vertical scrolling speed (higher = slower)
var widthspeed = 7; // horizontal scrolling speed (higher = slower)
var leftdist = 50; // distance to left edge of window
var topdist = 100; // distance to top edge of window
But I suppose that these variables are in percentage, so it will not always be the exact size you want (depending on screen size)

sdasevne
01-02-2007, 04:22 PM
What I meant was that I need a way of calling the subroutine and passing variables to it (like width, height, scrollbars, etc.) for EACH call. That way, I could have each image open in a different sized window. Something like this:

call WindowOpen('100','400','NO'); to open a 100 x 400 window

or call WindowOpen('350','240','YES'); to open a 350 x 240 window

I know I could just duplicate the script a dozen times on each page (with different size parameters) and call the one closest to the size I need, but I thought there might be some way to avoid having a dozen or more copies of essentially the same script, with only size or yes/no parameter differences.

jscheuer1
01-02-2007, 06:49 PM
function expandingWindow(website, name, width, height, top, left, scrollbars, status, resizable) {
var windowprops='width='+width+',height='+height+',scrollbars='+scrollbars+',status='+status+',resizable='+resizable
var heightspeed = 2; // vertical scrolling speed (higher = slower)
var widthspeed = 7; // horizontal scrolling speed (higher = slower)
var leftdist = left; // distance to left edge of window
var topdist = top; // distance to top edge of window

if (window.resizeTo&&navigator.userAgent.indexOf("Opera")==-1) {
var winwidth = window.screen.availWidth - leftdist;
var winheight = window.screen.availHeight - topdist;
var sizer = window.open("",name,"left=" + leftdist + ",top=" + topdist +","+ windowprops);
for (sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed)
sizer.resizeTo("1", sizeheight);
for (sizewidth = 1; sizewidth < winwidth; sizewidth += widthspeed)
sizer.resizeTo(sizewidth, winheight);
sizer.resizeTo(winwidth, winheight);
sizer.location = website;
}
else
window.open(website,name);
}

example call:


expandingWindow('http://www.google.com/', 'win1', 300, 250, 100, 150, 'yes', 'yes', 'yes')

Twey
01-02-2007, 07:40 PM
The vertical resizing doesn't seem to work in Konqueror.

sdasevne
01-02-2007, 11:57 PM
Hello John,

Thanks very much for your prompt, complete, and easy-to-understand replies not only to my questions but to everyone else's. You have a remarkable amount of knowledge of these scripts.

I know you are very busy, so I will not bother you with my problem again. I got this script working somewhat thanks to your help, but I had to replace these lines:

var winwidth = window.screen.availWidth - leftdist;
var winheight = window.screen.availHeight - topdist;

with these in order to get the window size close to what I requested:

var winwidth = width;
var winheight = height;

The resulting window still resizes too short, but I can live with it. If you go to www.RevelationOfHope.us and click on the link, you'll see the correct window size flash on the screen momentarily before it is resized incorrectly, but this (flashing of the window size) happens only randomly.... perhaps the first, 10th, 11th, 15th, 16th, and 19th times you click on the link.

If you have a chance to take a look at this, please do so. However, as I said, the script is working well enough to be usable, so don't spend a lot of time on this. And thanks again for all your help.

jscheuer1
01-03-2007, 04:18 PM
Even though this is a somewhat modified script, please follow the DD usage policy:

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

The problem here is in the different natures of the the window.open() method and the window.resizeTo() method. The dimensions of window.open are calculated on the basis of an unopened window. What its chrome will be is unknown so, the window actually opens beyond the size specified to allow for any added chrome and to still have a viewable area that matches the dimensions passed in its specifications. Once the chrome is added it will, if possible/needed, shrink so that the innerWidth and innerHeight are those specified as the dimensions of the window. However, once a window is opened and is resized, these dimensions are the outerWidth and outerHeight. For a typical window of the type you are opening on your page, add about 57 to the height and 9 to the width, more if you anticipate scrollbars. These are just rough approximations, will vary somewhat among browsers, and will need to be different if there is more chrome than you are currently using.

sdasevne
01-03-2007, 10:03 PM
Thanks for the explanation and workaround. I'm sorry about the copyright notice not appearing; all I did was copy and paste your code in the previous reply. I didn't realize that I had to add the notice to your code, but I'll do this now.