943,191 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Dec 5th, 2006
0

Floating/scrolling image?

Expand Post »
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).
Reputation Points: 12
Solved Threads: 2
Junior Poster in Training
TheAlex is offline Offline
66 posts
since Feb 2005
Dec 5th, 2006
0

Re: Floating/scrolling image?

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):

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function center(object){
  2. object.style.top = (getVScroll() + (getHeight()/2))-(object.offsetHeight/2);
  3. }

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. window.onscroll = function(){center(myObject)};

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.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Dec 6th, 2006
0

Re: Floating/scrolling image?

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.
Reputation Points: 12
Solved Threads: 2
Junior Poster in Training
TheAlex is offline Offline
66 posts
since Feb 2005
Dec 7th, 2006
0

Re: Floating/scrolling image?

Click to Expand / Collapse  Quote originally posted by TheAlex ...
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.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Jan 4th, 2007
0

Re: Floating/scrolling image?

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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

If the w3 address is added, the floating layer doesn't work...
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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?
Reputation Points: 12
Solved Threads: 2
Junior Poster in Training
TheAlex is offline Offline
66 posts
since Feb 2005
Jan 4th, 2007
0

Re: Floating/scrolling image?

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?
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005
Jan 4th, 2007
0

Re: Floating/scrolling image?

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).
Reputation Points: 12
Solved Threads: 2
Junior Poster in Training
TheAlex is offline Offline
66 posts
since Feb 2005
Jan 4th, 2007
0

Re: Floating/scrolling image?

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.
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005
Jan 5th, 2007
0

Re: Floating/scrolling image?

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...
Reputation Points: 12
Solved Threads: 2
Junior Poster in Training
TheAlex is offline Offline
66 posts
since Feb 2005
Jan 5th, 2007
0

Re: Floating/scrolling image?

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?
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Urgently help needed regarding javascript
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: border-width Size?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC