Solved

Resizing the window for a scrolling image

Posted on 2011-02-20
6
192 Views
Last Modified: 2012-08-13
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!
0
Comment
Question by:ddantes
  • 3
  • 3
6 Comments
 
LVL 3

Expert Comment

by:sunezapa
ID: 34939989
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.

0
 

Author Comment

by:ddantes
ID: 34946146
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.
0
 
LVL 3

Expert Comment

by:sunezapa
ID: 34957716
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...
0
Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 

Author Comment

by:ddantes
ID: 34965661
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

0
 

Author Comment

by:ddantes
ID: 34965712
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.
0
 
LVL 3

Accepted Solution

by:
sunezapa earned 125 total points
ID: 34965801
the code I send is for Resizing the window, as you wrote, yes...
For the image resizing you may look in the source javascript for the scrolling, around scrollWidth? and play with that.
You have the idea of getting values for how big the available screen is from my example and can implement that, or just go for fixed size if you prefer.

but... if you have no experience with javascript, then either take your time to learn, or leave it until you have the time... :-)
0

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

777 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