Support Forum

Javascript spjDialogHtml advice?

LH Lee H
Lee H
Member

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?

14 Answers

New Answer

MP Mr Papa
Mr Papa
Member

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…

LH Lee H
Lee H
Member

Thanks Steve, good stuff. I’ll play with it later and see what I come up with laugh

LH Lee H
Lee H
Member

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.

MP Mr Papa
Mr Papa
Member

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… wink

If you put in a 0 for position,it should calculate it for you…

LH Lee H
Lee H
Member

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 🙂

LH Lee H
Lee H
Member

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.

MP Mr Papa
Mr Papa
Member

good work… didnt think you could mix them either… and yes, the depend on how and where you call it…

LH Lee H
Lee H
Member

Another discovery.

Calling the function with height and width auto (0) and specific positioning does work:

spjDialogHtml(this, some_content, "My Title", 0, 0, ['center',40]);

IF your containers within are styled and have dimensions *headslap*

YS Yellow Swordfish
Yellow Swordfish
Member

So did I do all right on these functions or do you think we need to add anything else?

LH Lee H
Lee H
Member

You did great!

It’s just in this point in the game I had to play around with them to figure out how they work.

Things will be much simpler once we get the documentation going later 🙂 So far I am very impressed with the API you guys have come up with.

YS Yellow Swordfish
Yellow Swordfish
Member

Good to hear and thanks, You can probably never have too much api though…

MP Mr Papa
Mr Papa
Member

remember what you just said about documentation…  hope to start that up in the coming weeks and volunteers would be appreciated!