I have a chrome extension which allows to write on screen in chrome tabs. The default behaviour looks like :
It works be simply inserting a canvas tag in the DOM and doing all the stuff in it. It works well in all sites. However, chrome PDF viewer behaves strangely when I use it :
Before -
After -
I don't think there is any issue with the extension because it works on all other sites. I think there is an issue with chrome PDF viewer itself.
I can attach the code here if asked in comments.
Ok, so I tried to replace all innerHTML += <value>; by insertAdjacentHTML("afterbegin",<value>); And now it's working fine.
It's because your canvas must be on top to ensure it will works on every website.
The z-index propery is not enough for that.
Hope that helped !
I was wondering if it is possible to print the data of an object tag in html? For example I have an object like this:
<object id="myObject" data="myPDF.pdf"></object>
I have a PDF embedded in the object tag. I need to be able to print the PDF using a JavaScript function in Firefox. Placing the PDF in an iframe and printing does not work as Firefox will not let you access the frame's contents. Neither does using:
myObject.contentWindow.print();
or
document.getElementById("myObject").print();
Does anyone have any other suggestions? I am trying to figure out a way of printing just the data of the object (i.e. the PDF file) but have not found a solution so far. Using an iframe works for chrome and using an embed tag works for Internet Explorer, but I cannot find anything that will work in Firefox. Any help is much appreciated, thanks.
Unfortunately as #yms said in the comments this is a bug in Firefox and there is no workaround for it yet. You can read the bug report here. There does not seem to be any progress on a fix but I will update this answer as soon as I hear of one.
I have started working on Google maps recently.What I have done till now is to get current location(position) on Google map.It works fine and displays the current position successfully.
But when I place the "!DOCTYPE html" tag in the very first line of my html code, the map is not displayed.
Also, I replaced the "%" in div tags "style" attribute with the "px" (pixels) when I used the "!DOCTYPE html" tag in my document, but it didn't worked.
I am using both Google Chrome (version 21.0.1180.41) and Firefox (version 14.0b12) web browsers to display the map, but it doesn't work for any of them.
What may be the possible reasons? Please answer.
Thanks!
When looking at a listing for eBay, for example:
http://catalog.ebay.com/Apple-iPod-classic-5th-Generation-Black-30-GB-/60655662?_pcatid=39&_refkw=ipod&_trkparms=65%253A12%257C66%253A2%257C39%253A1%257C72%253A4030&_trksid=p3286.c0.m14
The Price Trends chart shows up as iframe apparently using HTML 5 canvas. But IE does not support canvas element but still it shows up correctly in IE. How does it works in IE? Also it appears the src attribute of iframe is empty but there is HTML content within the iframe. How is this happening?
But my main question is how it is working in IE?
It uses a charting library called jqplot.
If presented to IE this calls it's excanvas script
Example of which is here
Excanvas
I'm currently doing some redesign of a website, basically just upgrading it to a more up-to-date look and trying to make it as resolution independent as possible, and in the name of resolution independence I figured I'd try to use SVG images in the design where the browser supports SVG images in <img> tags. The reason I want to stick to just using SVG in <img> tags rather than using some more ambitious solution is that AFAIK Chrome, Opera and Safari all support it and FF4 seems like it may finally get it as well combined with the fact that the entire site is built on a custom CMS which would have to be partially rewritten to start changing the output HTML (currently it supports custom design images, custom CSS and custom JS includes for each theme).
Now, I've looked around the net a bit myself trying to figure out the best way of doing this and for some reason pretty much every suggested solution I've found has worked poorly (one detect FF3.x as supporting SVG in <img> tags so they didn't display properly there, another one never tried at all, several were overly complex "replace all images with SVG if there is support for it" functions which won't work too well either.
What I'm looking for is really a small snippet that can be called like this (btw, I'm using JQuery with this new theme for the website):
if(SVGSupported()) {
$('#header img#logo').attr('src','themes/newTheme/logo.svg');
/* More specified image replacements for CSS and HTML here */
}
Does anyone actually have a working solution for this that doesn't give inaccurate output? If so I'd be very grateful.
This appears to be the ultimate answer: Javascript: How can I delay returning a value for img.complete. Unless someone comes up with something yielding the correct results immediately.
For old browsers you could use the <object> or <iframe> tag, but that is not a nice solution. Firefox and IE9 (don't know about other browsers) have implemented inline svg now, which can easily be detected:
// From the Modernizr source
var inlineSVG = (function() {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
})();
if( inlineSVG ){
alert( 'inline SVG supported');
}
So, you could replace all images by svg tags then. And I hope, but I have to google on that, that every browser that supports inline svg will support svg as image source.
A good discussion/comparison of methods is here:
http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images
Based on that page, I wound up using this:
svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")
I've been meaning to write a blog post about this, but here's a snippet that should work:
function SVGSupported() {
var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
var img = document.createElement('img')
img.setAttribute('src',testImg);
return img.complete;
}
Based on a script by Alexis "Fyrd" Deveria, posted on his Opera blog.
I'm using something similar on my blog, which you can see in action here: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/
It will use <img> if supported; if not, and we're not on IE, it will use the a regular object tag; otherwise, it will use an object tag specially created for svg-web. fakesmil is used for the gradient animation. It seems to work everywhere I've tested it. The script that does the work for this example can be found here: http://blog.echo-flow.com/media/js/svgreplace.js