I'm trying to create an overlay containing a flash player that is shown when a user clicks on a link. The div containing the player starts with display:none in CSS. Upon clicking, the div will be shown, and JS will use ExternalInterface to configure and start the player. The JS configures the player when it catches a "flash ready" event, which is fired by Flash on ADDED_TO_STAGE.
All this works, except that the ExternalInterface callbacks are never created. The JS and AS3 work fine if the player is shown upon page load, or is hidden with visibility:hidden instead of display:none. I am aware that Flash will not be initialized with display:none, and this works as expected: when the Flash is unhidden, it fires its events and correctly initializes everything else (eg. GUI, other internal stuff). The only thing that doesn't happen as expected is that my ExternalInterface callbacks are not added.
ExternalInterface.available is true. It's not a timing problem, because even after several minutes the callbacks are still not present. The strangest bit is that the flash is able to call JS, fires JS events fine, and the code to fire the events comes after the code to add the callbacks. There are no errors thrown by any of the AS3 code. I'm seeing this problem in both Chrome and Firefox.
FWIW, I'm coding the embed HTML directly instead of using SWFObject, due to some unusual requirements.
Has anyone run into this sort of problem with display:none and ExternalInterface?
Thanks!
I have had issues with addCallBack before. What I ended up doing was having my Flash call an init() function in JS after it's loaded, then within that init, setting up and transferring variables.
Hopefully that helps!
This turned out to be a problem with some details I glossed over, thinking they were unimportant (sorry!). The showing/hiding of the Flash video was being handled by FancyBox, which actually copies your hidden HTML into a new div and shows that div. This worked as such, and the newly minted player was able to initialize and fire events. However, it used ExternalInterface.objectID to reference itself, and due to FancyBox there were now two elements with the same ID in the DOM. Therefore, the events that were triggered like $(#objectId).trigger(...) had .target set to the original Flash player, which was still hidden, and therefore had not initialized, and did not have the callbacks I was looking for.
I solved this by putting the HTML for fancybox in an HTML script tag:
<script type="text/html" id="fancyBoxTargetId">[Flash player html]</script>
this prevented there from being two elements with the same ID in the DOM (good to do anyway), and allowed Flash to self-reference using ExternalInterface.objectID.
Related
I have recently observed a strange situation involving IE/Edge browsers and events associated with media resource tags like <video>, <audio> etc.
On the html5 spec and several reputable sites like MDN I learnt that load() function called on a resource object like video has to cause firing of a set of events like loadstart, loadeddata etc. At first glance it seems to be an old feature supported everywhere down to IE9. But in reality it actually doesn't happen in Microsoft's browsers.
What am I trying to do? There is a hidden <video> tag on the page. Basically a user clicks on a control element on the page and I show a loader waiting for the data (first frame) to come. Once the page receives the data - start playing the video. I catch loadeddata event in order to hide loader and show&play actual <video>. However, whatever I do in IE/Edge - calling load() or dynamically set src for <video> - it has no effect. The readyState property of <video> remains 0 meaning it didn't even start to load the data. I am pretty sure the video isn't in the cache but for completeness sake I tried to bust the cache by adding random string to video's url. No effect. However, if I directly just call play() on <video> it actually starts doing the job and fires all the events finally making the video play.
Why didn't corresponding events get fired upon calling load() on <video> tag in IE/Edge?
I've been playing around with the Padilicious touch events script after researching a problem I'm seeing in my code. I am able to recreate my own issues with the Padilicious script. I'm simply adding a form with an input to this example provided on the Padilicious site.
When I load this up on an iPad or on an iPhone emulator on a Mac, I'm unable to gain focus on the textbox. In my code, this has the same effect by blocking access to divs and other controls in the site's content. It's as if the div containing the ontouch events is masking everything else inside it.
Here is a jsfiddle showing what I've added. http://jsfiddle.net/Da8yj/
How can I impliment this swiping functionality and also keep the current functionality of my other controls?
Okay so I'm familiar with a few techniques for debugging events attached to elements. Events like click, mousedown, focus, etc.
Those are easy, but what I am trying to do is log the sequence of events triggered by jquery plugins (like sliders, form plugins, etc) when the document loads. There is some native markup what gets mutated when the page loads and new elements are introduced and some old ones changed or deleted.
Now I tried chrome tools and firefox and setting breakpoints to break on subtree modification on certain elements I'm sure are being changed but that only works after the page is finished loading.
What method would you guys suggest for debugging this kind of situation?
There is no code involved, its just an abstract, general situation.
After the page has finished loading, click on the "pause" button in Chrome Developer Tools, refresh the page, and it will pause right away -- you would be able to step through until the point you want prior to load. Make sure JQuery file, plugins, etc. are on the Development, unminified versions for this to work.
My friend made it so that on their page you can't right click on the pictures to save them. After inspecting the html it looks like this is done with JavaScript to bind the mousedown event. If I disable JavaScript, then I can right click and save the pictures, but I want to try to see if I can do it without disabling JavaScript. I tried using the JavaScript console to set different values and functions to null, but it didn't work.
I set a breakpoint on the mousedown event and whenever I right click on a picture this is what happens.
return document.addEventListener("mousedown", (function(e) {
return _this.onMouseDown(e);
}), true);
Why is it necessary to bind the mousedown event every time a user clicks the button? Shouldn't it only have to be bound once at the beginning?
I tried using removeEventListener but it didn't do anything. How can I re-enable right click on the pictures?
This is the page.
Just run a browser that has a preference that prevents the web page from blocking right-click and set that preference (such as Firefox or Chrome). I can right-click save any of your friend's images in my default configuration of Firefox.
FYI, there are much more effective ways of doing right-click blocking than your friend is using (including ways that work even when Javascript is disabled), but no scheme can block anyone from taking the images. The images can always be copied via screen capture, grabbing from the browser cache, grabbing the image URL from the page source, etc...
A popular photo service uses a right-click deterrent by putting a scaled transparent gif image over a background image that is the actual image you see. When the user right-clicks they get the transparent gif, not the background image they're looking at. I call it a small deterrent because it's still easily bypassed by any determined thief. This scheme works even when javascript is disabled and even works in browsers like Firefox that prevent apps from blocking right-click because it doesn't use any javascript and because it feeds right-click the blank gif, not the image of interest.
You can see whether there are any other events attached to the document. UseVisual event
Also addEventListener is old way of attaching events, if you could use jquery then you can easily bind/unbind events using bind() and unbind() methods.
I'm currently coding counter system and have spotted one problem with flash banners without wmode attribute at all, loaded via iframe from another website.
Works only mouseout event.
The problem is, that i can't catch click event on those banners.
Is there any solution?
Thanks.
No, Flash and other plugins deal with mouse interaction on their own and cannot be interfered with from HTML. Even if you changed the wmode and layered other HTML elements on top of the Flash, having caught a click on an element you could not then route that click into Flash either.
So you can't catch a click on Flash unless the Flash is deliberately written co-operatively to pass information about clicks out to JavaScript (eg. by providing a listener interface). There is no way to reliably audit third-party Flash banner clicks.
About all you can do would be to listen for mouseover/mouseout on a block containing the Flash, and if the current window loses focus in between the mouse entering and leaving, make a guess that the user clicked the banner and popped up a new window. This is still massively unreliable (plenty of scope of false +ves and false -ves).
no wmode or wmode=window means that the Flash file is rendered on top of the page not inside it. So you practically have no means to do anything with this file without the correct wmode (opaque or transparent)