disable browser bar when page is loaded - html

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!

Related

Open Graph share debugger scrapes empty html

I'm trying to set up Open Graph meta tags for a website. When I access the site normally using a browser and inspect the source, the tags are there. However, they don't show up when I use the OG debugger.
The site that I'm developing is here spurafrika-org.vercel.app (Next.js site). It's replacing the original site here: spurafrika.org (WordPress site).
When I use the See exactly what our scraper sees for your URL feature, I get this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body><p>ÿþ</p></body>
</html>
See for yourself here. Vastly different from my actual source for my websites.
I originally thought it might have been a Vercel/Next.js issue, but when I discovered it also happening on the WordPress site, I was very confused: see this. I've checked other sites developed with Next.js and WordPress - the meta tags work fine on the debugger.
Another point of confusion is that the debugger tool seems to be able to pick up that on my Next.js site I've listed https://spurafrika.org as its canonical URL, which it can only tell through my og:url tag. Yet when I view what the debugger supposedly sees, it shows the above empty HTML snippet.
I thought perhaps it might have been an encoding or parsing issue, but I've validated my HTML source using several tools and there are no problems.
I'm stumped. Anyone know why this is happening?
I copied your code against a code sandbox - https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fkzi2c.csb.app%2F
Initially keeping the og:url as https://spurafrika.org/ caused warnings and og:description not getting picked up, once i pointed it to the actual url it all got fixed
Change the og:url to the right url may fix it, give it a shot and let us know.

Make a html or xhtml page with svg displayed in local

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.

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.

Why does Chrome incorrectly determine page is in a different language and offer to translate?

The new Google Chrome auto-translation feature is tripping up on one page within one of our applications. Whenever we navigate to this particular page, Chrome tells us the page is in Danish and offers to translate. The page is in English, just like every other page in our app. This particular page is an internal testing page that has a few dozen form fields with English labels. I have no idea why Chrome thinks this page is Danish.
Does anyone have insights into how this language detection feature works and how I can determine what is causing Chrome to think the page is in Danish?
Update: according to Google
We don’t use any code-level language information such as lang
attributes.
They recommend you make it obvious what your site's language is.
Use the following which seems to help although Content-Language is deprecated and Google says they ignore lang
<html lang="en" xml:lang="en" xmlns= "http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<meta name="google" content="notranslate">
<meta http-equiv="Content-Language" content="en">
If that doesn't work, you can always place a bunch of text (your "About" page for instance) in a hidden div. That might help with SEO as well.
EDIT (and more info)
The OP is asking about Chrome, so Google's recommendation is posted above. There are generally three ways to accomplish this for other browsers:
W3C recommendation: Use the lang and/or xml:lang attributes in the html tag:
<html lang="en" xml:lang="en" xmlns= "http://www.w3.org/1999/xhtml">
UPDATE: previously a Google recommendation now deprecated spec although it may still help with Chrome. : meta http-equiv (as described above):
<meta http-equiv="Content-Language" content="en">
Use HTTP headers (not recommended based on cross-browser recognition tests):
HTTP/1.1 200 OK
Date: Wed, 05 Nov 2003 10:46:04 GMT
Content-Type: text/html; charset=iso-8859-1
Content-Language: en
Exit Chrome completely and restart it to ensure the change is detected. Chrome doesn't always pick up the new meta tag on tab refresh.
I added lang="en" to the doctype declaration, added meta tags for charset utf-8 and Content-Langauge in the HTML header, specified charset as utf-8 and Content-Language as en in the HTTP response headers and it did nothing to stop Chrome from declaring my page was in Portuguese. The only thing that fixed the problem was adding this to the HTML header:
<meta name="google" content="notranslate">
But now I've prevented users from translating my page that is clearly in English to their own language. Poor job, Chrome. You can be better than this.
Specify the default language for the document, then use the translate attribute and Google's notranslate class per element/container, as in:
<html lang="en">
...
<span>English</span>
Explanation:
The accepted answer presents a blanket solution, but does not address how to specify the language per element, which can fix the bug and ensure your page remains translatable.
Why is this better? This will cooperate with Google's internationalization versus shut it off. Referring back to the OP:
Why does Chrome incorrectly determine page is in a different language and offer to translate?
Answer: Google is trying to help you with internationalization, but we need to understand why this is failing. Building off of NinjaCat's answer, we assume that Google reads and predicts the language of your website using an N-gram algorithm -- so, we can't say exactly why Google wants to translate your page; we can only assume that:
There are words on your page that belong to a different language.
Marking the containing element as translate="no" and lang="en" (or removing these words) will help Google to correctly predict the language of your page.
Unfortunately, most people reaching this post won't know what words are causing the trouble. Use Chrome's built-in "Translate to English" feature (in the Right-Click context menu) to see what gets translated, you may see unexpected translations like the following:
So, update your html with the appropriate translation tags until the Google Translation of your page changes nothing -- then we should expect the popup to go away for future visitors.
Won't it be a lot of work to add all these extra tags? Yes, very likely. If you are using Wordpress or another Content Management System then look in their documentation for quick ways to update your code!
Without knowing what the text was, perhaps the ngram detection is being tricked by the content of your page.
http://googleresearch.blogspot.com/2006/08/all-our-n-gram-are-belong-to-you.html
https://en.wikipedia.org/wiki/N-gram
Chromium thinks this page in Filipino: http://www.reyalvarado.com/portfolio/cuba/
Notes: There is pretty much no text on the page except for the owner's name and the menu items. Menu items are dynamically replaced with images by FLIR.
The HTML declares the page as US English:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
Try including the property xml:lang="" to the <html>, if the other solutions don't work:
<html class="no-js" lang="pt-BR" dir="ltr" xml:lang="pt-BR">

