I am hoping that someone can help shed some light on the underlying issue causing the bug that you see here:
As you can see, the FusionChart is incorrecly overlaying on top of the Modalbox when the it is opened. This issue only occurs in Google Chrome. All other browsers are ok.
Any ideas on the underlying issue here? And what can be done?
Last time I messed with overlaying a div on top of Flash (What is going on here) I could get it to work on all platforms except Linux. Are you using a Linux distribution? If not the solution is usually to add wmode="transparent" to the embed.
Otherwise, the only solution is to set .style.display="none"; on the FusionChart whenever the Modalbox is shown and .style.display=""; when the Modalbox is closed.
When Flash objects appear on top of every other HTML elements, it is most likely because the window mode (wMode) parameter of the Flash movie is set to "window".
In FusionCharts, one can set wMode in two ways:
A. Using .setTransparent() JavaScript function
setTransparent(false) changes the window mode to "opaque" and that solves the issue of FusionCharts appearing on top of modal windows and lightboxes.
setTransparent(true) also serves the same purpose. It sets wMode to "transparent". (Any value for wMode, except "window" would do the trick.)
Example JavaScript:
var myChart = new FusionCharts( "FusionCharts/Column3D.swf",
"myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("Data.xml");
myChart.setTransparent(false); // set wMode to opaque
myChart.render("chartContainer");
Since FusionCharts 3.2, setting setTransparent(null) restores wMode to "window" and you would NOT want to do that for your case! :)
B. Using wMode property during new FusionCharts construction
Also since FusionCharts 3.2 introduced object-style construction method, the value of wMode can be provided while doing new FusionCharts(...) itself by providing wMode: 'opaque'
Related
I have an animated gif in an img tag that I start by rewriting the src attribute. The gif was created, though, to loop and I only want it to play once. Is there a way, with Javascript or jQuery, to stop an animated gif from playing more than once?
I was having the same problem with an animated gif. The solution is rather simple.
Open the Animated gif in Photoshop.
Go to the Window tab and select timeline(if the timeline is not already open).
At the bottom of the timeline panel, you will find an option, which says "Forever".
Change that to "Once".
Go to File> Export> Export for Web and save it as a gif.
That should do it.
can you find out how long the gif takes to loop once?
if so then you can stop the image like this:
pseudocode:
wait until the end of the image (when it is about to loop)
create a canvas element that has a static version of the gif as currently displayed drawn on it
hide gif
display canvas element in a way that makes it look like the gif froze
javascript:
var c = $("canvas")[0];
var w = c.width;
var h = c.height;
var img = $("img")[0];
setTimeout(function () {
c.getContext('2d').drawImage(img, 0, 0, w, h);
$(img).hide();
$(c).show();
},10000);
jsfiddle
edit:
I forgot to add reference to the original answer that I took this from, sorry
Stopping GIF Animation Programmatically
that one doesn't address the time factor you need for only one loop
Also, it has been mentioned that this approach is problamatic in certain cases (It actually didn't work when I try it in firefox right now...). so here are a few alternatives:
mentioned by Mark: edit the gif itself to avoid looping. this is the best option if you can.
but I've run into cases where it was not an option (like automated generation of images by a third party)
instead of rendering the static image with canvas, keep a static image version and switch to stop looping . this probablyhas most of the problems as the canvas thing
Based on this answer, it's kinda expensive, but it works. Let's say a single loop takes 2 seconds. At a setTimeout after 2 seconds kick in a setInterval, that would reset image source every millisecond:
setTimeout(function() {
setInterval(function() {
$('#img1').attr('src',$('#img1').attr('src'))
},1)
}, 2000)
again, probably just a proof of concept, but here's demo: http://jsfiddle.net/MEaWP/2/
Actually it is possible to make a gif to stop after just one iteration or any specific number of iterations, see an example below (if it is not already stopped), or in jsfiddle.
To do that the gif must be created with number of iterations specified. This could be done using Screen to Gif, it allows to open a gif or a bunch of images and edit it frame by frame.
This solution also allows you to reset the animation by imgElem.src = imgElem.src; but this does not work in MS IE/Edge.
Jurijs Kovzels's answer works in some condition but not in all.
This is browser-dependent.
It works well with Firefox. But In Google Chrome and Safari, it does not work if the gif is on the same server. The example he provided works because the gif is on the external server.
To restart gifs stored on the internal server, using Google Chrome and Safari, you need extra steps to make it work.
const img = document.getElementById("gif");
img.style = "display: none;";
img.style = "display: block;";
setTimeout(() => {
img.src = img.src;
}, 0);
This is inspired by this answer.
Not sure if this is the best way to respond to everyone and have it appear after all the previous answers and comments, but it seems to work.
I don't have much control over the gif. People post whatever gif they want as the "thankyou.gif in their account directory and then the ThankYou code runs whatever they've put there when a comment is submitted to a form they've posted. So some may loop, some may not, some may be short, some may be long. The solution I've come to is to tell people to make them 5 seconds, because that's when I'm going to fade them out, and I don't care if they loop or not.
Thanks for all the ideas.
I know I am pretty late here but..here it is...
I don't know if you would go to this length but let me share a trick.
Open the GIF in Macromedia Flash 8(it has deprecated since then), Export the GIF as Animated GIF. You will have to choose the file location. After that you would receive a dialog box with settings. In that, add the number of times you want the animation to happen. Click OK. Problem solved.
I'm trying to capture the content of a WebBrowser control that is not in the visible tree, but the WriteableBitmap.Render() is capturing a (correctly sized) bitmap of all black pixels. If I put the WebBrowser into the visual tree, the capture works fine.
WriteableBitmap doc is emphatic that it works on controls not in the visual tree, and I'm making the required calls to Measure() and Arrange(). Relevant code (originally in WebBrowser_LoadCompleted event, for demo moved to renderButton_OnClick)
hiddenBrowser.Measure(new Size(hiddenBrowser.Width, hiddenBrowser.Height)); // pretend there's plenty of space.
hiddenBrowser.Arrange(new Rect(0.0, 0.0, hiddenBrowser.Width, hiddenBrowser.Height)); // pretend we know where this is going.
//noHelp hiddenBrowser.UpdateLayout();
WriteableBitmap _bitmap = new WriteableBitmap((int)theImage.Width, (int)theImage.Height);
_bitmap.Render(hiddenBrowser, new ScaleTransform());
_bitmap.Invalidate();
theImage.Source = _bitmap;
A complete project demonstrating the problem is available at: https://skydrive.live.com/redir?resid=193BF22F5BBA1A84!10526&authkey=!AGeH6YC_NttOmj0
Press Unhide (webBrowser shows in visual tree), then Go, then Render --> render captures OK.
Then press Hide (webBrowser disappears), then Go, then Render --> Black Screen of Ignorance.
Originally, I thought this was a timing issue (e.g maybe browser hadn't finished painting the web page even though LoadComplete event fired), but it cannot be; in the demo, I wait for 10s of seconds before pressing 'render' button which does the render, and still get black image.
I reproduced your problem. It seems like the Control isn't rendered if not necessary.
Do you really need the WebBrowser to be in the Visual Tree?
If you just want it to be invisible, setting the Visibility to Collapsed won't work either (I tried).
An ugly trick that works for the WebBrowser to be invisible to the user but still allows a WriteableBitmap rendering is to translate the control out of the ViewPort. To do that, just use a TranslateTransform:
hiddenBrowser = new WebBrowser();
hiddenBrowser.Width = theImage.Width;
hiddenBrowser.Height = theImage.Height;
hiddenBrowser.LoadCompleted += hiddenBrowser_LoadCompleted;
hiddenBrowser.NavigationFailed += hiddenBrowser_NavigationFailed;
hiddenBrowser.LayoutUpdated += hiddenBrowser_LayoutUpdated;
hiddenBrowser.RenderTransform = new TranslateTransform { X = 2000, Y = 2000 }; // this is the code I added.
Ugly but working solution!
This turns out to have been doomed from the start.
You can't run the WebBrowser control in the background on WP8, period. It's an Unsupported API.
And, as noted above, there's the issue (maybe not a bug?) that WebBrowser won't provide a bitmap when it's not in the visual tree, anyway.
I have made a flash as3 project in adobe flash pro with the dimensions 20px x 150px.
i would like to ceep it this size, but the problem is that my application needs to ask for the MICROPHONE premissions
( like in the image )
but this only happens if the flash object is big enough.
are there any workarounds with maybe the "overflow = visible" method or something ?
thx for any help
Here are a couple of options:
Temporarily increase the dimensions of the SWF in HTML. I've never done this, but I imagine it would work and is the most simplest solution.
Use wmode="transparent" or wmode="opaque" in your embed code. In both of these modes you can layer HTML on top of or underneath the Flash object. The SWF should be sized so that it is big enough to display the dialog. When the dialog is not visible, you can hide portions of the Flash app by covering them with HTML.
I've used the 2nd option successfully, not for this purpose, but for showing some HTML elements (arrow images and text) to guide the user through these "allow" camera/microphone dialogs.
For both of these options to work, you need to be able to detect when the user has closed the dialog. Though there is no official Flash API for doing this, however, there are some good work arounds for doing that.
I have a flash app using fl.controls.ScrollPane as a container for a Sprite form.
The ScrollPane.source is referenced to the Sprite form with flash.text.TextField as some of the form's children.
I tested using Firefox and Chrome browsers.
When the flash file is called directly from the development server, the flash application runs correctly, except for the fact that one needs to click twice before being able to select the editable TextField.
The situation worsens when the flash is embedded on a page with strict control attributes such as:
<embed type="application/x-shockwave-flash"
src="https://localhost:flashfile.swf" width="400" height="300"
quality="high" scale="scale" allowfullscreen="true"
allowscriptaccess="never" salign="tl" wmode="opaque">
I read that wmode=opaque can bring some undesirable side effects, but it is ridiculous, that I can't even select the TextField objects. Event the mouse scroll isn't captured anymore. The mouse events are not hitting the TextField objects.
This is a peculiar case because other objects such as fl.controls.CheckBox and fl.controls.ComboBox works, as they still are clickable/selectable.
Question: Is there something I should know about in this special scenario of ScrollPane and embedding using wmode=opaque that I'm missing out here?
After searching the web for half a day, and combing the AS3 documentation till my eyes go blind, I finally found a hint to a solution to my problem. I'm just doing a brain dump here to fix the TextField selection issue.
A lot of search results hinted at the problems of wmode=opaque and how browsers control the mouse events, but not many turn up direct answers or solutions.
http://www.actionscript.org/forums/showthread.php3?t=170310
The forum question above gives a hint, that the ScrollPane object, actually captures the first mouse click for focus, then lets the subsequent click go through to the children object. The tip given is as shown:
myScrollPane.focusEnabled = false
setting focusEnabled property to false.
For completeness, I've explicitly set more properties just to be sure:
mouseFocusEnabled = false; // disable mouse focus on the scrollpane
focusEnabled = false; // disable focus on the scrollpane
mouseEabled = true; // receives mouse input
mouseChildren = true; // enable for selecting children objects
Miraculously, my clicks are able to select the editable TextField objects when the flash is embedded using the wmode=opaque (I'm still not actually sure whether this is the issue).
The mouse scroll events however, seems to be only solvable with external javascript. There's no internal AS3 solutions.
That said, the unanswered question is: I'm still not sure where or how web browsers capture the mouse events then selectively pass them into the embedded flash containers. If someone can shed light on this, and also point to some solution, that would be great.
I'm trying to make a google maps style interface for a design project. I've got the drag/drop and zoom functions working, but I also want to make it react to gestures on a trackpad (macbook). I assumed 'listening' to the event.delta of a MouseEvent would do the trick, but somehow it's not working. So what's wrong with my code?
stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
function onMouseWheelEvent(event:MouseEvent):void {
tafelOrigineel_mc.y += event.delta;
}
I have loaded the flash MouseEvents earlier in the document, so that shouldn't be the problem. After I got this working, I will try to use it on the x-axis too. Is that possible with the MOUSE_WHEEL eventlistener?
Thx in advance
It is a long time problem regarding flash player on MacOS.
MOUSE_WHEEL event won't dispatch on MacOS. Though there are some workarounds involving the use of JavaScript to detect the use of the wheel (over the entire flash content), if it isn't a issue, try checking one of those.
There is a list in this blog post:
http://www.impossibilities.com/v4/2009/03/06/flash-mousewheel-implementations-for-mac-os-x/