I have created a custom TitleWindow whcih i use as a popup. The contents of the popup are created dynamically depending on a selection a user makes from a datagrid.
My problem is, my datagrid is in another custom component whcih is toward the bottom of my page so when a user clicks one of the items the popup is displayed however with half of it out of sight at the bottom of the page.
Is there a way to position a popup so that it displays at the top of the page?
I know at least two things you can use to position a popup, though there might be more.
When you place a popup you can choose in which parent component to place the popup:
PopUpManager.createPopUp(this.parent, TitleWindowComponent);
In the component itself:
PopUpManager.centerPopUp(this);
I wanted a help tooltip type popup (with help text) to appear next to the icon that opened it. In the end I used move(x,y) to move the window where I wanted it. To get the coordinates to place it, use globalToLocal:
var globalX:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).x;
var globalY:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).y;
toolTip.move(globalX + myIcon.width, globalY);
That puts the window just to the right of the icon, myIcon.
Related
I Have made a form which contains only a tabbed Canvas with three tabs each tab has one data block, I Have also one button which is the Exit button that belongs to one tab (It's not optional from what I see, I have to make the button belongs to one of the three tabs or more specifically to one of the three data blocks).
My problem is that the button will not be displayed when I run the form Unless I Do something with the tab that it belongs to.
But I want it to be displayed unconditionally.
Is there any way to make the button belongs to the Empty Content Canvas
instead of the tab canvas??
I Figured it out, Indeed the button should belongs to a data block, so I made an empty new block inside the Content Canvas and made the button belongs to it.
I want to create transparent layer with url link when clicked anywhere on page must open the link in new window. and on single click the transparent layer must close and then come again after a time interval.and I want this to be done in my Blog.
use jQuery and try steps below:
on ready function of jquery, put the clicking overlay element (say its id: elementontop) over the entire page with a z-index higher,
grab click event of overlayed layer (i.e. #elementontop) and do following -
Hide overlaying element
Determine cursor coordinates
Get element on those coordinates
Trigger click on that element
to execute #2 you may get hint from following code -
$('#elementontop).click(function (e) {
$('#elementontop).hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
});
$('#popupDiv').popup("open");
This programmatically opens a JQueryMobile pop up, but I want to know if it is possible to change or set my popup's settings, such as data-position and data-transition along with my code above. Thanks.
You can do:
$('#popupDiv').popup("open", {positionTo: '#mydiv'});
'origin' is not working for me in version 1.2 though.
see: http://jquerymobile.com/demos/1.2.0/docs/pages/popup/methods.html
Straight from the jQuery Mobile Docs:
Positioning options By default, popups open centered vertically and
horizontally over the thing you clicked (the origin) which is good for
popups used as tooltips or menus. The framework also applies some
basic collision detection rules to ensure that the popup will appear
on-screen so the ultimate position may not always be centered over the
origin.
For situations like a dialog or lightbox where the popup should appear
centered within the window instead of over the origin, add the
data-position-to attribute to the link and specify a value of window.
It's also possible to specify any valid selector as the value of
position-to in addition to origin and window. For example, if you add
data-position-to="#myElement" the popup will be positioned over the
element with the id myElement.
<a href="#positionWindow" data-rel="popup" data-position-to="window" data-transition="slideup">
<div data-role="popup" id="positionWindow">
<p>I am positioned to the window.</p>
</div>
You can add data-transition="slideup" (or the transition of your choice) to the link, as well as other positioning options outlined in the docs link at the top of my answer.
yeah the right way to do this is use event.target like this
$('#popup').off('taphold').on('taphold', function (e) {
$('#popupDiv').popup("open", e.target);
});
incidentally, this code then places a popup if you tap hold the button and a click event is like this would mean a normal click still works
$('#popup').on('tap', function (){
var url = $(this).attr('url');
window.open( url, '_parent');
});
nb: I added "url='google.com'" to the markup and made href='#'
I am building a Flex 4 application which uses a <s:Scroller> component to vertically scroll overflown content. Let me explain what happens before I ask my question:
The body of the page is loaded from a database
Once the information has loaded, the "body" of the application (in this case the list of items you see below) is constructed
Once the list is constructed, the entire encapsulating component is transitioned into view using TweenMax, like so:
myComponent.visible = true;
TweenMax.to(myComponent, 1, {
alpha : 1,
y -= 20 //Slides the component up 20px from its original location
});
Below is the result. Notice how the scrollbar is scrolled the whole way down, but you can see the tips of a few white letters that were cut off at the very bottom.
Using my custom menu, I can navigate away from the page, and come back to it, and Flex will correctly recalculate the range of the scroller so I can scroll down and see all of the desired content. This issue only happens if the initial URL that the user enters is a longer page like this one.
Any ideas on how I can force Flex to recalculate the range of the scroller?
Thank you for your time.
Ok, after many hours of researching, piecing together, and trial and error here is what I came up with.
What I was doing wrong:
When I first posted this question, the "component" that I had mentioned was already added as a child element of the <s:Scroller>, but collapsed and hidden away, like this:
<comp:MyComp alpha="0" height="0" visible="false"/>
When the data would be loaded and the component's visual appearance would be restored and transitioned into place, like this:
myComp.visible = true;
myComp.height = NaN;
myComp.invalidateSize();
myComp.height = myComp.measuredHeight;
TweenMax.to(myComp, 1, {
alpha : 1,
y -= 20 //Slides the component up 20px from its original location
});
This method of approach didn't force the <s:Scroller> to recalculate its proper size until later, sometimes not until myComp was transitioned away and another component was transitioned into place using the same method. Even then, the size of the scroller would fit the size of the previous component, not the one that is currently displaying.
Now, what I am doing correctly:
My research showed me that anytime the addElement() method is called, either directly within the <s:Scroller> itself or by any of its children, the scroller's measure() method is called, and properly re-sizes the scroller.
Instead of placing the components inside of the scroller and simply hiding them until I need them, I dynamically created them in ActionScript, set their properties, and added and removed them as needed using the addElement() and removeElement() methods respectively. Now, as old elements are transitioned away and new ones take their place, the scroller re-sizes itself correctly.
There was one final problem that I was faced with. If the very first page the user was viewing (i.e. there was no previous component that was transitioned away and destroyed) required a scroller, it wouldn't show up.
I corrected this final issue by adding an event listener that listened for when the new component had finished transitioning into place. Inside of the event handler, I explicitly set the height of the component using this code:
newComp.height = NaN;
newComp.invalidateSize();
newComp.height = newComp.measuredHeight;
Now that the component has an explicit height, the scroller now appears, even if it is the first page.
The scroller now works as expected in all cases, and does not cut off any content or disappear when it shouldn't.
I hope that it is helpful to someone.
I need to popup some buttons in Flex 4. Users should be able to see the background (ideally a little faded, but not important) around and in between the buttons. And clicking anywhere except the buttons should dismiss them all.
So I created a spark Panel and added a spark VGroup with some buttons. Then I call
PopupManager.addPopUp(myNewPanel, background, true);
My 2 main problems are the panel is not transparent and clicking outside the buttons doesn't dismiss them... How do I implement that?
UPDATE: Figured out how to dismiss the popup when clicking outside the panel with:
addEventListener("mouseDownOutside", close);
private function close(event:FlexMouseEvent):void {
PopUpManager.removePopUp(this);
}
Now I just need to figure out how to make the Panel transparent so you can see the background around and in between the buttons.
You should use FlexMouseEvent.MOUSE_DOWN_OUTSIDE instead of the string "mouseDownOutside". Code completion, compile-time checking and makes it easier for others to read your code.
For the background, you can use css to style it. Heres a list of all the css properties for a spark panel - http://docs.huihoo.com/flex/4/spark/components/Panel.html#styleSummary