Posted by lance.gliser on February 9, 2009 at 5:30pm
4 followers
Jump to:
| Project: | User Relationships |
| Version: | 6.x-1.0-beta9 |
| Component: | User interface |
| Category: | feature request |
| Priority: | normal |
| Assigned: | alex.k |
| Status: | closed (fixed) |
Issue Summary
Hello, and that's for the great work you've done on this so far.
I'm hoping that I missed where you already built these controls, but maybe it's not in yet.
I'm currently building a site that uses a "bottom bar" similar to Facebook. The relationship actions pop up from a mouse over div at the very bottom of the screen. My problem is that the elaboration's UI's javascript is adding inline styles to the pop up that place it at the bottom of the site, below the usable area. Since the styles are being done inline, I can't override through styles.
Is there a way to make the window open in a css fixed position in the center of the screen? If you need help writing the JS to do it, I'll work it out for you.
| Attachment | Size | Status | Test result | Operations |
|---|---|---|---|---|
| elaborations_request.jpg | 401.83 KB | Ignored: Check issue status. | None | None |
Comments
#1
I agree it's not a very elegant solution using inline styles. Could you look at a patch in #361376: css support for popup window and see if it works for you, or provide a fix of your own? I'd be ok with simply displaying the popup in the center of the screen, if that is easier. Thanks.
#2
I took a look at the patch, it's still setting it below the link. Which is great pretty impressive visually, if you're not using a side zone.
But, I think there will be more people like myself though that bury it to save screen space.
I'm not sure how to patch, I'm somewhat new here but I'll see what I can learn.
There's choice but to use inline css to get it to the center of someone's screen, we just need a settings option built in for: Below or Center.
Let me dig out the centering JS for this...
#3
user_relationships
- user_relationships_ui
- - user_relationships_ui.js
// Javascript for user_relationships_ui.module
// Creating our own namespace for the module
Drupal.user_relationships_ui = {};
if (Drupal.jsEnabled) {
$(document).ready(function() {
// Any links that we have created in the ui module are
// Given a click handler so you can display the popup correctly
$('a.user_relationships_popup_link').click(function(e) {
var buttoncode = e.which ? e.which : e.button; // msie specific checks does not support e.which
// If position is fixed, allow for %'s.
position = Drupal.settings.user_relationships_ui.position.position;
left = Drupal.settings.user_relationships_ui.position.left;
top = Drupal.settings.user_relationships_ui.position.top;
if(position == "fixed") {
// If left is defined in a % (.5) calculate left requirement
if(left <= 1) {
// Window width * desired - UI width
left = Math.round(($(window).width()*left) - ($("#user_relationships_popup_form").width()/2));
}
// If top is define in a % (.33) calculate top requirement
if(top <= 1) {
// Window height * desired - UI height (which is an unknown)
top = Math.round(($(window).height()*top) - ($("#user_relationships_popup_form").height()/2));
}
} else {
left = (e.pageX ? e.pageX : e.clientX) + Number(left); // msie specific checks does not support e.page
top = (e.pageY ? e.pageY : e.clientY) + Number(top); // msie specific checks does not support e.page
}
var href = $(this).attr('href'); // Where we send the ajax request.
Drupal.user_relationships_ui.showForm(href, position, left, top);
return false;
});
});
}
/**
* Function to display the pertinent form for the user
*
* @param href
* Ajax url where we will retrieve the form
* @param pageX
* Left value for the event
* @param pageY
* Top value for the event
*/
Drupal.user_relationships_ui.showForm = function(href, position, left, top) {
// Making sure that any currently open popups will be hidden.
Drupal.user_relationships_ui.hidePopup();
// Putting the animation into this
$('#user_relationships_popup_form')
.css({top: top + 'px', left: left + 'px', position: position})
.html(Drupal.user_relationships_ui.loadingAnimation())
.slideDown();
// Adding ajax to the href because we need to determine between ajax and regular
if (href.indexOf('?') == -1) {
href += '?';
};
href += '&ajax=1';
// Making the ajax request to the server to retrieve the form.
$.get(href, function(result) {
$('#user_relationships_popup_form').html(result).slideDown();
// Making sure the cancel link on each form in the popup closes the popup.
$('#user_relationships_popup_form a').click(function() {
Drupal.user_relationships_ui.hidePopup();
return false;
});
});
};
/**
* Function used to return the html that is used to build the.
* Loading animation when a form is requested by the user.
*/
Drupal.user_relationships_ui.loadingAnimation = function() {
var html = '<div>';
html += '<div style="text-align: center; font-weight: bold;">Form Loading</div>';
html += '<img src="' + Drupal.settings.user_relationships_ui['loadingimage'] + '" border="0" height="20" width="200" />';
html += '</div>';
return html;
}
/**
* Helper function to hide the popup form
*/
Drupal.user_relationships_ui.hidePopup = function() {
$('#user_relationships_popup_form').slideUp();
}
#4
user_relationships
- user_relationships_ui
- - user_relationships_ui.admin.inc
<?php+ Line 53+:
$form['general']['user_relationships_position'] = array(
'#type' => 'select',
'#title' => t('Elaboration form\'s css position'),
'#default_value' => variable_get('user_relationships_position', 'fixed'),
'#options' => array(
'static' => t('Static'),
'fixed' => t('Fixed'),
),
'#description' => t('Sets the css position property of the elaboration\'s UI.'),
);
$form['general']['user_relationships_left'] = array(
'#type' => 'textfield',
'#title' => t('Elaboration form\'s css left value'),
'#default_value' => variable_get('user_relationships_left', ''),
'#size' => 4,
'#description' => t('Sets the css left property of the elaboratin\'s UI. You may enter a distance in pixels, or as a % using a value 1 or less. Relative positioning requires a fixed position.'),
);
$form['general']['user_relationships_top'] = array(
'#type' => 'textfield',
'#title' => t('Elaboration form\'s css top value'),
'#default_value' => variable_get('user_relationships_top', ''),
'#size' => 4,
'#description' => t('Sets the css top property of the elaboratin\'s UI. You may enter a distance in pixels, or as a % using a value 1 or less. Relative positioning requires a fixed position.'),
);
?>
#5
user_relationships
- user_relationships_ui
- - user_relationships_ui.module
<?php+ Line 311: $settings['user_relationships_ui']['position'] = array('position' => variable_get('user_relationships_position', NULL), 'left' => variable_get('user_relationships_left', NULL), 'top' => variable_get('user_relationships_top', NULL));
?>
#6
Alright Alex. I've gotten a working version on my local computer, the code changes needed are listed for you.
Users can change between absolute layout, related to the mouse. Or the fixed layout. Both accept left and top parameters to move relative to the starting point.
I've had to just paste in an entire new JS page, lots of changes.
But, one thing does remain and it's a design choice how we handle it.
In trying to do a % height for the fixed version, the height of the window is an unknown variable at the time it's fired.
We could leave it, and let people adjust on their own (measure what they produce and set that as a negative amount in the admin position top).
If that's not alright, we'll have to find a way to pass a standard height.
Tell me what you want to do, and I'll see about learning how to hand you a patch of this.
#7
I've been assigned to other projects for a while now. The above code works, but I haven't had time to make a patch.
I'm handing it over to whoever wants to run with it.
#8
Fix committed with some tweaks. Thanks for contributing, and sorry about having sat on it.
Tested only in FF3, IE7, and Safari 4 beta. If anyone could try other browsers it'd be great.
#9
Alex, will test in IE6 tonight but the patch looks good IE6 will be the only place where we need to make absolutely sure.
#10
Automatically closed -- issue fixed for 2 weeks with no activity.