Support Forum

Advanced Search
Forum Scope


Match



Forum Options



Minimum search word length is 3 characters - maximum search word length is 84 characters
themes-topic
Javascript spjDialogHtml advice?
Avatar
Lee H
Coastal New England (USA)
Member
Free Members
sp_UserOfflineSmall Offline
Sep 9, 2011 - 5:41 pm

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?

Avatar
Mr Papa
Simi Valley, CA
SP Master
Free Members
sp_UserOfflineSmall Offline
Sep 9, 2011 - 5:48 pm

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...

Avatar
Lee H
Coastal New England (USA)
Member
Free Members
sp_UserOfflineSmall Offline
Sep 9, 2011 - 6:34 pm

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

Avatar
Mr Papa
Simi Valley, CA
SP Master
Free Members
sp_UserOfflineSmall Offline
Sep 9, 2011 - 7:14 pm

okay, cool. let us know how it goes. 

Avatar
Lee H
Coastal New England (USA)
Member
Free Members
sp_UserOfflineSmall Offline
Sep 9, 2011 - 8:40 pm

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.

Avatar
Mr Papa
Simi Valley, CA
SP Master
Free Members
sp_UserOfflineSmall Offline
Sep 9, 2011 - 9:04 pm

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...

Avatar
Lee H
Coastal New England (USA)
Member
Free Members
sp_UserOfflineSmall Offline
Sep 9, 2011 - 9:38 pm

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 🙂

Avatar
Mr Papa
Simi Valley, CA
SP Master
Free Members
sp_UserOfflineSmall Offline
Sep 9, 2011 - 11:53 pm

np. glad to help!  you help us too! kiss

Avatar
Lee H
Coastal New England (USA)
Member
Free Members
sp_UserOfflineSmall Offline
Sep 10, 2011 - 8:45 pm

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.

Avatar
Mr Papa
Simi Valley, CA
SP Master
Free Members
sp_UserOfflineSmall Offline
Sep 10, 2011 - 10:52 pm

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

Forum Timezone: Europe/Stockholm
Most Users Ever Online: 1170
Currently Online:
Guest(s) 1
Currently Browsing this Page:
1 Guest(s)
Top Posters:
Mr Papa: 19448
Ike: 2086
Brandon: 864
kvr28: 804
jim: 650
FidoSysop: 577
Conrad_Farlow: 531
fiddlerman: 358
Stefano Prete: 325
Member Stats:
Guest Posters: 619
Members: 17364
Moderators: 0
Admins: 4
Forum Stats:
Groups: 7
Forums: 17
Topics: 10127
Posts: 79625