Solved

Resizing the window for a scrolling image

Posted on 2011-02-20
6
195 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

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

Independent Software Vendors: 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!

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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 …

724 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