0

On my site, users can open a popup window (600 px wide, named IMOpen). On this popup window, I am trying to add a new feature that will appear in a table (id="Table1") onclick of a button. Table1 has the following CSS:

#Table1 {
position:absolute;
top:60px;
z-index:15000;
display:none;
background-color:#fff;
border-width:thin;
border-style:solid;
border-color:#000;
width:100px;
height:100px;
}

Normally, I would center a position:absolute/high z-index div or table (such as Table1) like so (using the width of Table1);

function ShowTable() {
    $("#Table1").fadeIn(500);
    $("#Table1").css({marginLeft: ((screen.availWidth - 100) / 2) + 'px'});
}

However, when I do this, Table1 appears on the popup window as if the availWidth is the width of my monitor's screen...no surprise. I know how to rectify this....simply use the width of IMOpen and rewrite the function as:

function ShowTable() {
    $("#Table1").fadeIn(500);
    $("#Table1").css({marginLeft: ((600 - 100) / 2) + 'px'});
}

which works exactly as intended. However, I would like to know how to do this more generally. When I tried the following code:

function ShowTable() {
    $("#Table1").fadeIn(500);
    $("#Table1").css({marginLeft: ((IMOpen.availWidth - 100) / 2) + 'px'});
}

The table floats left. When I try:

function ShowTable() {
    $("#Table1").fadeIn(500);
    $("#Table1").css({marginLeft: ((IMOpen.width - 100) / 2) + 'px'});
}

the table floats left again...assuming neither of these attempts were recognized as valid code. How would I correctly generalize the available width of the popup window into the .css jquery function? Using the popup name? availWidth? Other? Thanks for any help!

freginold
  • 3,946
  • 3
  • 13
  • 28
The One and Only ChemistryBlob
  • 7,864
  • 10
  • 36
  • 69
  • place your table in a div with [`position: relative;`](http://css-tricks.com/absolute-positioning-inside-relative-positioning/)? – SpYk3HH Feb 28 '14 at 18:59
  • [absolute-position-css](http://www.impressivewebs.com/absolute-position-css/) | [**advancedcss**](http://webdesign.about.com/od/advancedcss/a/aa061307.htm) | [css positioning](http://www.barelyfitz.com/screencast/html-training/css/positioning/) | [**position-relative-vs-position-absolute**](http://stackoverflow.com/questions/10426497/position-relative-vs-position-absolute) – SpYk3HH Feb 28 '14 at 19:01
  • Thanks for the answer...tried it with screen.availWidth and still floats to center of screen and ignores popup window dimensions. – The One and Only ChemistryBlob Feb 28 '14 at 19:07

0 Answers0