Float HTML elements over .swf file without triggering flash events - html

I was wondering if anyone has came up with a way to float html elements, with some content, over .swf without triggering any flash events.
In my case the problem is I have flash map, and drop down menu on top of it.
I simplified this into the following example:
http://f1vlad.com/etc/d.html
If you mouseover any elements in gray box, you will see that stuff behind it, in a flash file, triggers hover effects.

Have you tried adjusting the z-index of the HTML elements with CSS.
Try applying this to your HTML element:
z-index: 1000;
Update: I have placed HTML elements over an .swf and had the area of the flash that is covered by the HTML not respond to click events. Is this essentially the same symptoms you want to correct?
try
display: block;

In Firefox 3.5, your page sort of works. When I mouseout of the floating box and on to Canada it will trigger the mouseover event for Canada. However, if I mouseover the floating box again the SWF doesn't receive the mouseout event so Canada stays highlighted. I assume you want to have Canada receive the mouseout event when this happens?
I would use ExternalInterface to have the floating box call methods in the SWF when the mouse enters and leaves the floating box. That way you can simulate the mouseleave event to reset the country highlight and popups, then when the mouse leaves the floating box you can check to see if the mouse is over a country and perform the mouseover event normally.

Related

How to make a div draggable from just 1 on of its child nodes

I am using the draggable attribute to enable reordering of elements like the following . I detect the various drag events and can interpret these to reorder the array of data to show.
The problem is that I attach draggable to the row as a whole to get the visual effect I want from the browser, but I cannot now select the text "Two" using the mouse, because it is being interpreted as a drag event. Attaching draggable="false" to the input did not help.
The ideal UI would that you have to drag from the drag-icon but that when you do, you see the whole row of elements move (at least in Chrome as I know draggable can look different between browsers).
One option might be to use a blurry png of the row specify the drag Image, but ideally it would be an the live data
So the solution was to add event listener to the drag icon such that when the mouse was over the parent node was given the draggable attribute at that time. That prevented dragging from any other part of the component as well as the artifact when trying to select text - a double win

Selenium: How can I click through a transparent overlay?

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.

Draggable menu containing non-draggable buttons with AIR

First off, I'm pretty novice when it comes to Flash and AS3.
I am trying to create a displayObject that contains 12 buttons for a mobile app. Since there are twelve buttons that will all open up into seperate menus they obviously all won't fit on a mobile devices screen. This is why I want to have all of the buttons on one display object that can be dragged up and down to show the buttons not currently displayed on the screen.
I am running into numerous problems while attempting this.
1) If I make the object containing the buttons draggable, which is behind the buttons, I can't click it through the buttons in order to drag it(unless I hit a sweet spot where there aren't any buttons but this isn't efficient for the user).
2) If I make the object containing the buttons draggable and put it in front of the buttons then I can't click the buttons in order to open the menus and access what is contained within them.
3) For some reason all of the buttons are seperately draggable when I don't want them to be. For example, I click anywhere on the screen (whether the touchID point is on a button or not) to move the entire list of buttons and if I happen to be clicking a button then, instead of moving the entire list, it moves that one button.
So the main question here is "How can I create a list of buttons and scroll through the list using a drag method (such as the settings menu on your phone) without dragging the buttons apart from each other." So the containing display object is draggable, and the buttons are clickable.
Some guy named Glenn does a good job with his example: http://rabidgadfly.com/2010/03/as3-clickable-button-inside-a-draggable-movie-clip/
However, if you click the yellow button in his example you can drag it out of the gray box. I want my button to remain stationary relative to the gray box. So you can move the gray box but the yellow button remains in the same location within the box but you cant drag the button around within the box.
I am not familiar with accelerometer events for the smartphones, but I do have an idea on how to fix this with regular actionscript 3 listeners. (You can just convert these to whatever is used by smartphone listeners)
A solution that comes to mind is to have a mouse down listener and a mouse up listener on the whole drag-able box. And when a mouse down event fires, you start a timer to go off in about a quarter of a second, and when it does you then set up a enter frame (or a timer based) function that fires every frame. This will update the whole box's position every frame corresponding to the current mouse location (your dragging box effect) and when the mouse up listener fires, it stops the dragging (and at this points, if the mouse is up, then the user is not touching the screen at all).
Also add a mouse click listener to every button. This way, with the quarter of a second timer, you KNOW that if the user simply wants to click a button, then they will click, leaving less that a quarter of a second between the mouse down and mouse up events (so that the dragging never starts) and the button is only clicked. And if the user holds the mouse down for more than a quarter of a second, then you KNOW that they must be trying to drag the whole thing.
This seams like the only way to differentiate between a user wanting to drag the box, and the user wanting to click a button inside it.
Obviously it does not have to be a quarter of a second, it can be any length of time that you want, it could even be no time at all, but then this might mess up things when people only want to click the button and accidentally slides it when clicking.
If you have any questions or problems, please comment and i'll try to help.

Is there a way to prevent a button to move "down" when I click it?

When using a HTML <button> whenever you press the button it moves a little. A small animation to show it's actually a button.
I'm looking for a way to have it stay exactly the way it is, and force my animation using mouse Events.
I started off just placing an <img> and use mouse events to swap the picture. This worked fine, except that it has some side effects I can't seem to get rid of. For starters, pictures can be dragged, which just looks odd if just press the button - hold - and decide you want to leave the button. I can turn off "draggable" but then it will show a blue square selection box, which is very unwanted.
My solution was to place it on a <button> element instead (with hidden background and border). This solves all the problems, except that it's slightly wiggling to the side.
I tried disabling it, but that also disables the javascript events.
How can I force a button to stay in place even if it's clicked?
So you have to use another tag than button (for instance span) and manipulate it's behaviour with javascript.

DIV show-hide flickering in IE only

I've got a problem with showing images triggered by a MouseOver (see: http://camera.vu.nl/v2)
In Safari and Firefox it's ok. In IE when you move of the text onto the Visible background layer with the blob-image, the layer is turned on and off leading to flickering.
I build it using the standard options in Dreamweaver CS4.
Can anyone please help me avoid this flicker in IE without destroying the idea of the page?
Thanks ever so much!
Marco
I've had this problem when I've added a mouseover and mouse out on a div which showed a div which covered the div which had the mouseout event set.
Is this the case? If so, then when the div shows, it will fire the mouse out event and then end up in a loop on mouseover and mouseout until you truly move the pointer out.
if not, could you post some code sample?