I need to insert an XML (svg) file's contents into an html div. For browsers that don't support DOMParser() (IE7 & 8), how can I do this?
It appears that in IE8 I can insert the xml contents as text using innerHTML, but it doesn't render the svg.
My work is online at http://ec2-174-129-62-227.compute-1.amazonaws.com:8080/ but it may change a little bit as I tweak solutions. Make sure you click the "Leafy Tree" radio button. If it's functional, it should work fine in IE9 and chrome.
IE8 and lower doesn't support SVG, so even if you manage to insert the elements it still won't render.
Maybe jQuery parseXML will serve you better?
Although they won't work for my case, I did find some polyfills that will render something with SVG in older browsers. I particularly like this one by google. It uses your svg data to actually render a flash version in older internet explorer.
Related
jquery-bootgrid is a great little tool, i have it working perfectly well functionally, but i have an issue with the styling of the control.
For some reason the search bar generated by the js library spans across the entirepage, forcing the control for selecting the number of results shown, down to a new line.
I've also noticed that the paging control isn't styled correctly and nor is the dropdown for removing columns.
I've got the latest css and js files, is anybody else having the same issue?
I have the latest bootstrap available, could this be an issue?
My bad, I didn't include the jquery.bootgrid.css in my bundling at the right spot.
I am helping a client with an eCommerce site (runs on ProStores from eBay).
The issue is that the site's base stylesheet is breaking (being disabled) when the page is translated with the Google Translate widget. This only happens in Firefox. Chrome, IE(6-9), Opera and Safari are all fine.
Translate in FF was working prior to some changes we made recently: mostly graphical, some additions to the stylesheet. I had to tip-toe around their templates which were built with tables, outdated code etc. so I am overwhelmed when trying to troubleshoot this.
Here is a link to the site: http://www.myfantasticbags.com
(open in FF and use google translate in the header area to see the issue)
Thanks in advance!
I had the same problem and much frustration with this.
The problem I was having was that it was translating my website's font-resizers - From 'large' to 'grande' etc. which was throwing off the font-resize element and entire site.
Try adding a class="notranslate" to any elements you think may be translating and throwing off your stylesheet.
Hope this helps!
Korey
Add class="skiptranslate" to the head tag.
If you also have a link to a print preview style sheet, so your visitors can see how pages will print, try this: Putting the link to your external stylesheet inside a div with class="notranslate", may not only fix the translation in Firefox but also when flipping back and forth between your print preview and default CSS in all browsers. I know that divs in the head tags are atypical, but I don't see any problem arise from that.
I was testing a different feature, and I somehow, accidentally dropped an image that I had rendered "draggable" with jQuery UI, into a CKEditor (jQuery version) window. The source in the editor was updated accordingly. Serendipity!
But it was like I had just seen a unicorn -- It only happened once, and I was not able to replicate the effect.
Has anyone else been able to get those two tools to work together? If so, what's the trick?
I believe you don't need to make an image "draggable" with jquery to drag it into CkEditor. It works out of the box with any image of the page.
I am creating a Firefox extension that is somewhat similar to Firebug. There is a panel (or vbox) at the bottom of the browser that allows users to specify colors to certain Html elements. When they click the OK button, I would like these colors to get updated on the current web page.
I have my JavaScript working when I click the button (i am just throwing an alert), however when I change that JavaScript to change the css or styles of an element (by either using document.getElementById or jquery), nothing changes.
Is there something with Firefox extensions that I am missing? Any help is appreciated.
Let me know if you have any questions. Thanks
https://developer.mozilla.org/en/Extension_Frequently_Asked_Questions#Accessing_the_document_of_a_webpage_doesn%27t_work
You want content.document.getElementById() and similarly for every other construct you use.
By default in Firefox every time you open an image it will re-size to fit within the browser window, now if you view a lot of images this can become annoying having to click on the image every time it loads to see it full size.
There is a way to switch off that in about:config, but this is not a solution for a broader public.
Is there a way to switch that off by some JavaScript function, or CSS, or something else?
If you would like to switch off auto-resizing images in your browser, then you can
type about:config
search for property browser.enable_automatic_image_resizing
and set it to false
If you want it for your visitors, I just can repeat what Jeremy Sydik writes in Design Accessible Web Sites,
it’s just their web, we’re building on it.
And in this case, you really shouldn't decide whether your users want Firefox's auto-resizing feature or not. You can always choose a solution that gives better user experience to your visitors. For instance, you may install a Lightbox variant as Daniel A. White already mentioned.
There is also great_llama's solution to open images inside a HTML page.
Point to a dynamic page that uses an IMG tag with the appropriate source, rather than pointing to the raw image. Use the querystring or something similar to pass the image name to the page.
<html><body><img src="yourimage.jpg"></body></html>
I dont think there is anyway to change that behavior, at least using javascript or css.
Why not use a jQuery Lightbox?
http://leandrovieira.com/projects/jquery/lightbox/
Though I have not tried it, I don't see why it would autosize if you wrapped it in html and not link directly to the image.
if that is an option, just wrap it in html:
<style type="text/css">
* { margin:0; }
</style>
<img src="whatever.jpg" />
If you are the owner of the image, embed the image in an HTML document. Firefox resizes an image only if you open it directly in the browser.
If you are talking from a Firefox user's point of view, I think about:config is the appropriate place to disable this functionality.