Cross-browser CSS3 transition parse errors - browser

I've set cross-browser css3 bg transition
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#dadada'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dadada)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
But when i'm opening this page for example on Firefox it give me parse errors
Error in parsing value for 'background'. Declaration dropped. # styles.css:43
Error in parsing value for 'filter'. Declaration dropped. # styles.css:43
How can i prevent it?

You can't stop those parse errors. Firefox doesn't understand the filter property and from Firefox's perspective, that webkit syntax is wrong. That's what happens when standards aren't finalized yet.

Related

window.MathJax is undefined in Firefox, works in Chrome extension

I'm trying to write a Chrome/Firefox extension in inject MathJax 3.0.1 into arbitrary web pages, Green Pi. It's working well for Chrome, but I'm having trouble with Firefox.
The content_script.js is
MathJax = {
chtml: {
fontURL: chrome.runtime.getURL("fonts"),
},
};
require("mathjax-full/components/src/tex-chtml/tex-chtml.js");
// This paints pages green
// require("green.js");
// // cat green.js == document.body.style.backgroundColor = "green";
(It's getting a little more involved when the user opts in/out of certain pages, but this isn't relevant here.)
Now, as noted in the code, the above works fine in Chrome, but fails in Firefox with the MathJax error
MathJax(?): window.MathJax is undefined
I don't see any other warning or error. Any hint on what might be going wrong here?
This turned out to be a MathJax bug after all, cf. https://github.com/mathjax/MathJax/issues/2399.

Movie upside-down and left-right direction switching

I am making application on vLine.
I wonder is it possible to change the direction of movie.
Currently,the pitcure on my camera(small frame) is left-right side reversed like a mirror.
It is sometimes a bit confusing.
If we can also switch upside-down ,
it is very useful especially using outside camera.
NOTE: This answer assumes that you are not using the uiVideoPanel widget.
You can style the HTML element that is created as a result of calling MediaStream.createMediaElement() or MediaStream.createVideoElement() with CSS. By default, the local video will be mirrored and the remote video will not. You can see an example of this by making a call with the shell example.
You can apply a CSS transform to the HTML element to mirror the image or flip it upside down.
To mirror, you'd use transform: scaleX(-1) and to flip upside down you'd use transform: scaleY(-1). Also, you may need to add a vendor-specific prefix to transform, such as -webkit-transform.
For example, in the shell example you can add the following in the mediaSession:addRemoteStream handler:
// flip remote video upside-down
// 'stream' is the MediaStream
// 'elem' is the result from stream.CreateMediaElement()
if (stream.isRemote()) {
elem.css('transform', 'scaleY(-1)'); // Firefox
elem.css('-webkit-transform', 'scaleY(-1)'); // Chrome
}

IE 6 PNG problem

Having trouble getting the top left background suitable in IE 6, this is the JS im using, it works for everything else on the page but not this :(
http://www.naomisalsi.com
DD_belatedPNG.fix('#navigation, .logo, #contenttop, #content, #contentbottom, #flowerbottom, body');
IE6 breaks for transparent PNG. Maybe try this one ...
Can you try giving the body an id
<body id="page_body">
and use that ID in the list:
DD_belatedPNG.fix('#navigation, .logo, #contenttop, #content, #contentbottom, #flowerbottom, #page_body');

Flash trace output in firefox, linux

I'm developing an applications which I've got running on a server on my linux desktop. Due to the shortcomings of Flash on Linux (read: too hard) I'm developing the (small) flash portion of the app in Windows, which means there's a lot of frustrating back and forth. Now I'm trying to capture the output of the flash portion using flash tracer and that is proving very difficult also. Is there any other way I could monitor the output of trace on linux? Thanks...
Hope this helps too (for the sake of google search i came from):
In order to do trace, you need the debugger version of Flash Player from
http://www.adobe.com/support/flashplayer/downloads.html (look for "debugger" version specifically - they are hard to spot on first look)
Then an mm.cfg file in your home containing
ErrorReportingEnable=1 TraceOutputFileEnable=1 MaxWarnings=50
And then you are good to go - restart the browser. When traces start to fill in, you will find the log file in
~/.macromedia/Flash_Player/Logs/flashlog.txt
Something like
tail ~/.macromedia/Flash_Player/Logs/flashlog.txt -f
Should suffice to follow the trace.
A different and mind-bogglingly simple workaround that I've used for years is to simply create an output module directly within the swf. All this means is a keyboard shortcut that attaches a MovieClip with a textfield. All my traces go to this textfield instead of (or in addition to) the output window. Over the years I've refined it of course, making the window draggable, resizable, etc. But I've never needed any other approach for simple logging, and it's 100% reliable and reusable across all platforms.
[EDIT - response to comment]
There's no alert quite like javascript's alert() function. But using an internal textfield is just this simple:
ACTIONSCRIPT 1 VERSION
(See notes at bottom)
/* import ExternalInterface package */
import flash.external.*;
/* Create a movieclip for the alert. Set an arbitrary (but very high) number for the depth
* since we want the alert in front of everything else.
*/
var alert = this.createEmptyMovieClip("alert", 32000);
/* Create the alert textfield */
var output_txt = alert.createTextField("output_txt", 1, 0, 0, 300, 200);
output_txt.background = true;
output_txt.backgroundColor = 0xEFEFEF;
output_txt.selectable = false;
/* Set up drag behaviour */
alert.onPress = function()
{
this.startDrag();
}
alert.onMouseUp = function()
{
stopDrag();
}
/* I was using a button to text EI. You don't need to. */
testEI_btn.onPress = function()
{
output_txt.text = (ExternalInterface.available);
}
Notes: This works fine for AS1, and will translate well into AS2 (best to use strong data-typing if doing so, but not strictly required). It should work in Flash Players 8-10. ExternalInterface was added in Flash 8, so it won't work in previous player versions.
ACTIONSCRIPT 3 VERSION
var output_txt:TextField = new TextField();
addChild(output_txt);
output_txt.text = (String(ExternalInterface.available));
If you want to beef it out a bit:
var alert:Sprite = new Sprite();
var output_txt:TextField = new TextField();
output_txt.background = true;
output_txt.backgroundColor = 0xEFEFEF;
output_txt.selectable = false;
output_txt.width = 300;
output_txt.height = 300;
alert.addChild(output_txt);
addChild(alert);
alert.addEventListener(MouseEvent.MOUSE_DOWN, drag);
alert.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
output_txt.text = (String(ExternalInterface.available));
function drag(e:MouseEvent):void
{
var alert:Sprite = e.currentTarget as Sprite;
alert.startDrag();
}
function stopdrag(e:MouseEvent):void
{
var alert:Sprite = e.currentTarget as Sprite;
alert.stopDrag();
}
[/EDIT]
If you only need the trace output at runtime, you can use Firebug in Firefox and then use Flash.external.ExternalInterface to call the console.log() Javascript method provided by Firebug.
I've used that strategy multiple times to a large degree of success.
Thunderbolt is a great logging framework with built-in firebug support.
I use the flex compiler on linux to build actionscript files, [embed(source="file")] for all my assets including images and fonts, I find actionscript development on linux very developer friendly.
Then again, I'm most interested in that flash has become Unix Friendly as aposed to the other way around :)
To implement FlashTracer, head to the following address and be sure you have the latest file. http://www.sephiroth.it/firefox/flashtracer/ . Install it and restart the browser.
Head over to adobe and get the latest flash debugger. Download and install the firefox version as FlashTracer is a firefox addition.
Now that firefox has the latest flash debugger and flash tracer we need to locate mm.cfg
Location on PC: C:\Documents and Settings\username
Inside of mm.cfg should be:
ErrorReportingEnable=1
TraceOutputFileEnable=1
MaxWarnings=100 //Change to your own liking.
Once that is saved, open firefox, head to the flash tracer window by heading to tools > flash tracer. In the panel that pops up there is two icons in the bottom right corner, click the wrench and make sure the path is set to where your log file is being saved. Also check to see that flash tracer is turned on, there is a play/pause button at the bottom.
I currently use this implementation and hope that it works for you. Flash Tracer is a little old, but works with the newest versions of FireFox. I am using it with FireFox 3.0.10.

Text wrapping inconsistent in Firefox 3 on PC only

This is a recurring problem I have in Firefox 3.0. It seems when I keep refreshing sometimes it wraps, sometimes it doesn't. When it doesn't wrap, I can adjust the window size and the sIFR'd element will snap to its correct size. I need my elements to wrap on load, based on the width of it's container.
I have the most current 'nightly build' of sIFR 3.0.
I want to sIFR a h2 tag. The h2 tag is enclosed in a div, and both have set widths.
<div class="recipe-title">
<h2>This is a recipe title</h2>
</div>
In my sifr.js file, I have the following parameters set:
forceWidth = true;
fitExactly = true;
preventWrap = false;
My .sifr.CSS file looks like this:
#media screen {
.sIFR-active .recipe-title h2 { width:455px; font-size:16px; text-transform:uppercase; }
}
And my normal CSS file looks like this:
.recipe-title, .recipe-title h2 { width:400px; }
Everything else seems to work in all other browsers except for FF3 on PC only. Is this a known bug?
sIFR may be initializing too early. Easiest fix is to set sIFR.useDomLoaded = false; before sIFR.activate(), which will wait until page load before replacing the elements.
You can also look into using sIFR.useStyleCheck = true; which needs a bit more CSS but will wait until the CSS has loaded.
I'm pretty sure it's text-transform:uppercase enlarging the word width after the flash width has been set
I've been trying to figure a solution to this for some time
For the common user... make sure that you set your width and height of the div container for your object or image. Firefox will wrap any text following if these values are not set.
A possibility is that you might need to specify a height on the element. IE7 can have a similar problem.
Is sIFR.activate() located in the sifr.js file or the sifr-addons.js file?
Per Mark's advice, uncommenting sIFR.useStyleCheck = true; just before sIFR.activate() worked for me.
Robert, sIFR.activate() is found in sifr.js.

Resources