JavaScript: Keep div centered when browser scrolls

Ok, I have been looking for hours on how to do this, and I have found thigs that work in IE, but I really need something that works on both IE and NN 4 and up. I need to have a div that stays centered in the browser when the user scrolls. What I want to do is, when the user submits a form, have the div come visable (I have code for this), then tell the user that the page is submitting, please wait. The problem I have is centering the div if the page is really long and the user is scrolled way down in it.

You want to support NN4? Why?

All other browsers, it's easy. For every browser, there's a way to find out the current scroll position (though it's different for the various I think), so you can simply set the top style of the div to this value and then some via JavaScript.

Oh, and there's position: fixed, but that doesn't work in IE.

I guess I don't need NN4, I just figure if I go that low then I will have most covered. Do you have any code to cover at least the newer browsers? That has been my problem is finding the correct properties for all of them :) Why can't everyone just bow to MS, it would make my life so much easier :eek:

Because IE sucks, and because I feel a surge of anger rushing through me whenever someone suggests this (literally!).

You see, if everybody ABANDONED IE, it would be even easier:

Code:

---

<style type="text/css">
.noscroll {
  position: fixed;
}
#menu {
  left: 2%;
  top: 2%;
  width: 10%;
  bottom: 10%;
}
</style>
...
<div class="noscroll" id="menu">
COntent
</div>

---

Well, the JavaScript property for Mozilla is window.scrollX for horizontal and Y for vertical. I can't find anything at all for IE.

But IE accounts for like 90% of the browsers on the Insternet, so it is not going away. Therefore everyone should just use what everyone else is and make my life easier. I found code all over the place to do what I need in IE, but not in Mozzilla and NN

Agreed most ppl use IE but THEY are the ones who should convert. Mozilla Firebird is the epitome of a standard compliant browser.

That is what I am saying though....If everyone is using it then it is the standard. Forget this community standards thing, I go for what is in use. How can I go to a client and say, oh your 300 employees need to change to this browser because it is standards compliant and IE isn't. They are gonna tell me where to stick it. Non tech people like what they know, and what they know is MS products. They don't have to be the best to be the right thing for the job.

But the IE standard is not open or anything, all we know about IE is what people have found out through trying. The W3C standards on the other hand are openly accessible to all. Everyone can simply read those standards and write a browser that adhers to it, and all conforming web pages will work! If everyone goes for IE, what do we end up with?
1) A browser with many security flaws, bugs keep appearing. And only recently have the default settings been changed so that they don't allow easy access to dangerous things.
2) A browser that in the future will not be available as a standalone application. MS has said that updates to IE (7?) will only be available through OS service packs.
3) A browser that only exists on Windows. IE has never bothered to port the browser to any OS except Mac, and they've stopped this project now, too. Besides, MacIE behaves quite differently from WinIE.
4) No proper other browsers. Since any change in the behaviour of IE has to be found out by trying (as MS won't release any specs) other browsers will have a very hard time emulating IE behaviour. The other browsers won't show the pages the same as IE and thus get a bad reputation for being incompatible.

It is highly injust and dangerous. I for one don't want to be at the mercy of MS for anything.


There are a few sites which basically give you this message:
You can use whatever browser you like. If it is a text-only browser you'll be able to see the page. If it's a aural browser you'll be able to hear the page.
If it's NS4 you'll see the page in a similar way to text browsers.
If it's IE you'll see the page just fine.
If it's a standards-compliant browser you get some cool extras.

Quote:

---

If everyone is using it then it is the standard.

---

A standard in technical terms is not what everyone uses, it's what an authorized or acknowledged institution has set. MS is a member of W3C, for heaven's sake!

Quote:

---

Forget this community standards thing, I go for what is in use.

---

Yeah, and you spent hours looking for a way to do something in IE, provided that JavaScript isn't disabled. I've spent a minute writing something that works in standards-compliant browsers whether scripts are enabled or not.

Quote:

---

How can I go to a client and say, oh your 300 employees need to change to this browser because it is standards compliant and IE isn't.

---

You can't, of course. You could, however, hint to the client that if his employees all used a freely available, secure and standards-compliant web browser with a very similar interface to IE (my mom didn't need any help when I replaced IE with Mozilla for her) he wouldn't have to pay as much because you'd be done with your job more quickly and more thoroughly.

Quote:

---

Non tech people like what they know, and what they know is MS products.

---

Then show them alternatives! I've yet to hear of anyone who tried Mozilla or Opera but went back to IE because they liked it better. Non-tech people don't like what they know, they like what they know how to use, and they'll stick to what they have because they don't want to or can't put in effort to replace it. But that's what a company has tech personel for. Skin Mozilla that it looks like IE, replace the browser everywhere overnight and quite a few wouldn't even notice.

