ExCanvas not working in IE7 and IE8 IFrame - javascript

I am using IFrame as a popup for IE7 and IE8 but am not able to make ExCanvas work on it. While I checked it out on the developers tools, I was able to see the changes in my canvas tags but was not able to see the rendered effect. Whereas I have tried ExCanvas on a simple web page and it works there. But in the case of an iFrame is just dosent? Can you please explain me why is this happening and is there any other solution to this? As in any other polyfill that can be used?

Related

Website with javascript doesn't work in IE9 but in IE9's compatibility mode - how to force compatibility view?

I know that there already is a question like this: Force IE9 into browser compatibility view
But since adding:
<meta http-equiv="X-UA-Compatible" content="IE=9">
to the the head section and reloading the page with ctrl+F5 didn't help there must be another way.
On my website is also a bxslider and according to this: bxslider not working in IE9 I replaced the elements (which had empty href attribute) with tags - still not effect. The images of the slider are displayed in full size one below the other. After activating compatibility mode the site works perfect.
I don't wanna rebuild my application from the scratch so what could I do to force the compatibility-view? Or is there at least a good free debugging tool for that? I downloaded the firefox addon IE Tab which has a debugbar but to use it you have to buy a premium version. I just don't know what is causing the error...
I found what was causing the error: Why does JavaScript only work after opening developer tools in IE once?
So frustrating and so simple. It was caused by the console.logs in the script. Without them it works like a charm.
If you use this code at the start of your JS (I use it in all my projects) https://gist.githubusercontent.com/elijahmanor/7884984/raw/console-monkey-patch.js it will override the console.log function so you avoid errors in IE but still get logging in modern browsers like chrome.

"background-clip:text" has weird behaviour

I am using a page that is using the css of -webkit-background-clip:text with a polyfill to get it working in browsers that don't support this.
Obviously, some browsers use Webkit (Chrome, Opera & Safari) and some don't (Firefox, IE), and I want the page to display the same (give or take the background clip) however this isn't happening on Firefox. The polyfill I'm using works but translates the text very weirdly in Firefox. Strangely enough, IE works (though the polyfill doesn't).
This is Firefox:
This is a Webkit browser:
And finally this is IE:
The polyfill I'm using is https://github.com/TimPietrusky/background-clip-text-polyfill
I've tried contacting the guy who made it but can't get any reply out of him.
Basically, I have no idea why Firefox is translating the text at all. I want it to either act as Internet Explorer and just display the text as white, or correctly display it.
How would I go about doing that?
If you need a page to work off, there is too much for a jsfiddle, but a link to the page can be found here.
Your polyfill creates a SVG for Firefox, but doesn't seem to do a very good job at it. Removing
overflow: hidden from the SVG element (set in svg.css) will let all the generated SVG show.

Unable to apply CSS in IE9

I have a website that uses OpenTable's reservation widget. In every browser except IE9 (including older versions of IE) I can style and manipulate the widget elements, both through a stylesheet and by using jQuery. But in IE9, the widget shows up with strange styling, and I can't effect it in any way. Even trying a simple test like $('#OT_form').hide(); has no effect whatsoever.
Here's a temporary link to the site:
http://www.tcmulder.com/jing/reservations
Anyone know what the problem might be?

FF - Iframe in contentEditable are not loading javascript

I'm currently trying to put together a rich text editor that includes widgets from a different location then the site the rich text editor is on. I'm doing this by providing an Iframe in the content area that is placed at the cursor.
Now the idea behind this instead of providing some kind of placeholder until they finish editing is so they can see what they are talking about while they type.
Now the iframe works perfectly fine in Chrome loads the content as expected, but in Firefox it seems to have disabled javascript in this case (notice none of the script files being downloaded), which is an issue as the widgets are extremely javascript heavy and don't function without it.
I have provided below a JSFiddle showcasing this issue, the site im loading in the iframe is just a javascript game but you will see it doesn't work in firefox but its okay in chrome!
http://jsfiddle.net/reefbarman/2uYja/2/
Any help is appreciated
Scripts won't be executed when designMode is activated (source). Internet explorer was the first browser to add this feature, and Mozilla implemented a similar function, heavily inspired by Microsoft.
Your code functions in Chrome, because Chrome has implemented designMode in a different way.
Well after some research and experimentation I was dealing with two different issues that looked like one.
Firstly I made a change to the rich text editor I was using to use contentEditable only as this seems to be the standard going forward and its a heavily html5 app im working on. So with designMode = 'Off'; the iframe would load in normal situations. But I had a strange issue where adding the iframe to soon after adding another element to the editable area caused the iframe not to load, so just delaying the add of the iframe by some time allowed that dynamically added iframe to load!
Problem solved!

Canvas application not working in IE9 & working incorrectly in FF4b7

I'm working on an online roguelike game. It's current version is located here. It's working fine in Chrome 9 and Firefox 3.6, but it makes Firefox 4 beta 7 unresponsive for about a minute on every move and IE9 just says that it doesn't support <canvas> tag.
Could someone please explain these strange behaviours of IE9 and FF4b7?
Thank you very much.
In IE9 hit F12 and you'll see your site is loading in quirks mode which is why it doesn't have canvas. From F12 you can switch it and see that you're site does work if it is in IE9 standards mode.
I think you want to put DOCTYPE html before everything else to avoid this.
http://en.wikipedia.org/wiki/Quirks_mode
I am posting this in case it helps someone else (I found this page when I was googling)
Pages worked fine in Firefox
In IE9 pages were working locally, but not from server. ("getContext not supported etc. etc.")
Had run out of ideas, but noticed that a trial of part of my page containing canvas did work.
Long story short:-
My pages were .htm and so I thought "Is there an HTML5 standard ?" well I'm not sure if there is but when I changed all pages to .html the site behaved as intended in IE9 with all canvas elements working.
Bob

Categories