Does anyone know how to create an image that scrolls with the page, much like this menu on the following link?

http://www.myvue.com/cinemas/index.a...5A6B5D4F&ci=52

It's easy enough to do one positioned from the left of the browser window, but the solution I need is where all the content is centered, as on the Vue website, so that the image stays with the left of the table rather than the left of the browser when the browser is resized or the website is viewed on different resolutions. I'm okay at HTML & CSS but my JavaScript is very limited.

That Vue example doesn't work in IE7, and browser compatibility is one of the problems I'm having (I did something using CSS that worked in IE6 but not Firefox/Netscape).

well. that's definately JavaScript; and the reason it doesn't work well in all browsers is because all browsers have a different idea of what the relationship between windows, frames and documents is. Often, it's just a case of a different object containing the information...

This is code that works for me, (well; I've never had a problem with it on any browser; that's not to say it's going to work on every browser):


Looking at it, I'm quite suprised it's never had a problem; but anyway: the way I use that code is to position an absolutely positioned object one time only... To make an object scroll as the scrollbar does, you could use some interpolator math based on the distance between the center of the scrolled window and the center of the object at any time (which is what they do on the vue site to make the bar "gracefully" slide up and down), or you could have the image "snap" into the center always (like this: http://www.siteexperts.com/tips/func...s08/page3.asp).

However, you need to make the thing move as the user moves. For that, you need either an event listener or an event invoker. An event listener is the nicest way; they are feedback interfaces that are activated as a response to user or system events, Event invokers are the opposite - at it's roughest, an event invoker just repeatadly sets values in an object (usually using a Timer) and lets the browser deal with re-rendering parts of the page over and over again. Still, you could make it intelligent, and only invoke a change in the graphical layout when a change occurs in the height or offset of the window.

There is an existing listener in some browsers, window.onscroll. if you were to write this in a javascript function:


it would center the object when the user makes a scroll movement. But, onscroll is apparently not supported on all browsers; so catching the "scroll" event across all browsers might be your biggest challenge. Perhaps you'll find the only way you can do it is using a timer :eek:

I'd prescribe some intensive testing of where the onscroll event works and where it doesn't, and where the document.offset property works and where it doesn't, and work with that.

Thanks for that.

We have found this:
http://dhtmlnirvana.com/oldalchemy/floatlayer.html
which seems to do the job fine - when we remove the W3 doctype code from the top of the document, which of course we need. It also seems to have a problem when include files are on the same page. A bit more tweaking to go then.

I dont know what you are referring to by thisn post BUT Never remove doctype from your document, its really important and worths.

The previous link I posted - http://dhtmlnirvana.com/oldalchemy/floatlayer.html (explained here: http://dhtmlnirvana.com/oldalchemy/floater.htm ) - and other floating layer examples (eg. http://www.yaldex.com/FSBackground/PersistentLayer.htm ) work fine until the web address for the DocType declaration is added.

For example, the floating layer works if the doctype is as follows:

If the w3 address is added, the floating layer doesn't work...

If you look at the HTML source on the above two examples, neither include the w3 address, which renders the declaration pointless? Is it just me, or is this a really strange thing to happen? :eek: Does anyone know if it's possible to have the floating layer AND keep the full doctype statement?

I have never come accross this... How did you actually notice that? Can this not be done with pure css using the fixed selector in the position property?

I noticed it by a lot of frustrating trial and error. :lol: The problem with the fixed property is it doesn't work in all browsers (I think it does if the layer is positioned from a browser border, but in this instance, it needs to be positioned from a table element).

Oh right, do you have the solution. Please post it when you find it. I have looked before for this effect and I never found a code to solve it. Let us know.

Well, the solutions in the links I provided in the previous post work, but not when the web address is added in the doctype statement. I can't see any way around this at all apart from excluding the doctype statement from the pages that need the floating layer, which isn't really a good idea...

I am sure there must be a way of doing this without excluding the doctype otherwise I doubt that a professional website like vue would do it. Anyone?