Quote:

---

They don't have to be the best to be the right thing for the job.

---

IE is neither the best nor the right thing. It's only the available thing, the preinstalled thing.

I totally agree. BTW, cornedbee, do you know where I can get a JS validator?

No.

Did a google search. Found two enquiries about this. One wasn't answered, the other misunderstood as a request for a debugger.

All other results are about JS-based form validators.

Maybe someone ought to write one, though...

bl: Have you looked at DynamicDrive? they's got a bunch of the type of stuff you are looking for, and modt of it is cross browser (when possible)....

TG

You could of course install an onscroll handler and let the hidden div scroll along with the content.

Wow CB give us some passion. I still dissagree with you. There are a lot of OS's that are better than Windows but everyone keeps going to Windows. I have tried both Opera and Mozilla and went back to IE. I have to because that is what most people use and if I am building something, I am going to make it work first with IE, then with other browsers. Also, most of what I build is for companies on thier intranet (and some via internet from a remote location). They are not going to change browsers for that. IE is not going anywhere anytime soon, so until it does it is what is in use in MOST situations and that is my standard. I do however try hard to make things work on all browsers which is why I possed this question in the first place.

Thanks Techgnome, I'll give it a look.

You went back to IE, even for normal browsing?
I still have IE installed (obviously), but I only use it for testing stuff that needs to work in it.

thats excactly how I do it too. Mozilla is way better for browsing. If a page doesn't work with it, I either just go to the next page or if I'm really interested bring up IE. But I still use IE to test my scripts.

Just want to throw my voice in and agree with CB. IE makes it a pain-in-the-ass sometimes to code cross-complaint webpages.

Quote:

---

Originally posted by CornedBee
You went back to IE, even for normal browsing?
I still have IE installed (obviously), but I only use it for testing stuff that needs to work in it.

---

Yes, I use IE for every day normal browsing. I only use Mozilla to test, and I'll never install NN again no matter what version! I have NN4 on a test machine just to check how things look with it.

I'm not critisising (too much) just curious, why do you use IE for normal browsing when you know about Mozilla and Opera?

Because IE works, IE is what my clients use, IE is what I code for. I develop for windows platforms and windows users. 90%+ browsers on the net are IE. If a site is not optomized for it, I don't want to see it. If you aren't going to make something work for 90% of people, then why do it at all? I'm not all standards crazy like a lot of people. I never jumped on the open source Linux bandwagon, and MS has been good to me, and I have made a lot of money using and building software based on that. Why would I want to change now?

You're answering the wrong question. I know why you code for IE. I make sure my code works in IE too. But why browse in it? Most sites work in Mozilla too. it's faster, easier to use and easier to get extensions for.

In fact, I haven't seen one page that doesn't work in Mozilla yet. Sure they have errors, but they have errors in IE too (I mean the pages, not the browser).

I'm not trying to change your mind about which browser to use, I just can't see the point in using IE to browse with.

Hmm, wanted to post exactly the same as Acidic...

I don't know, I have been using IE since version 4. Have have all my settings the way I want them.and the big thing is that my own site doesn't work in Mozilla (1.4). I'm not doing anything crazy except using an Iframe.

my sites Iframes work better with Mozilla.

the reason you page doesn't work in Mozilla is coz you have:
<iframe name="middle" src="travel.php" width="98%" height="95%" frameborder="0">

when it should be:
<iframe id="middle" src="travel.php" width="98%" height="95%" frameborder="0">

name isn't a real attribute, only IE uses it. It should be id

I might be wrong, but I'm sure in ALL tags, percentages as values for width and height are illegal. Use CSS instead.

:eek:
can you please find out if that is so, I have to change things in that case.

Actually, I just tried to validate it and it said there is no width attribte for <div> in HTML 4.01 Trans.

You can validate your webpage here and see any errors.

And I guess percentages are valid (for tables and such). I tried HTML 4.01 and XHTML 1.0 and it validated. Could have sworn it was invalid, though.

Edit: Found this:

Quote:

---

This attribute specifies the desired width of the entire table and is intended for visual user agents. When the value is a percentage value, the value is relative to the user agent's available horizontal space. In the absence of any width specification, table width is determined by the user agent.

---

So I guess that finalizes that percentages are valid.

Forget I ever said anything. ;) :(

:thumb:
I knew about the validator, but it hardly does me any good, the damn adverts that freewebpage.org insert have about 70 errors in them.

The adverts themselves are bad, but worse are the anti-ad-killer techniques.

I don't know how they can kill my anti-add technique
I only use it on one page, and it doesn't work in IE but its still great
if you're interested go to my page, the updates bit uses that script.