I have a modal popup that initially shows some content but expands a div if a checkbox is selected. The modal expands correctly but doesn't recenter unless you scroll up or down. Is there a javascript event I can tack on to my javascript function to recenter the entire modal?
Here is what it is:
$find('ModalPopupExtenderClientID')._layout();
For example:
$find('detailsPopUpExtenderId')._layout();
and in aspx:
<ccl:ModalPopupExtender runat="server" ID="MyPopUpExtender" TargetControlID="pop" PopupControlID="PopUp" BehaviorID="detailsPopUpExtenderId" BackgroundCssClass="ModalBackground" />
BehaviorID being the property where to set the clientside id.
Be careful that this isn't tied to the resize event of the window. If it is, your recentering could trigger a resize event in IE, which would cause an infinte loop.
If it is tied to the resize event, allow 1 or 2 resize events to occur, but then ignore the rest. (I say 2, because in IE, a "restore" event on the window will trigger at least 2 resize events (3 in IE6).
Whatever event you have bound to the scrolling to get it to re-center, bind that event to the checkbox/div expanding event as well (or call it from within the other event). Hard to say more without seeing some code.
Related
Desired behavior:
popup1 is 100x100
popup2 is 50x50
neither popup can be modal for my purposes.
When popup1 is shown popup2 should also be shown in front of it. I want popup2 to always be in front of popup1 but when I click on popup1 then popup2 is always moved behind popup1. When I say "in front" I mean that I want popup2 to always have a higher z-index (foremost) even when popup1 is the active popup.
Attempts and info:
I can see in the page markup that a single popup gets a z-index of 12000 by default.
I have tried using css to give each popup different z-index values like so:
.popup1{z-index:20000!important;}
.popup2{z-index:21000!important;}
I also tried it like this:
.popup1{z-index:11000!important;}
.popup2{z-index:12001!important;}
I also tried wrapping each popup in a div tag with similar css.
Each popups z-index is updated to 12002 depending on whether or not it is active or not and this is regardless of what I set it to.
I also tried wrapping the larger popup in a div tag and handling the onclick event to set the z-index of the smaller popup.
Thanks in advance!
Some semi-related links:
http://www.devexpress.com/Support/Center/p/Q346044.aspx
http://www.devexpress.com/Support/Center/p/Q382392.aspx
http://www.devexpress.com/Support/Center/p/Q36091.aspx
You can invoke popup2 BringToFront method in popup1 Shown event.
<dxpc:ASPxPopupControl ClientInstanceName="popup1"...>
<ClientSideEvents Shown="
function(s, e) {
if(e.window.index == 0) popup1.BringWindowToFront(popup1.GetWindow(1))
}"/>
</dxpc:ASPxPopupControl>
This sample works with one popup control containing two windows. If that isn't your case (maybe you have two popup controls with one window) just adapt sample to your needs.
Previously I tried wrapping popup1 (rear) in a div that handled the onclick event to bring popup2 (front) to the front but that did not work.
What did work was to handle the onmousedown event of the div wrapper instead.
I have a ReorderList on my page and it works just great, but...
Now, I have almost 100 items that I'd like to be able to reorder and they flow off the page, even at 8pt. When dragging, the page does not scroll as I approach the bottom (or the top) so I have to drop my item, scroll down, then drag some more. When I drag and drop in Word, as I approach the bottom of the window, the window scrolls so I can move to where I want to drop.
Alternately, it would be fine with me to have the items show up in multiple columns - their width would allow at least 3 columns. But none of the CSS solutions I have found which allow a <ul> to have multiple columns seem to work as they require multiple <ul>s which I don't think I can do with the ReorderList control.
Any ideas?
Here is an idea: Check if the left mouse button is being hold down, and also check for the position of the pointer on the page. If the coordinates are down at the bottom of the page at a position that you think is down enough for the page to be scrolled, then you could use the window.scrollBy() Method, and stop it when the Mouse button is released. You could also set a bool value when a Reorder item is clicked and while the button is down, and set it to false when it is released, and again the same idea, check for the position of the pointer.
Sample window.scrollBy()
Good luck!
I have a component called X. I'm trying to make a menu come down from it when I put my mouse over it.
I have a mouseOver handler which changes the component's state to another state which shows an extra child component (the menu) on the lower part. This of course makes the X component grow.
I also have mouseOut event handler which makes the menu disappear by returning component X to its original state.
When I move the mouse over the component the menu appears as expected. But when I move the mouse down to the menu that is now visible, as soon as I touch it, it disappears. This way it's impossible to reach the menu.
I guess the mouseOut event is triggered as soon as I move out of the old boundaries. Is this so? And how can I avoid it? The new boundaries should now consider the extra child with the menu.
Thanks in advance,
Nuno
When you move over the child element you are mousing out of compo0nent "X".
Without seeing code I can't really help you. However you might want to try a few things.
Make a function that tests hit area
of the mouse and component and only
dispatch the event if it passes a
mouse out only if it isn't over your
component. Your component shouldn't dispatch a mouse out event just because the mouse moved out of the component
Change your listeners as needed
Event propagation
But really there is no way I can help more without code.
How can I accomplish the following using jQuery: Open a popup window that returns a value to the parent window when a link in the child window is clicked, close the child window, and then have the parent automatically submit a form based on the value returned?
I realize that the jQuery Dialog is a popular solution, but I require a popup window because the window's contents need to be navigable, and I want to avoid using an iframe in the jQuery Dialog.
The popup window is going to be used to collect more than one value, ultimately to be returned as a delimited string to the parent, but this data collection needs to occur prior to the submission of the parent window's form. If there were a standard design pattern for an "Entity Picker", this would be it.
This needs to work in IE8, FF3.6, Safari 4, and Chrome 5.
Thanks,
Mark
Here is my solution:
var parent = $(parent.document.body);
$(parent).find('input#valStore').val(theVal);
$(parent).find('form#myForm').submit();
window.close();
In your newly opened browser window you could try something like
$("#mylink").click(function(){
value = /* get some value */
window.opener.$("#myform .somehiddenfield").val(value);
window.opener.$("#myform").submit();
window.close();
});
DISCLAIMER: I haven't tested this in any browser.
I have one third party Popup to display message. It has two properties OffsetX and OffsetY. To set its position in browser.
Now i am invoking this Popup on Button Click event. I need this popup just next to my Button and for that i have to set above mentioned OffsetX and OffsetY properties of Popup.
I tried following code on Button's Click Event,
Popup.OffsetX = Button.Style.Item("Top")
Popup.OffsetY = Button.Style.Item("Left")
But values of Button.Style.Item("Top") and Button.Style.Item("Left") are always nothing and Popup always appear in Left Bottom corner due to value = nothing.
FYI, I did not set Top and Left from CSS. I just dragged the button from tool box.
The values of "Top" and "Left", unless explicitly defined in the CSS, won't be defined. Dragging controls onto the designer won't do that as the Top/Left positions can vary depending on the browser, the end users screen resolution (whether elements get re-positioned due to the width of the screen) and a number of other factors.
You'll probably need, from the sounds of it, to use a bit of client side javascript (if possible) to trigger the pop-up being shown and/or setting its Top and Left properties.