asked on

Resizing the window for a scrolling image

I have a panoramic image which scrolls across a web page. I would like to resize the window so that there is a narrower range of the image visible, perhaps 25% of the screen width instead of 100%, without distorting the image. Please advise on modifying the code to accomplish this. The scrolling image is at http://mauitradewinds.com/Virtual%20Tours/StWVT.htm Thanks!

sunezapa

it should be no problem just to resize the window to 25% of available width.
the problems may be:
- some people do not like you to play with their preferred windows-size (it may be OK for a Pop-up, but then - pop-ups may be blocked).
- the available width may be difficult to get, for all browsers, as there are different ways to get the size

for inspiration:

function resizeWindow(percentOfScreen){
top.window.moveTo(0,0); 
if (document.all) 
   { top.window.resizeTo(parseInt(percentOfScreen/100*screen.availWidth),screen.availHeight); } 
else if 
   (document.layers || document.getElementById) 
   { 
   if 
    (top.window.outerHeight < screen.availHeight || top.window.outerWidth < 
screen.availWidth)
     { top.window.outerHeight = parseInt(percentOfScreen/100*top.screen.availHeight); 
       top.window.outerWidth = top.screen.availWidth; } 
   }

Open in new window

document.all works for Internet Explorer, document.layers works for Mozilla browsers.

ddantes

ASKER

Thank you for your input. I am inexperienced at script writing, so please specify where, in the existing page script, this code should be positioned.

sunezapa

you allready have a some functions on >FORM ... onLoad, so you can just add it there.
The sampole here sets the window size to 50%:

at

onload="InitialiseAutoScrollArea();setTimeout('showit()',3000)"

Open in new window

you change to

onload="resizeWindow(50);InitialiseAutoScrollArea();setTimeout('showit()',3000)"

Open in new window

I can not really check everything, so you may play with the order in the onload-code.

And of course you need to add the function itself somewhere, f.ex. at the other javascript code...

ddantes

ASKER

OK, I added the code at that point, and there was an error...

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SV1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322; .NET CLR 3.0.30618; MS-RTC EA 2; SLCC1; .NET4.0C)
Timestamp: Wed, 23 Feb 2011 22:45:20 UTC

Message: Object expected
Line: 11
Char: 1
Code: 0
URI: file:///P:/My%20Documents/Web-Site%20Mgmt/Website%20Development%20&%20Revision/Virtual%20Tour/Tradewinds/TdwVT.htm

ddantes

ASKER

Also, I think I may not have articulated my question clearly. I don't want to resize the browser window itself. I want to resize the width of the scrolling image on the full-size page, without distorting it. If the first code you specified will accomplish that, all I need is instruction on where to insert that code. Thanks.

ASKER CERTIFIED SOLUTION

sunezapa

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial