By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,230 Members | 2,436 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,230 IT Pros & Developers. It's quick & easy.

image clipping problem

P: n/a
hello,

I'm writing a panoramic image viewer in html / javascript. The idea is I
have a div with two identical panoramic photographs embedded in it. The
clipping on the div is set to make it a viewport onto the images. Then I
use javascript to make the two images scroll through the viewport - the
second image is just there to fill the gaps when the first scrolls off the
screen. They are seamless 360 degree panoramas, so this gives the illusion
of a seamless scroll around the whole scene.

You can see a test version of the page at:
http://lofty.dyndns.info/pano/pano-test.html

The html code is like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Panorama-test</title>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript" src="js/pano.js"></script>
</head>
<body>
<h1 id="heading">Panorama Test
</h1>
<p id="message1">&nbsp;</p>
<p id="message2">&nbsp;</p>
<div style="position: relative; top: 0px; left: 0px;">
<div id="panoDiv"
style="position: absolute; top: 0px; left: 30px; width: 700px; height:
400px; clip: rect(0px, 700px, 400px, 0px);"><img
id="panoImage1"
style="position: absolute; width: auto; height: 400px; left: 0px;" alt=""
src="pano2.jpg"><img id="panoImage2" style="position: absolute; width:
auto; height: 400px; left: 0px;" alt="" src="pano2.jpg"></div>
</div>
<p>&nbsp;</p>
</body>
</html>

This is mostly working - the only problem I'm having is that the browser's
(Mozilla firefox) is setting the page width to be the width of the clipped
images, not the width of the div viewport. I.e. the horizontal
scrollbar appears even though the viewport is entirely within the
browser window. This is likely to cause me problems later on when I want
to embed the image viewer inside other page elements, so I'm trying to get
it fixed now.

does anyone have any idea how to fix this using html/css? (I'm already
clipping the images inside the javascript code, using img.style.clip="rect(....)")

--
http://www.niftybits.ukfsn.org/

remove 'n-u-l-l' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.

May 26 '06 #1
Share this Question
Share on Google+
9 Replies


P: n/a
Andy Baxter <ne***@earthsong.null.free-online.co.uk> wrote:
http://lofty.dyndns.info/pano/pano-test.html


Your concept is fatally flawed:

Size of main page:
1046 bytes
Number of inline elements:
1 ( 1)
Size of inline elements:
972103 bytes

Waaayyyy to much. Browsers also do a poor job at resizing images.

--
Spartanicus
May 26 '06 #2

P: n/a
Spartanicus said:
Andy Baxter <ne***@earthsong.null.free-online.co.uk> wrote:
http://lofty.dyndns.info/pano/pano-test.html
Your concept is fatally flawed:


