?
Solved

Resizing the window for a scrolling image

Posted on 2011-02-20
6
Medium Priority
?
207 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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 

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 500 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

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

600 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