I have this code here
http://forum.castoff.net/menu.php
And the msgbox comes up in the middle of the whole page... I need it to come up in the middle of the viewable area..
Could anyone help ??
I am sure its just a CSS issue
Thanks
Lee
3 Answers
All you have to do is on .msgbox, change position: absolute to position: fixed.
That's it.
Read this to understand the different position values:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
2 Comments
Lee
Perfect solution... Any clues why the dimming background and msgbox don't go over a youtube embedded video ?? i've added to the URL to show you
thirtydot
That's really a separate question, but it's been asked many times before, so: you basically need
wmode = transparent, twice: once like this: <param name="wmode" value="transparent"></param>, and once inside your embed tag: <embed .. wmode="transparent" ..></embed>.You're giving "dim" a top-position of 50%, so it will be at 50% of the page, not the viewable area.
Try centering it with this:
function centerMe(element) {
//pass element name to be centered on screen
var pWidth = $(window).width();
var pTop = $(window).scrollTop()
var eWidth = $(element).width()
var height = $(element).height()
$(element).css('top', pTop + 100+'px')
$(element).css('left', parseInt((pWidth / 2) - (eWidth / 2)) + 'px')
}
answered Mar 7, 2011 at 16:20
Diodeus - James MacFarlane
115k33 gold badges164 silver badges180 bronze badges
2 Comments
Lee
Hi Diodeus, I've put that code in and given it the element id but its still centering to the whole page not the viewable area :-(
Diodeus - James MacFarlane
Remove your top/left styling in CSS for msgbox. For the script to work, "msgbox" should not be a child of "dim". It should be a child of "body".
The table and the #dim have height 2000px and over, so giving top:50% for the popup put it in the middle of it's parent. Remove the height of the table and see if this do the job (probably will works, because the height of #dim is the height of the document.).
Another option is to add a fixed value for the distance from top for the .msgbox. For example in your css you can change the .msgbox {top:50%;} to .msgbox {top:200px;}