How come it works fine on my system (mozilla firefox on linux)? (Apart
from the bug I've mentioned).
Size of main page:
1046 bytes
Number of inline elements:
1 ( 1)
Size of inline elements:
972103 bytes

Waaayyyy to much. Browsers also do a poor job at resizing images.


I'm going to build in an option to choose what resolution you want to view
the panorama at:

400 pixels high / 200 pixels high / 100 pixels high. This should take care
of any bandwidth issues (e.g. for modem users).

--
http://www.niftybits.ukfsn.org/

remove 'n-u-l-l' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.

May 26 '06 #3

P: n/a
Andy Baxter <ne***@earthsong.null.free-online.co.uk> wrote:
Size of main page:
1046 bytes
Number of inline elements:
1 ( 1)
Size of inline elements:
972103 bytes

Waaayyyy to much. Browsers also do a poor job at resizing images.


I'm going to build in an option to choose what resolution you want to view
the panorama at:

400 pixels high / 200 pixels high / 100 pixels high. This should take care
of any bandwidth issues (e.g. for modem users).


I doubt it, but feel free to try, come back when you've done that. Also
note that this belongs in c.i.w.a.stylesheets

--
Spartanicus
May 26 '06 #4

P: n/a
Spartanicus said:
Andy Baxter <ne***@earthsong.null.free-online.co.uk> wrote:
Size of main page:
1046 bytes
Number of inline elements:
1 ( 1)
Size of inline elements:
972103 bytes

Waaayyyy to much. Browsers also do a poor job at resizing images.


I'm going to build in an option to choose what resolution you want to view
the panorama at:

400 pixels high / 200 pixels high / 100 pixels high. This should take care
of any bandwidth issues (e.g. for modem users).


I doubt it, but feel free to try, come back when you've done that. Also
note that this belongs in c.i.w.a.stylesheets


How is doing that going to solve the image clipping problem I'm looking
for help on???

I'm planning to do it, but later once I've got the basic thing working.

--
http://www.niftybits.ukfsn.org/

remove 'n-u-l-l' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.

May 26 '06 #5

P: n/a
Andy Baxter <ne***@earthsong.null.free-online.co.uk> wrote:
I doubt it, but feel free to try, come back when you've done that. Also
note that this belongs in c.i.w.a.stylesheets


How is doing that going to solve the image clipping problem I'm looking
for help on???


This isn't a help desk. I for one am not willing to spend time on what
looks like a fatally flawed concept.

--
Spartanicus
May 26 '06 #6

P: n/a
Spartanicus said:
Andy Baxter <ne***@earthsong.null.free-online.co.uk> wrote:
I doubt it, but feel free to try, come back when you've done that. Also
note that this belongs in c.i.w.a.stylesheets


How is doing that going to solve the image clipping problem I'm looking
for help on???


This isn't a help desk. I for one am not willing to spend time on what
looks like a fatally flawed concept.


I still don't get why this concept is 'fatally flawed'. The only reason I
can see why images this large are a problem is because of the download
time, but even for the extra-large version I'm working with at the moment,
the download takes about 20-30 secs on a broadband connection, which is
acceptable to me. I accept that on a modem, this image would be too slow,
but then for that, I'm planning to give people a choice of using lower
resolution images. E.g.

100 pixels high gives an 11K file, which would be fine on a 56K modem
(about 3-4 seconds download)

170 pixels high gives a 31K file, which would still be OK over a modem.

400 pixels high at 50% quality gives a 182K file, which would be fine over
broadband.

I still don't see why there's really a problem with this.

--
http://www.niftybits.ukfsn.org/

remove 'n-u-l-l' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.

May 27 '06 #7

P: n/a
Crossposted and follow up set to
comp.infosystems.www.authoring.stylesheets

Andy Baxter <ne***@earthsong.null.free-online.co.uk> wrote:
I still don't get why this concept is 'fatally flawed'. The only reason I
can see why images this large are a problem is because of the download
time, but even for the extra-large version I'm working with at the moment,
the download takes about 20-30 secs on a broadband connection, which is
acceptable to me. I accept that on a modem, this image would be too slow,
but then for that, I'm planning to give people a choice of using lower
resolution images. E.g.

100 pixels high gives an 11K file, which would be fine on a 56K modem
(about 3-4 seconds download)

170 pixels high gives a 31K file, which would still be OK over a modem.

400 pixels high at 50% quality gives a 182K file, which would be fine over
broadband.


I didn't think that the image size would come down enough, but having
tried it is indeed acceptable.

I don't have an understanding of the clip property, nor of javascript,
but afaics the issue you referred to doesn't relate to either.

Using a reduced test case, setting overflow to hidden seems to resolve
your problem: http://homepage.ntlworld.ie/spartanicus/panorama.htm
I had to use an extra div due to browser bugs, the above demo seems to
work in the big three (IE, Opera and Gecko based browsers).

--
Spartanicus
May 27 '06 #8

P: n/a
Andy Baxter <ne***@earthsong.null.free-online.co.uk> wrote:
I still don't get why this concept is 'fatally flawed'. The only reason I
can see why images this large are a problem is because of the download
time


Btw, something else you might want to consider. Your demo causes my
system to become very slow. Each image expands to 6.6Mb uncompressed,
two of them makes for 13.2Mb. Maybe it's due to the age of my system,
but it can't handle that properly.

--
Spartanicus
May 27 '06 #9

P: n/a
Spartanicus said:
Andy Baxter <ne***@earthsong.null.free-online.co.uk> wrote:
I still don't get why this concept is 'fatally flawed'. The only reason I
can see why images this large are a problem is because of the download
time


Btw, something else you might want to consider. Your demo causes my
system to become very slow. Each image expands to 6.6Mb uncompressed,
two of them makes for 13.2Mb. Maybe it's due to the age of my system,
but it can't handle that properly.


I've built the image resizing bit now - you can choose between various
sizes: 400, 250, 160 and 100 pixels high, which should be good enough for
most people.

Many thanks for your help.

andy

--
http://www.niftybits.ukfsn.org/

remove 'n-u-l-l' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.

May 27 '06 #10

This discussion thread is closed

Replies have been disabled for this discussion.