Make a html or xhtml page with svg displayed in local - html

I have a html page which have a svg. I use Chrome 54.0.2840.98 (64-bit) as web browser in Mac OS.
The svg is displayed well with localhost, whereas it is not displayed when i specify file:///Users/softtimur/... in the browser path.
I have searched some threads, some suggested to change the page to xhtml, I did it. And make the header as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
But the svg is still not shown in local.
Could anyone help?
PS: Here is the file. After downloading it, you may need to change the name test.xhtml.txt to test.xhtml.
Edit: This thread mentions that Chrome may block the access to local documents (Object in your case) from remote scripts (svg-pan-zoom). Is there a way that I rewrite the page to find a workaround? Or could I do something about Chrome settings? I really don't want to use localhost.

As Chainat and I discovered (in comments), the key is to write <script src="http://d3js.org/d3.v3.min.js"></script> (over <script src="d3js.org/d3.v3.min.js"></script>) if one wants to use external d3. Then even a html file without <html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> works...

First of all.
SVG's Doctype will not start with html.
svg doctype is
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Here is the link for "Doctype's" [https://www.w3.org/QA/2002/04/valid-dtd-list.html][1].
Could you conduct another test, like opening SVG file from folder, if windows then windows explorer, by double clicking the file. It should open in your default web browser.
I have not seen this when I open my files "file:///", instead I see Drive "C:/" like this.

Related

My HTML page correctly references an image but it won't display?

I uploaded a "test.html" page to my website, in the root folder, as well as a "filmandmusic.jpg" image (also in the root folder). The image is displaying as a broken jpg, even when I go to the URL of the image itself.
What am I doing wrong?
http://www.bobbymcglynn.com/test.html
Note: this only happens after uploading the site, I'm using Dreamweaver to design my site and everything looks fine when I'm editing the page locally. I'm uploading with FileZilla.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<p>This is a test page. The "film and music" image should display itself below.</p>
<img src="filmandmusic.jpg" height="75" width="525"/>
</body>
</html>
Your HTML has nothing wrong in that.
if you go to your website root folder
and then open your image, you will see that this image has this form so the uploaded image may be wrong
It Show that the image contains error. Try Uploading a new image.
The error may have been caused due to bad connection problem or the image may be initially damaged.
You probarly dindn't linked the image. Try to fill in the right src path. Maybe it isn't jpg but png. You never now.

Does HTML5 "download" attribute require any server side configuration?

Hell friends,
I am running a very basic example of HTML5 download attribute to download a mp3 file.
That example is working on Chrome but not working on FF (24).
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>HTML5 download Attribute Example</title>
<meta name="description" value="" />
</head>
<body>
Download file
</body>
</html>
in FF it is playing that mp3 rather then downloading it.
How ever other examples of download is working on that FF from other demo sites like http://davidwalsh.name/demo/html5-download.php is working.
FireFox has a default setting to play mp3 files.
You can enter about:config in FF:s address bar to access this setting.
The setting itself is named "media.windows-media-foundation.enabled"
So in the end it's a user configuration option whether to download or play - even if FireFox makes a default decision for you. I think, in FireFox, you can "long click" to download the file instead of playing it.
Looking at the specification I think the download attribute should override the FireFox option, so if this still happends I think FireFox is not behaving the way it should.

disable browser bar when page is loaded

Do you know a way to disable any message bar (Google translate, ff help bar question,...) that appears when loading a site page?
I have noticed that for some site Google translate is not pop up, although they don't use code as <meta name="google" value="notranslate">? Is there any trick in html code, or is depends of html definition:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
That affect the browser bar?
Well, if a browser company decide to 'freak-out' or what-ever do something beside showing html content, you can't do anything but try another browser. Like, if googleChrome add publicity to their 'software' .. you'd need to 'hack' the software in order to remove components from it.
Some softwares offer 'web' extensions such has microsoft IE
<meta http-equiv="imagetoolbar" content="no"> etc etc..
Search the web for 'browser specific meta', it might help.
carry on
What you want to do is check that your document is the top-most frame and if not, 'break free' from being displayed in a frame/iframe of another location. Add this code to your documents in the HEAD section:
<script language="JavaScript" type="text/javascript">
<!--
if (top.location != location) {
top.location.href = document.location.href ;
}
-->
</script>
This won't stop Google Translate from displaying translated version of your page, for example, but it will make your document 'break free' out of the frame that Google sets up (with the ability to change a few settings and such). Hope that's what you were looking for. If you have access to your web server configuration, then also check for how to prevent linking in frame and iframe from other domains for your web server. The Apache code for that would be:
#block frame and iframe linking from other domains
Header always append X-Frame-Options SAMEORIGIN
Not sure all browsers respect such headers, though and you might be forced to use mod_rewrite rules to achieve what you're after.
Cheers!

What browsers support the favicon link tag?

Does anyone what browsers support using the link tag for the favicon, as opposed to at the root of the site? I am considering doing that as an alternative to hosting the files at the root of each site because of an issue I'm having an issue in doing so.
The doctype on my two sites are:
First site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
Second site:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
The way to link to a favicon, which should be supported by all major browsers is:
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
According to this Wikipedia article, this way of referencing the icon is supported by Internet Explorer, Chrome, Firefox, Opera and Safari.
According to Microsoft, favicons has been supported since IE7.
Side-note
I believe using <link> instead of just placing it in the root is generally the best strategy anyway. That way you are in control of what icon is displayed. Let's say you want to change the icon sometime in the future. When using a link you can just rename the icon, forcing the browser to download the new icon. Otherwise there is a risk that the user will keep seeing your old icon, as it is loaded from the browser cache.

Firefox doesn't show my CSS

I have a strange problem, Firefox 3.6.3 doesn't show the CSS of the page I'm doing, but Internet Explorer 8 does.
I have tried at home and at one of my friend's home, and it happens in both. But, if I go to the Firefox Web Developer toolbar (i have it installed) and select CSS=>Edit CSS, then the styles appears appears in the page and in the editor! As soon I close it, they disappears again. I have no idea what the problem is :(
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Students</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
I've validated my two css files with the W3C CSS validator and there are no problems.
Do you have any idea about what could be the problem?
thanks in advance.
I'll bet a beer that the CSS file is not sending the content-type: text/css header. This causes style sheets to not work in Firefox. IE will ignore the content type.
If this is the reason, you should get a warning in the Firefox error console. You can use Firebug's net tab to verify the content-type sent.
As to why the content type isn't sent, this would be a server issue I think. It usually happens when the CSS file is a .php or .asp file that doesn't get assigned the correct content type automatically by the server when delivering.
Navigate to your css file directly in Firefox (http://www.yoursite.com/style.css) and look at your Page Info (Tools >> Page Info).
If the css file is being submitted as text/html, it's an incorrect MIME type (should be text/css) and you will need to contact your server/host administrator to fix this for you if you don't have access to that.