Meta-refresh doesn't work?

I have a page using something along the lines of
<meta http-equiv="refresh" content="0;url=http://example.com/" />
but for certain users on a certain workstation this doesn't work. The is in IE. Is there something wrong with cookies or a setting somewhere which would cause this to fail? I never heard of such a thing.
The problem is that when IE sees this:
<meta http-equiv="refresh" content="0;http://www.example.com" />
it expects the contents attribute to contain a number. The only time IE will check for a URL is if the content attribute contains "URL=" so the redirect that is most usable in all browsers is this:
<meta http-equiv="refresh" content="0;URL=http://www.example.com" />
The above example would redirect immdetiately but if you changed the 0 for another number it would wait that many seconds. Hope this all makes sense, it should work just fine but I still think my first idea was the better one.
There is a security setting in internet explorer that does not allow meta tag refresh. It is under the Security tab, then choose Custom Level and the Meta Tag Refresh under Miscellaneous. If that is disabled, it would stop the meta refresh from working.
Aside from being able to disable it selectively, it is automatically disabled if you set IE's security level to 'High' [observed in IE9].
is it a really old version of IE? if so, try:
<meta http-equiv="refresh" content="0;url=http://example.com/"> </meta>
It needs a white space. HTML editor will complain, but just ignore it.
Check out this solution. It handles both javascript and meta-refresh at the same time:
Meta-refresh and javascript
The META tag is not an empty tag and does not have a closing tag in HTML, only in XHTML. (If you are really are sending XHTML, it may not work right on older versions of IE anyway, there are only workarounds to send XHTML to older IE versions.)
Try:
<meta http-equiv="refresh" content="0;url=http://example.com/">
W3 Schools META Tag Description
You might also try:
Checking the major and minor versions of IE. You can do this on the help->about menu option.
IE has historically gotten all confused by filenames and MIMEtypes. Make sure that you are sending your HTML as an htm or html extension file, and that those filetypes are set up on your server to send text/html mimetype.
Make sure your server isn't sending a conflicting meta refresh http header.
In case anyone tries to use meta refresh to redirect to new URL in Facebook applications ( either Page Tab app or IFRAME app ), the tag is disabled by Facebook somehow.
Workaround is:
<script>
top.window.location = 'http://example.com';
</script>
Remember to target "top", as Facebook applications are in IFRAME.
Just a wild guess: maybe there are some adblockers installed on those machines where the redirect does not work.
Can't think of any other reason why this common technique works on some machines while it fails on others for you.