Welcome to SP!  -
Areas & RangesMountains & RocksRoutesImagesArticlesTrip ReportsGearOtherPeoplePlans & PartnersWhat's NewForum

Html Help with Making a Panorama 100% Size and Scrollable

Get HTML help, style input, and feedback on your pages from other SP members.
 

Html Help with Making a Panorama 100% Size and Scrollable

Postby Josh Lewis » Wed Oct 12, 2011 3:27 am

Ok so currently I got it pretty good as seen here:
http://www.summitpost.org/mount-shuksan ... ing/696383

Code: Select all
<div style="height:583px;width:540px;overflow:scroll;">
<img src="http://images.summitpost.org/original/696383.jpg" border="0" width="auto" height="550" /><br/></div>


But it does not seem to want to display in Internet Explorer. :( So I suppose auto is not supported at times. I've tried all sorts of tricks with html to make it 100% width and scrollable, but unfortunately it then makes the div container stretch to 100%.

For those who cannot see the image in the above example, I'm trying to figure out a html code that will allow me to have it so people can conveniently scroll through my panoramas from left to right using a scroll bar. I want the container it self to fill up most/much of the screen in width and be around 583 px in height which I already have set up. But the complicated part is displaying a picture inside the div container to be automatically resized to fit the height of the container.

Example:
Let's say The container is 500 px by 500 px. The picture is 2,000 px by 1,000 px. The container would display it as 1,000 px by 500 px because it is automatically resizing the picture to fit the proportions of the container. As I said, I already have it "working" in the code near the top but it does not work in ie8. If anyone has any hinters, this would be nice for my future panorama postings.
User Avatar
Josh Lewis

 
Posts: 2497
Joined: Thu Jan 06, 2011 11:12 pm
Location: Lynnwood, Washington, The Cloudiest Place on Earth, United States
Thanked: 543 times in 358 posts

Re: Html Help with Making a Panorama 100% Size and Scrollabl

Postby Gangolf Haub » Wed Oct 12, 2011 12:48 pm

I still use the code I published here but don't ask for explanations. It's been too long since I wrote the article and I'm not sure I ever understood everything completely.
User Avatar
Gangolf Haub
Forum Moderator
 
Posts: 8434
Joined: Wed Nov 12, 2003 4:28 pm
Location: Mainz, Germany
Thanked: 549 times in 307 posts

Re: Html Help with Making a Panorama 100% Size and Scrollabl

Postby rgg » Wed Oct 12, 2011 6:39 pm

Gangolf Haub wrote:I still use the code I published here but don't ask for explanations. It's been too long since I wrote the article and I'm not sure I ever understood everything completely.


Yep, I used that article when some time ago I started fiddling around with big pictures myself. I just had a look at one that I created, and it works in IE 9 and in Google Chrome. However, I wasn't trying to resize the picture, I simply used the original size and put scroll bars around it. Not only is that easier, it also avoids downloading way too much, because resizing an image using the img width or height tags happens client side, after downloading a few MB's - instead, I post the picture in the size that I want to use it afterwards. Anyway, apart from resizing the image, my code was similar to yours. I've done a bit more fiddling, and here's what might be the solution to your problem:

Code: Select all
<div style="height:583px;width:540px;overflow:auto;">
<img src="http://c0278592.cdn.cloudfiles.rackspacecloud.com/original/677547.JPG" border="0" height="550"><br></div>


This works in IE 9 and Google Chrome. Compared with the original code, there are just two relevant changes:

1) There is no width attribute in the img tag. My guess is that by giving a height tag I'm giving the browser enough information to scale the image and work out the width accordingly. Why IE screws things up when there is also a width tag while Chrome does just fine, I don't know.
2) The div tag uses overflow:auto instead of overflow:scroll. It's only a small difference, but by trial and error I learned that 'scroll' gives a vertical scrollbar, which isn't necessary since the image already fits, whereas 'auto' does not.

Good luck,
Rob
User Avatar
rgg

 
Posts: 477
Joined: Sat Oct 02, 2010 7:15 pm
Location: Amsterdam, Netherlands
Thanked: 105 times in 84 posts

The following user would like to thank rgg for this post
Josh Lewis

Re: Html Help with Making a Panorama 100% Size and Scrollabl

Postby Josh Lewis » Wed Oct 12, 2011 8:36 pm

Alright! It works! Thanks rgg! My problem was that I would be setting the width each time for the image, and ie does not support nothing nor auto, but when not even putting in the attribute it works! 8) :D :D :D :D

Here's the pano in action!:
http://www.summitpost.org/view_object.p ... #chapter_3

So Gangolf, I appreciate your effort into showing me your article (which I've read before) but there is a fundamental flaw in the code that makes it only work for smaller panorama's. Here's a sample of what I'm talking about:
http://www.summitpost.org/view_object.p ... #chapter_1 (and yes it links to yours because I didn't change the code that much) :wink: Notice how you have the annoying vertical scroll bar. And I've tried other tricks before as seen in this thread:
http://www.nwhikers.net/forums/viewtopic.php?t=7994702

My friend Gimpilator all these years has been resizing his pictures (which looses details as a result) because of this issue. And I'm sure he's not the only one. Now the mystery is solved! :)
User Avatar
Josh Lewis

 
Posts: 2497
Joined: Thu Jan 06, 2011 11:12 pm
Location: Lynnwood, Washington, The Cloudiest Place on Earth, United States
Thanked: 543 times in 358 posts

Re: Html Help with Making a Panorama 100% Size and Scrollabl

Postby phlipdascrip » Thu Oct 13, 2011 1:40 am

Josh Lewis wrote:My problem was that I would be setting the width each time for the image

If you set only the height, most (all?) browsers scale down an image evenly while maintaining aspect ratio.
overflow:auto shows scrollbars if an element has overflowing content, whereas overflow:scroll always shows scrollbars even if there is no overflowing content.
Just thought you may find this useful to know.

edit:
so in your first example, if you set the image height like
Code: Select all
<img src="http://images.summitpost.org/original/752942.jpg" style="height:575px;" />
you should have no vertical scroll bar.
User Avatar
phlipdascrip

 
Posts: 221
Joined: Tue May 05, 2009 5:13 pm
Location: Vancouver, BC, Canada
Thanked: 23 times in 16 posts

Re: Html Help with Making a Panorama 100% Size and Scrollabl

Postby Josh Lewis » Thu Oct 13, 2011 2:35 am

Yup, already did that before I read your message. :wink: But there is yet one more problem. This one has to do with summitpost itself not working properly with the code:

Code: Select all
<div style="height:100%;width:100%;overflow:auto;"><br/><img src="http://images.summitpost.org/original/752942.jpg" border="0"  height="550" /><br/></div>


This code works perfect when using a .html document on my desktop using firefox, but then on sp it does not work as seen here:
http://www.summitpost.org/experimental-test-page/753371

Ok so in the worst case scenario I could manually set the div size in px, but this is also a problem because I know some people have big screen resolutions (and big screens) which they are bound to use a higher pixel height than my monitor. So is there a way to have the div container now only stretch to 100% width of the screen rather than 100% width of the picture? All that needs to take place now is for the scroll bar to appear in the div and have it so that it does not make a scroll bar for the page itself.
User Avatar
Josh Lewis

 
Posts: 2497
Joined: Thu Jan 06, 2011 11:12 pm
Location: Lynnwood, Washington, The Cloudiest Place on Earth, United States
Thanked: 543 times in 358 posts


Return to Page Help

 


  • Related topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: No registered users and 0 guests

© 2006-2013 SummitPost.org. All Rights Reserved.