Solved

Resizing the window for a scrolling image

Posted on 2011-02-20
6
194 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ASP.net Markup for Sub Menu 2 46
Add a little space on either side of a table. 12 25
Session on Html 8 42
isNaN issue on the Table input text 2 11
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

730 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