Need some help with CSS "position; fixed;" behavior

Need some help with CSS "position; fixed;" behavior

  
Hello all,
im experiencing some odd behavior with the "position: fixed" property.
Im generating some popup using some javascript but i cant seem to fix it to the window. The properties show up correctly but nothing seems to happen no matter what i change.

I attached a simple example.

Am i doing something wrong or is this some bug?


Thank you,
Rui Molefas
Hi Rui,

Well your example worked in my browser (firefox).
The popups stays centered on my screen depending on the window size.

By looking at the javascript I would say that it's probably either the document.documentElement.clientHeight or the $('.popupList').height() methods.
Are the top and left properties being set with the correct values? I had alot of bad experiences on all the height methods, even when using the jQuery wrappers.

Btw, not directly related, but I notice you still have the centerPopup being dumped in all the block iterations, instead of having it on the block javascript with the extra parameter like I sugested last time :)

Regards,
João Rosado

Edit: are you running on .net or java?


João Rosado wrote:
Hi Rui,

Well your example worked in my browser (firefox).
The popups stays centered on my screen depending on the window size.

By looking at the javascript I would say that it's probably either the document.documentElement.clientHeight or the $('.popupList').height() methods.
Are the top and left properties being set with the correct values? I had alot of bad experiences on all the height methods, even when using the jQuery wrappers.

Btw, not directly related, but I notice you still have the centerPopup being dumped in all the block iterations, instead of having it on the block javascript with the extra parameter like I sugested last time :)

Regards,
João Rosado

 
 
Hi João,
I know about the useless code, i just used the last test project to make this one, didnt pay much attention to it. I asure you the real application's code is all nice and clean ;)

About the behavior, im not trying to center the popup, that works fine, im trying to keep both the popup and the greyed out background fixed to the browser window, meaning that any vertical scroll wouldnt "leave them behind". Is that how it is behaving on your end?

Thanks a lot!
Can anyone else test this, plz?

Thank you!
Hey Rui,

Yes, it is working for me.
The Background div fills all my screen and keeps up with the scrolling.
Only problem I can see is just your javascript not supporting window resizes.

Tested in Firefox(nightly), Chrome and IE.
Amazingly it even works on IE7 ...I really was not expecting the height() calculations to be working there.

Regards,
João Rosado
Thank you again João.

Thats realy not the behavior im getting, tested on all browsers, including Ubuntu and Windows OS.
I think your browser is performing a miracle :D

You didnt change anything on the file I uploaded right?

Thank you,
Rui Molefas

Hi Rui,

Didn't change anything from your file, just published it on my local server.
You can see a little video attached. I'm doing something wrong?

Note: my server is in 7.0, but there are no rendering differences between versions.


Regards,
João Rosado
Wow, thank you for taking the time to make a video.
Well thats realy not whay im experiencing, im not sure why...ill look into it, now i know it should work.

Anyway thank you a lot for the time and help.

Rui Molefas