Can you please help me with following code?
In Webkit family, I see the shadow element (in developer tools), but doesn't appear at all on screen.
In Firefox, it crashes!
I suspect namespaces, because it works great for HTML elements like HTMLDivElement.
<?xml version="1.0" encoding="UTF-8"?>
<html>
<script>
var proto = Object.create(SVGTSpanElement.prototype);
proto.attachedCallback = function() {
if (!this.shadowRoot) this.createShadowRoot();
this.shadowRoot.appendChild(document.createTextNode('superb!!!!!'));
}
var XLang = document.registerElement('lang-tspan', { prototype: proto, extends: 'tspan' });
</script>
<svg width="300" height="100"><text x="10" y="20">This is <tspan is="lang-tspan">my substitution</tspan></text></svg>
</html>
Related
I'm building a utility which will pull TIF files from blob storage and render them in html. Since it's just a utility, I will view them in Edge, which shows TIF files.
I can see the eighth example on this page renders fine. Meaning, this code works:
<img width=200 height=200
src="tiffdocument.tif" alt="">
However, my HTML, below, does not render anything:
<img src="https://atpblob.blob.core.windows.net/imagedata/94ae9802-4e42-4ba1-8955-11ac7c7e3509.tif" alt="" width="500" height="500">
If I go directly to the link in the source, it will download the image, so why won't it render?
Got it.
img does not work the way I was trying to use it. You have to explicitly use a GET request to pull the file.
For rendering the file cross-browser, I ended up using tiff.js.
The final html/js/css string I pushed to the browser ended up looking like this:
<!doctype html>
<html>
<head>
<title>TIF View</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.rawgit.com/seikichi/tiff.js/f03d7965/tiff.min.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', 'https://atpblob.blob.core.windows.net/imagedata/${blob}.tif');
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response});
var canvas = tiff.toCanvas();
document.body.appendChild(canvas);
};
xhr.send(null);
</script>
<style>
canvas {
min-height: 60px;
}
</style>
</body>
I copied the following code from a tutorial, but still couldn't figure out whether I made a mistake somewhere or whether it has to do with the browser support. Thanks in advance for pointing out to me on what happened!
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(dname)
{
if(window.XMLHttpRequest)
{
xhttp = new XMLHttpRequest();
}
else
{
xttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", dname, false);
xhttp.send();
return xhttp.responseXML;
}
function change(text)
{
var xmlDoc = loadXMLDoc("dom.xml");
var x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue = text;
var y = xmlDoc.getElementsByTagName("title");
for(i=0; i<y.length; i++)
{
document.write(y[i].childNodes[0].nodeValue+"<br />");
}
}
function remove(node)
{
xmlDoc = loadXMLDoc("dom.xml");
var y = xmlDoc.getElementsByTagName(node)[0];
xmlDoc.documentElement.removeChild(y);
alert("The element "+node+" has been removed!");
}
function prove(u)
{
var x = xmlDoc.getElementsByTagName(u);
for (i=0; i<x.length; i++)
{
document.write(x[i].childNodes[0].nodeValue);
document.write("<br />");
}
</script>
</head>
<body>
<input type="button" value="remove" onclick="remove('book')" />
<input type="button" value="prove it" onclick="prove('book')" />
</body>
</html>
------------Update-------------------------
Here's an XML file that may help:
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="cooking">
<title lang="en">Book 2</title>
<author>Giada</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="cooking">
<title lang="en">Book 3</title>
<author>Giada</author>
<year>2005</year>
<price>30.00</price>
</book>
</bookstore>
I think the problem might be because of document.write
Any document.write statement that runs after the page finishes loading
will create a new page and overwrite all of the content of the current
page.
Also there is a } missing after the for statement of prove function
Try using innerHTML on a div or some html element to overcome this issue.
Other than that I don't find any issues with your code
The script is looking for a file named "dom.xml"
If you put that file in the same directory as the page above, you'll get different results.
It looks like you are missing a bracket for the last function prove or the for loop.
Also you may want to declare
var xmlDoc = loadXMLDoc("dom.xml");
outside of each function, or add it to prove()
I have the follwoing code generated from netbean and some modification from this link.
The code works well after removing while it doesn't with it. What might be the issue? <!DOCTYPE html>
<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
**<!DOCTYPE html>**
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</h:head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
var dm_wms = new OpenLayers.Layer.WMS(
"Canadian Data",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{
layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true",
format: "image/png"
},
{isBaseLayer: false}
);
map.addLayers([wms, dm_wms]);
map.zoomToMaxExtent();
</script>
</body>
</html>
Maybe it's too late to answer this question, but it can help somebody else, so I'll try.
The cause of this behavior remains unknown to me, but I found the solution: you must assign a "position: fixed;" property to div#map. I haven't tested it with XML, but in HTML document it works properly.
Either the API you are using, or the way you are using it, relies on Quirks Mode in browsers (that is, a mode where the browsers intentionally deviate from standards and specifications, to simulate old buggy browsers).
By the way, independently of mode, Firefox reports the following error:
document.getElementsByTagName("head")[0] is undefined
Source: http://openlayers.org/api/OpenLayers.js
Line: 424
Besides, the page appears as empty in both modes. Is this what you are referring to as “doesn’t work”?
I am using opera widget to provide a link to my website on every page. How can i load data from external sources inside the widget?
I want to show data from sql database in the opera widget for desktop. Is there any way to do this? Is it possible to obtain data from a file in widget?
Please guide me...
It's not possible to access an external SQL database from a widget, however it is possible to read a local text file from a widget. The following simple example works for me on desktop with the latest Opera installed (11.52).
config.xml:
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://example.com/filereadertest" defaultlocale="en" width="400" height="500">
<name>File Reader Test</name>
<description>File Reader test widget</description>
<author href="http://example.com/author/">Me</author>
<feature name="http://xmlns.opera.com/fileio">
<param name="folderhint" value="home" />
</feature>
</widget>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background:#eee;
}
#output {
width:98%;
height:200px;
}
</style>
</head>
<body>
<div>
<p>Get the contents of a text file</p>
<p><textarea id="output"></textarea></p>
<p><button id="open">Open</button></p>
</div>
<script>
window.addEventListener('DOMContentLoaded', function() {
function openFile(evt) {
opera.io.filesystem.browseForFile("test", "", openFileCallback)
}
function openFileCallback(file) {
if (file) {
fstream = file.open(file, "r");
var output = document.getElementById("output");
output.value = "";
while (!fstream.eof) {
output.value += fstream.readLine("UTF-8");
}
}
}
document.getElementById("open").addEventListener("click", openFile, false);
}, false);
</script>
</body>
</html>
More documentation is here:
Widget File I/O API
Yes, but You able to use a HTML5 Web SQL Database (SQLite integrated into brouser) in Your opera widgets
When an SVG is directly included in a document using the <svg> tag, you can apply CSS styles to the SVG via the document's stylesheet. However, I am trying to apply a style to an SVG which is embedded (using the <object> tag).
Is it possible to use anything such as the following code?
object svg {
fill: #fff;
}
Short answer: no, since styles don't apply across document boundaries.
However, since you have an <object> tag you can insert the stylesheet into the svg document using script.
Something like this, and note that this code assumes that the <object> has loaded fully:
var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here
svgDoc.getElementById("where-to-insert").appendChild(styleElement);
It's also possible to insert a <link> element to reference an external stylesheet:
var svgDoc = yourObjectElement.contentDocument;
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
linkElm.setAttribute("href", "my-style.css");
linkElm.setAttribute("type", "text/css");
linkElm.setAttribute("rel", "stylesheet");
svgDoc.getElementById("where-to-insert").appendChild(linkElm);
Yet another option is to use the first method, to insert a style element, and then add an #import rule, e.g styleElement.textContent = "#import url(my-style.css)".
Of course you can directly link to the stylesheet from the svg file too, without doing any scripting. Either of the following should work:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg">
... rest of document here ...
</svg>
or:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<link href="my-style.css" type="text/css" rel="stylesheet"
xmlns="http://www.w3.org/1999/xhtml"/>
</defs>
... rest of document here ...
</svg>
Update 2015: you can use jquery-svg plugin for apply js scripts and css styles to an embedded SVG.
You can do this without javsscrpt by putting a style block with your styles inside the SVG file itself.
<style type="text/css">
path,
circle,
polygon {
fill: #fff;
}
</style>
If the only reason for using the tag to inlcude the SVG is that you do not want to clutter your source code with the markup from the SVG, you should take a look at SVG injectors like SVGInject.
SVG injection uses Javascript to inject an SVG file inline into your HTML document. This allows for clean HTML source code while making the SVGs fully styleable with CSS. A basic example looks like this:
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
Based on #Erik Dahlström answer, found a short path as follow:
let svg_objecst = document.getElementsByClassName('svg-object')
const forceStylingObjSvg = (svg)=>{
var svgDoc = svg.contentDocument;
svgDoc.firstElementChild.setAttribute('fill','blue')
}
Array.from(svg_objecst).forEach((obj)=>{
obj.addEventListener('load',()=>forceStylingObjSvg(obj))
})
You can create a custom element to inject the SVG file into your html.
This way, the SVG will be inlined, and you can easily apply styles using CSS.
This custom element will work just like the <object> or <embed> tags. The only difference is that <object> or <embed> tags injects the data in a shadow root, which prevents styling from the parent document, while <custom-svg> injects the data in the document itself.
I have tried too many ways to style my SVG images, and this was the easiest and more flexible way i have found so far.
<html>
<head>
<style>
.blue {
fill: blue;
}
.red {
fill: red;
}
</style>
</head>
<body>
<custom-svg class="blue" src="icon.svg"></custom-svg>
<custom-svg class="red" src="icon.svg"></custom-svg>
<script>
class CustomSVG extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
fetch(this.getAttribute('src'))
.then(response => response.text())
.then(text => {
this.innerHTML = text;
});
}
}
customElements.define('custom-svg', CustomSVG);
</script>
</body>
</html>
Notes
The SVG image must not have the "fill" attribute if you want, for example, change the fill color using CSS.
custom-svg works very good, for width style use this:
custom-svg svg{
max-width:64px;
max-height:64px;
}