[Emu]

so, I have these layered DIVs and I want to make it so that they're sort of linked together somehow....what I mean is, for one of them I set the overflow property to 'auto' so that it has scrollbars, but when I scroll, the layers on top of it just kind of "float," they're not connected in any way to the layer with the scrollbars. I want to make it so that they are connected, meaning the scroll bars scroll *all* these layers and not just the one. anyone know what I'm talking about, or have any ideas?

[Gobbler]

anyone know what I'm talking about...

Uhh... no, I think... might just be my grasp of English that failed me there, though. Are those other layers supposed to be encapsulated within the overflow-div?

[Emu]

Uhh... no, I think... might just be my grasp of English that failed me there, though. Are those other layers supposed to be encapsulated within the overflow-div?

(it also might be my grasp of coherency (rather, lack thereof) that failed you there...) I thought the other layers would be encapsulated within the one for which I made the scrolling overflow property, but apparently they are not. the structure's something like this:

CODE

<div id="canvas">
   <img id="im">
   <img id="fg">
   <div id="bg">
   </div>
</div>

and the canvas is the one whose overflow property is being set to auto (scrollbars). the im is contained within the scrollbars as it should be, but the fg and bg "float" - they stay in place on the screen while the im is scrolling.

This post has been edited by Emu: 09 June 2006 - 03:32 PM

[Gobbler]

Strange. I suspect that there are some interferring CSS attributes. Mind giving a short overview of the styles which you've used for the mentioned elements?

[Emu]

there is no style defined for canvas, the style for im is display:none; the style for fg is position:absolute;visibility:hidden;top:0;left:0; (and onload if certain conditions are true it changes visibility to visible) and bg has no style defined.

[Gobbler]

position:absolute needs a parent-element to function properly. A simple div-element won't do, it has to be positioned using either absolute, fixed or relative. Internet Explorer doesn't support fixed, if I'm informed correctly.

CODE

<style type="text/css">
#canvas { position:absolute;top:0px;left:0px;width:100px;height:100px;overflow:auto; }
#fg { position:absolute;top:0px;left:0px;visibility:visible; }
</style>

<div id="canvas">
   <img id="im">
   <img id="fg">
   <div id="bg">
   </div>
</div>

This version worked for me, so far. Don't know about the div-element yet, though, but most of the time it's the position-attribute's fault, so you may find a solution if you experiment with that one.

[Emu]

so, apparently the problem was a higher-up div which I hadn't noticed....problem fixed, thanks for your help!

[Gobbler]

If I really was any help to you: My pleasure, come back any time.
If not: Imagine I was.

[Emu]

yes - your mention of a parent-element needed made me look for higher-up divs.

next question: say you have a div whose overflow=auto. how can you give it coordinates to tell it where to scroll to? I know that for the window element you can use window.scrollTo(x,y) but it won't work for DIVs. is there any similar thing like this for divs?

[Gobbler]

Tricky... but not necessarily impossible...

Divs don't have .scrollTo, but something similiar, if I remember it right: .scrollTop
That would be a method of document, I guess. Try experimenting around with document.getElementById("IdOfYourDiv").scrollTop = someIntegerValueOfYourChoice; and see if it does something.

Sorry that this is so vague, but maybe it'll work.

Edit: Hmm... strange... I'm not so sure whether .scrollTop really is a method... but I think I remember it to be writeable, so it should work anyways. Oh, and that one's of course only responsible for y-coordinates. .scrollLeft should be the right method/attribute/whatever for x-coordinates.

This post has been edited by Gobbler: 14 June 2006 - 04:23 PM

[Emu]

oi, one more:

the page works in Firefox and IE, but not in Safari. the problem appears to be that Safari thinks that an im.width and im.height are 0, when firefox et.al. think that these are the original dimensions of the image in question (as they should be). it may be that the image isn't fully loaded when it's being asked its width and height? any other ways to get the original dimensions of a jpeg file?

[Gobbler]

I'm sorry but I'm completely lost there, could you rephrase that or post some code please? Sorrysorrysorry for being dumb.

[Emu]

sorry, my fault for not being so clear, I'll try again....so what's happening is this:

a random image is being loaded to a canvas, I'm not sure of the details of how this is done, I think it might involve a CGI file or somesuch. the 'img onload' is a function called setImageDimensions(), which scales the picture to fit nicely in whatever size the browser happens to be. setImageDimensions uses in its calculations im.width and im.height (im being the image in question) - these are the original dimensions of the image, which are usually (but not always) something like 1600x1200. Other browsers handle this correctly - im.width = 1600 as it should be. but safari does not - it thinks im.width is zero. this is baffling because the image should have already loaded - since 'onload' is what happens after the image has loaded - so it should know the proper dimensions by then.

if I hard-code im.width=1600 and im.height=1200 in setImageDimensions, then the image displays just fine, the problem is I can't legitimately use that method to fix the problem because not all of the images have those dimensions. the problem is that the progrm should be able to get the dimensions of the image by itself, and not think it's 0x0. this problem is only happening in safari. so I need some safari-compatible way of obtaining the original dimensions of the image.

[Gobbler]

Hmm... funny... Safari should support images.width since version 1.0... well, all I can think of now is the usual function I use to determine an image's width:

CODE

function getImageWidth(someImage) {
    var x, obj;
    if (document.layers) {
        var img = getImage(someImage);
        return img.width;
    } else {
        return getElementWidth(someImage);
    }
    return -1;
}

I guess it's already a little bit obsolete, what with the deprecated document.layers and all, but well, it's the best I can come up with for now, sorry.

[Emu]

got it to work!!! using something similarish. finally!

thanks!!!