Support Forum
Using the SP js function that launches a jquery dialog popup and am having trouble with positioning.
spjDialogHtml(e, content, title, width, height, position)
where position is 'center' works great for centering in the window from left to right. But if the sucky wp admin bar is used, the top part of the dialog (draggable part) can be buried under the wp admin bar. Is there some sort of offset from the top that can be specified to prevent this?
you can use the position for that...
Specifies where the dialog should be displayed. Possible values:
1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'.
2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100])
3) an array containing x,y position string values (e.g. ['right','top'] for top right corner).
or see what the z-index is of the admin bar... we could change the z-index of the dialog to be greater...
Visit Cruise Talk Central and Mr Papa's World
okay, cool. let us know how it goes.
Visit Cruise Talk Central and Mr Papa's World
Not much luck for me. I might not be getting the syntax correct when using "combo" positions as I can't seem to get anything exciting to happen.
spjDialogHtml(this, my_content, "My Dialog Title", 0, 0, \'center\');
does work to center from left to right in the screen. It's just snugged up to the top, and under the wp admin bar. Maybe you or Andy could give me a idea how to do the "combo" position setting? The above code has the single quotes canceled as I'm using single while echoing. I was attempting ['center', 100] and variations but not sure mixing is allowed, or if I couldn't get the syntax correct because of the single quotes. I was hoping center (left to right) and 100 pixels from the top.
As far as the wp admin bar z-index.... it's currently 99999. I can use Firebug to raise the dialog above that, and it will work. But might look a little hacky?
I didn't bother to attempt to calculate the x and y values to position the dialog. I'm trying to avoid including any extra js. I was hoping to use what we already have.
z-index... higher means display above... so you want the dialog box to be larger than the wp admin bar...
combo? do you mean 1, 2 or 3? I do not believe you can mix...
1 is fixed location... 'left', 'center', 'righ't, 'top', 'bottom'...
2 is fixed location, but more granular, ['right', 'top'] for upper right corner... etc...
3 is offset from upper left corner...
its a js array, so need the left and right brackets... strings, get quotes, numbers do not...
I havent actually played with the positioning but should work in theory...
If you put in a 0 for position,it should calculate it for you...
Visit Cruise Talk Central and Mr Papa's World
1) z-index higher- Yep, can get the dialog above. Looks odd to me, but usable.
2) Yes I meant mixing 1, 2, or 3. I believe you're right about not allowed to mix. At least I can't hit the combo.
About using 0. Doesn't work well in this case. Since the line is launched from WP's sidebar widget, I think the calculations are based off of that container rather then the whole screen, as dialog is slammed tight to the right (right sidebar) and snugged to top.
I'm not going to lose sleep with the positioning. Not sure how to make it one size fits all. The dialog is usable, and the top behavior is consistent to what the rest of SP's dialogs look like anyway. It's unlikely that everyone will be able to get away without some sort of custom styling with SP's plugins or themes since WP themes are not created equal.
But... I am thankful you took the time to clear some stuff up 🙂
np. glad to help! you help us too!
Visit Cruise Talk Central and Mr Papa's World
I just couldn't let this go LOL
You can mix strings and pixel offsets after all. But I didn't discover this until I found out what was going on. The height can't be set 0 for auto. It must have a value, if it does, then you can position pretty much anywhere. If course now that I figured it out, it makes sense.
spjDialogHtml(this, some_content, "My Title", 600, 400, [\'center\',\'center\']);
will place it centered left to right and up and down.
spjDialogHtml(this, some_content, "My Title", 600, 400, [\'center\',40]);
will center it left to right and 40 pixels from the top. Which is just enough to clear the wp admin bar with a bit of a margin. Looks sharp 🙂
Also the \ might not be needed, I needed it since my echo string is wrapped in single quotes.
Hopefully this is helpful to others.
good work... didnt think you could mix them either... and yes, the \ depend on how and where you call it...
Visit Cruise Talk Central and Mr Papa's World