Partially fixed layer?

[jokull]

I have a layer on a page that I need to be fixed, BUT, only when the viewer has scrolled down to that part of the page. If I simply just make the layer "fixed" it will show, and interfere with the header. So, therefore, as I said, I need it to be fixed below a certain point of the page.

I hope I am making myself clear here? And perhaps this has to be done with some Javascripting - and therefore I am possibly in the wrong forum...

The actual layout is not a problem for viewers with a screen resolution of 1200*1024 but with 1024*768 the info layer (called "infocontainer" in the code) gets to far up, when at the bottom of the page.

Any ideas?

http://www.jockejohanna.se/musik.html

[twodayslate]

I am assuming you want this done
#infocontainer { position: fixed;
bottom: 10;
right: 0;
margin-top: 600px;
}
Try that. Let me know if it works. I am not 100% sure.

[Arbitrator]

I don’t see what you speak of. When the window gets small, I see scroll bars and no change in layout aside from centering.

I do see some other issues though, such as text escaping the boxes in Firefox and Internet Explorer 7. The middle box overlaps the Windows Media Player 11 controls in Internet Explorer 6. The document also contains code errors (see Validome (http://www.validome.org/validate/?uri=http%3A%2F%2Fwww.jockejohanna.se%2Fmusik.html) and W3C (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.jockejohanna.se%2Fmusik.html)). And, as I usually see, you commented out your style sheet and script in an XHTML document; comments are taken literally in real XHTML.

[jokull]

Thanks for your quick reply!

I tried your suggestion "twodayslate" but it didnt work, because the layer is still fixed "all" the time. The problem is with the "fixed" way of doing it, the layer appears to far up on the page.

I only want the layer/box to show on the right side of all the music-icons and never above them. So what I am trying to do is to have the layer excactly where it is - untill the viewer scrolls down to about 1150 pixels, and after that point the layer becomes fixed/ follows along down the rest of the page.

I know it can be done, because I remember coming across such pages before - but now of course I have forgotten where to find them... ;-) I have one similar page though, that you might want to check out - just to understand what I mean. On the following page there are two small layers almost at the top of the page: "show site navigation" and "show site content". These layers are not fixed from the very beginning, but when you scroll a bit further down the layers become fixed. http://www.quirksmode.org/js/layerscroll.html

This way of doing this is done with some javascript which I am having trouble understanding, and also this doesnt seem to work on Internet Explorer 6.0 (at least not in my computer...)
____________

I am a bit puzzled of your response Arbitrator as you seem to be getting alot of errors on the page. I have tested the pages on mozilla 1.5/2.0 and Internet explorer 6.0 on numerous computers and I have never gotten the errors you mention. I have however not tested it on IE 7.

I know that there are some code errors concerning the wmp setup - dreamweaver gives me a warning everytime I open the document ;-) .But so far this is the only way I have yet discovered on how to make the embedded wmp work on both IE and Mozilla (and it took me a long time to find it...).

About: "And, as I usually see, you commented out your style sheet and script in an XHTML document; comments are taken literally in real XHTML." I do not understand what I have done wrong - suggestions on how to "fix" these things are appreciated.

_________________

Anyone else getting the same viewing errors as "Arbitrator"? Please let me know.

[twodayslate]

So the margin-top did not work?

[Arbitrator]

I am a bit puzzled of your response Arbitrator as you seem to be getting alot of errors on the page. I have tested the pages on mozilla 1.5/2.0 and Internet explorer 6.0 on numerous computers and I have never gotten the errors you mention. I have however not tested it on IE 7.I the overflow errors for the box above the media player controls as well as for the text invoked by hovering the entries “Ångest”, “Jag undrar”, and the last three of “Klassisk”. This occurs in Firefox 2 and Internet Explorer 7.

http://i10.photobucket.com/albums/a117/PLGaries/CF110138.png

This seems to be related to the default fonts; mine are specified as size 16 Lucida Sans (size is only specified in Firefox). It looks like you’ve specified everything about the fonts and I know that I have Arial, so I’m not sure why my fonts would take effect at all. Could be a browser bug (in two browsers?).

In any case, you’ll need to make sure that your text does not overflow since you’ve constrained both the horizontal and vertical dimensions of the boxes. overflow: auto may be a solution.

I know that there are some code errors concerning the wmp setup - dreamweaver gives me a warning everytime I open the document ;-) .But so far this is the only way I have yet discovered on how to make the embedded wmp work on both IE and Mozilla (and it took me a long time to find it...).That’s the so-called “twice cooked” method. Another is noted in the A List Apart article Bye Bye Embed (http://alistapart.com/articles/byebyeembed). I think that it has to do with the way you’ve positioned things rather than your implementation although your implementation is the source of several errors. With regard to the problematic implementation, it seems that you’ve fixed the position of both the box above the media player and the media player itself without accounting for possible overflow from the (fixed-height) box above.

About: "And, as I usually see, you commented out your style sheet and script in an XHTML document; comments are taken literally in real XHTML." I do not understand what I have done wrong - suggestions on how to "fix" these things are appreciated.You won’t see this error cause problems since you’re using a sort of fake XHTML to accommodate Internet Explorer (which does not support XHTML); instead your document is served and parsed as HTML. Try changing the file extension to *.xhtml to see what your page looks like as real XHTML. Despite this, it should still be fixed since XHTML documents are supposed to be correct foremost as real XHTML, with HTML display as a secondary concern. Plus, it’ll make it easier to transition if IE ever supports the real thing.

If it’s too much trouble though, I would just switch to HTML since it doesn’t have all these fancy requirements; it’s doubtful that you’re deriving any advantage from using it anyway since all of its features are disabled when parsed as HTML.

[jokull]

Thank you for your effort Arbitrator!

And you are right I had overlooked the possibility of the text overflowing.I thought that If I´d specify the font and size it could not overflow. I must look into this matter when I get home.

Perhaps I just have to make the "boxes" bigger to avoid the text overflowing, as I do not want the boxes to get scrollbars...which might happen If I use overflow:auto. I noticed also that if I change the textsize within mozilla, the text goes way out of bounds.

Maybe I can leave out the height parameter and only set the margin parameters (so that the layers wont overlap)? I am used to just working with divs/layers and giving them absolute positions within a div-container. But perhaps that is not the best way to do it - concerning the overflow possibility...

About the xhtml issue, I thought that the page was actually parsed as xhtml as it is mentioned in the "doctype" description. It just shows how little I know ;-) I am working with dreamweaver and my "pages", along with theire faults are a result of using Drewmweavers way of handling things (along with my lack of knowledge...). I will look more into this matter.

I feel a bit reluctant to change the setup of the embedded media player, as it took me such a long while to figure out how to do it ;-) At least it is working properly? But I think the matter is worth consideration, I do want to learn how to do things the "right" way.

______________________

"Twodayslate" : No I am afraid the top-margin didnt seem to work. It only fixed the layer to a specific position on the page - regardsless of if you were at the top, or at the bottom of the page. But thanks for your suggestion!

[jokull]

Although this post has been sidetracked a bit... my initial and main question still remains!

Any help or ideas are greatly appreciated!