Forum Moderators: not2easy
First, the environment:
I have a page that presents a long list of entries. It usually requires vertical scrolling to get to some of them. Each entry has a "more info" link.
Clicking on that link calls an AJAX function that fetches the poop on the item in question. I want to display that item on a screen-centered <div> over the list. This is a fairly common technique, and I've seen a couple of good implementations. I like the ones that dim the whole window behind the info.
The main idea is to leave the list in its current position. I just want people to be able to see (and print) the detailed info. When they have a detail page up, I want printing to just print that <div>, and hide the list. No problem. I can do that easily.
Here's the kicker: It needs to work all the way down to IE 5/Win98. If possible, IE 5.0.1. I can probably talk them into letting 5.5/98 be the base. It doesn't have to be slick, just operational. I have an AJAX library that will easily handle these requirements.
What are people's suggestions?
The tricky part is the CSS.
I want a robust manner of displaying an overlaid "window" that is actually a <div>, and I wouldn't mind being able to implement some nice effects, as well, such as a gradual transparency, genie effect or darkening the underlying window. However, these can't cause issues with older browsers.
I have actually developed something that works all the way down to IE5.01/98 since posting this, but I hate what I had to do to make it work in IE 5 and 6. I have to use a popup window, as IE will not honor position:fixed.
Basically, this was the first time I have implemented this kind of thing, and I was looking to find out if there are any "best practices" to achieve this effect.
I can usually solve my own problems and develop my own approaches, but it is often best to learn from the experiences of others, rather than find out the hard way, myself.
Can you show a quick example of this?
<style>HTML, BODY { height: 100%; }
DIV.pagewrapper { width: 100%; height: 100% overflow: auto; }
DIV.overlay {
position: absolute; left: 100px; top: 100px;
background: lightblue;
}</style>
<body>
<div class='pagewrapper'>
Your content goes here, put enough in to make it scroll! Some of that Lorem Ipsum rubbish should do.
</div><div class='overlay'>This should stay where it is!</div>
</body>
You'll have to put it together properly but that should do it. Basically it's a full screen div that contains your page, then your overlay is always relative to BODY.
By the way, thanks for the snippet. I have something I can try it with.
You must be from Europe. The Germans aren't talking to us today.
You must be from the US, as you have no idea where Germany is. ;)
Or did you mean I must be in Europe as you also have a bank hol? I am indeed, UK.
Did you try that example?
Or did you mean I must be in Europe as you also have a bank hol? I am indeed, UK.
The term "Bank Holiday" pretty much gave you away.
We work with some Germans, so that's where it came from.
What's the occasion?
I gave the example a quick run, and it sort of worked. The problem is that an Absolute position scrolled with the page, so I don't think I did the overflow right.
In any case, I'll mess with it tonight, when I have more time. Lunch break's over.
Can't remember but I might have had my overlay before the page content. Shouldn't really matter but if you do it that way you'll have to use z-index to get the overlay back on top.
