is it possible dragging a text along with cursor while mouse is clicked on angular2? I'm designing a web "painter" app and want to be able to click on a textbox and drag it around the page as long as the mouse is still pressed, like you could do in any simple editing app.
snippets of code or links to websites that have examples would be helpful as I'm a visual learner! Assume I know my way around angular 2 (which I like to believe I do, to an extent)
You dont need angular for this you can do it simply in HTML5 with the 'draggable' property:
<div draggable>My draggable text</div>
Related
I'm making a React website where I display popups using createPortal and my popups have buttons that take you to different popups (e.g. there's one popup where a user can confirm a session, and when they click the confirm button, another popup comes up saying their session has been confirmed). I want to create an animation where the text from the first popup slides out and the text from the second popup slides in when the button is clicked, but I can't find any suitable ways of doing so without glitches or bugs. I tried Framer Motion, but there was an issue where the components would only animate when entering the DOM, not when leaving.
Here's my component structure:
<CustomPortal> // made with createPortal
<Modal>
<ConfirmSession /> // this should slide out
<SessionConfirmed /> // this should slide in
</Modal>
</CustomPortal>
Any ideas on how to accomplish this?
I am trying to create a popover for a button or div that I want the user to click. The popover should display at the start when the screen loads and the user should be able to click on it to make it disappear (either the popover or the button).
Has anyone tried to do anything similar before?
I'd prefer to use the Angular-UI Library (http://angular-ui.github.io/bootstrap/) if possible but other solutions would be great too.
I have tried using stuff similar to this but the popover clearly only appears on mouseenter or click/focus if I change the trigger.
Enter a post
Any help would be much appreciated!
I have an element that fires some javascript on click.
Partially covering the element is a mostly-transparent graphic, which passes all events to that element. This way, regardless of if the overlay or the element is clicked, the element gets the events.
I'm trying to write a test in selenium that clicks the element under test and verifies the behavior, however the chrome webdriver tells me it can't click the element because the overlay will get the click event.
That is fine, though... How do I tell selenium that I don't care, to click anyways? I don't want to specifically click the overlay (in this test), the overlay is just eye-candy so the test should still work even if I remove the overlay.
edit:
To make clear... I want it to click in wherever it would have, if the overlay wasn't there. this way it'll click the element if there is no overlay, but click the overlay if covered.
You will not be able to click on the object under the overlay as Selenium has been written to only access what a user can access. If a manual user cannot click through then neither can Selenium.
You could either fire JavaScript directly on that object via the javascript_executor method, or alternatively, perform the interaction which will remove the overlay in your test
I could resolve this issue: In my application top header was visible and i clicked on one of the top elements (which was visible) and could continue with rest of the script execution
I solved this issue by clicking the coordinates of the close button.
Check out this answer. I showed how to click on the little "x" there, without needing to know the name of the actual button. Sometimes its easier to find the class of the image, for example.
Worst case, find the closest element to the button and change the last method to move_to_element_with_offset(element,x, y) to go from the element you found to the coordinates of the button on screen.
Once you do that, the overlay disappears and you can click as normal.
I create the Application Bar with 4 icon Buttons and 3 normal menus. It's working fine.
But i don't want, the circle around the icon button. How can i remove that.
And another one question is how to see the icon button text in normally. That means i click the more icon that time icon button visible. But i want no using more button and want to see the icon button text. It's Possible.
Please Help Me.Thanks In Advance.
you cannot remove the circle, neither you can "expand" the application bar so you can see the labels of each button. It is simply against the Windows Phone UI.
But as it is .NET, you can easily create your own buttons bar at the bottom of your page. Of course, it might be difficult to implement the UI logic for you menu items so they behave like the native application bar does (you could consider using the build-in application bar for you menu items and set its mode to "Minimized").
But: why would you do all this? In my opinion, apps should follow all UI guidelines and should all look the same (especially when compared to native apps) ;-)
Greetings
I am trying to accomplish an "imagemap" in flash where you click on different areas in the image and when you click on it, a popup (within flash) comes up showing more information about the object that was clicked on. The popup has a close button that can will then close the popup.
My biggest trouble is the way I have my code right now is when you click on a region of the map, it creates a popup on the fly, and then I use addChild(_myPopup) to add it to the display list. The problem with this approach for me, is that the Popup is now a Child of the button I just pressed, but this object organization doesn't really make sense to me. I'd like to have the popup not be a child of the button and it be on it's own layer or a child of the stage directly.
What is a good approach and code architecture for building such an organization of objects? I'm fairly new to AS3 and I've built some small applications but my knowledge is limited.
Thanks
UPDATE
ok looks like calling stage.addChild(myPopup) from inside the button works pretty well. Is this good practice?
Assuming you have a hierarchy that looks something like this:
stage
Main class
Image class
Button
It's good practice to never call upwards in the displaylist, every object only deals with it's children. Events however, are a nice way of communicating upwards. Have the Button dispatch an event, preferrably a custom one, then handle that using a listener in the main class that then deals with creating a popup on top of everything.
An often encountered practise to organize the layers of the visible application is:
stage
main class with all children
popup container
tooltip container
mouse cursor container (apparently not longer necessary since player 10 supports custom cursors)
So you create your popups always in the popup container above the main class. If you would have tooltips, they should go into the tooltip container. This approach guarantees that popups are always visible above the main app and tooltips are always visible on top of everything.