I'm looking at this:
http://www.netmagazine.com/tutorials/create-page-flip-effect-html5-canvas
However, I have one problem with that - I need to be able to click on the pages, even the edges, without triggering the page turn. I want the pages to turn when a button outside of the canvas is pressed. Is this possible using the base they provided, or do I need to go an entirely different direction?
Yes that can be done.
From what i can see, you need a click event that doesnt trigger the page drag. You need to assign a flag for this.
Let Drag = mouse drag/mouse move, down = mouse down, release = mouse release events respectively.
Initialize your flag variable as false. When a drag event is encountered it becomes true. Otherwise it remains false. As long as it is false when the mouse release event occurs it can be treated as a click. Thats the basic principle behind using mousedown and mouseup as a click event.
You will have to use e.srcElement or e.target to give you the element your cursor is currently positioned over inorder to trigger click functions relative to that element.
If you want a more detailed explanation on the page flip technique then check this out. Helped me lot.
Related
I want to remove focus and selection on a textfield, if the user types ESC or ENTER, or focuses somewhere else. Thus I do this:
stage.focus = null;
textField.type = TextFieldType.DYNAMIC;
textField.selectable = false;
textField.mouseEnabled = false;
The problem is that, if the mouse is over the editable text field, the mouse is in IBEAM mode (caret cursor) and remains in IBEAM mode, even after the commands above, untill I slightly move the mouse, at which point it returns to the AUTO state.
I want to force the mouse to update itself and satisfy the AUTO state but no matter how much I try to make sure the textfield is disabled, it won't dissapear on its own, only after I move the mouse a bit.
Simplest answer from your comment:
So I was fidling with your suggestion and for the luls, used Mouse.hide() and then Mouse.show() and it worked. Removed the hide() and it works just with Mouse.show()! Guess it refreshes the mouse cursor. No blink, works perfectly <3
My original answer:
This is sort of a workaround but shouldn't be too difficult to implement. Hopefully someone comes along with a native API solution.
Run your code you posted
Then make cursor invisible
Then place your custom cursor at the mouse position (optional if you don't mind the cursor just disappearing)
On MouseEvent.MOUSE_MOVE remove your custom cursor, and make the cursor visible again.
I doubt you need me to write this code for you, but if you think this method would work for you, and you have a problem implementing this technique, let me know.
If you're worried about different systems having different mouse icons and then suddenly getting your custom one for a split second, the easy solution there is to just always use your custom cursor. You can design it to look exactly as you like; either mimic Windows OS or make it unique.
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'm creating a game in Flash CS5.5, basically a version of "Who wants to be a millionaire?".
I have an answerDisplay Class which contains an answer text. Answer texts can become rather long, and since I have limited screen space I check for very long texts and if a text is too big I add a UIScrollbar besides the text field.
Which works nicely, except for one thing - when the user drags the scroll tab, the text scrolls fine. When the user clicks one of the scrollbar arrows the text field also scrolls fine, as long as the button is clicked, but as soon as the mouse button is released the click event of the containing answerDisplay class is fired, which leads to my program wrongly thinking the user had selected the answer while he just tried to scroll.
I tried catching this via e.target and/or e.currenttarget, but it's no use, I never get a reference to the scrollbar, so I'm never sure if the user clicked one of the arrows or if he genuinely clicked the answer to select it.
How can I make certain that the click event of my answerDisplay Class is not fired when the UIScrollbar is used?
Checking e.target and e.currentTarget is a good start.
You might also want to check the event phase:
For more details on event phase, check grapefrukt's answer
A click from the answerDisplay Class dispatched event should have AT_TARGET phase, while the UIScrollbar event should have the BUBBLING_PHASE. This should help you differentiate between the two.
Also, you could add event listener to the UIScrollbar in your answerDisplay Class to capture the event and then suppress it via stopPropagation().
Depending on how UIScrollbar uses event bubbles internally, you can try either stopPropagation(), either stopImmediatePropagation(). The goal is to stop the event bubbling up from answerDisplay, but not breaking the UIScrollbar functionality.
I have a SimpleButton on the stage, and in the click event for it, I remove it using removeChild(). When re-adding the button, it gets re-added in it's "over" state, not the "up" state as expected.
I'm pretty sure it's a bug, so I've filed a JIRA: http://bugs.adobe.com/jira/browse/SDK-31445, my question is now on how to fix it, if anybody's had a similar experience.
What I've tried:
using visible = false instead works, but I'd prefer to remove it off the stage altogether as the game I'm working on can have a lot of popups/screens.
Firing the mouse_out event manually - doesn't work, and in any case, the mouse_out event fires as expected (perhaps before resetting to the up state, it makes a check to see if it's added to the stage, finds out it's not, then quits early)
Resetting the stage focus - I thought it was a problem with the stage focus, as you were losing focus when the button was hidden, but resetting it didn't fix it.
I could temporarily swap the over and up state when it's hidden, but that seems like an ugly fix.
I've been Having this problem as well, removing one button and adding another in response to an Mouse up event on a separate sprite.. IE the mouse isn't over either of the buttons at the time, But when the first button (the one with the problem) was previously removed the mouse was indeed over it so it hadn't received a mouseOut event and retained itself in the over state. Using visibility to work round this which is ok for my needs BUT the alternative answer would be to replace with a new instance of the button before adding it to the Display List.
I'm working on a web app where I support dragging on the page, by simply watching for mousedown/mousemove/mouseup events. That part works great.
The problem is that I'm only handling dragging inside one particular element, by design, and if a user (accidentally or not) drags outside, it gets "stuck" in drag mode. That is, mouse-down, then mouse-leaves-window, then mouse-up, then mouse-returns to window looks like it's still dragging, to my app.
I haven't figured out any way to solve this -- even something simple like "when the mouse re-enters the window, is the mouse button down?" would work.
Does such functionality exist, and I'm just missing it? Or is there some clever workaround I can employ here?
Legacy support has no importance to me -- if it's an HTML5 solution that only works in FF3.5/Chr4/Sf4, I'm happy with that.
In IE7/IE8 you can detect if the mouse was released outside the window by using the following code:
document.onmousemove = function(event) {
event = event || window.event;
if (document.all && event.button != 1) {
canceldragging();
}
}
In Firefox and Webkit the mouseup event is fired on the document when the mouse is released even if mouse pointer outside the browser window. You can see this using http://www.quirksmode.org/dom/events/tests/click.html
For IE8 the document onmouseup event is fired when the mouse button is released outside the browser window only if you allow document selection to occur (as the link above does). That is, in IE8 you don't get the mouseup event if you use document.onselectstart and cancel the selection, or if you use unselectable="on" on the starting element, or if you called document.selection.clear() combined with document.selection.empty() while the mouse was down.
What if you had the onmouseout event of the element fire the mouseup event?
If you're just using inline handlers, something along the lines of:
<div id='dragElement' onmouseup='alert("stop dragging!")' onblur='this.onmouseup();'></div>
added to whatever event handling code you're already using. This would 'release' the drag whenever the element loses focus. Not the cleanest code, but you get the idea.