Solved

Resizing the window for a scrolling image

Posted on 2011-02-20
6
193 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 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