How to avoid CSS scrubbing in Google Earth balloons - css

I've been doing a lot of looking around into this issue. I have a project I'm working on which basically represents a tour of different locations, each of which are generated dynamically, in a Google Earth web player. The problem is that the client requires that the content of each placemark representing a location be more stylish. Of course, I quickly discovered that Google Earth maliciously scrubs all CSS that you put in the KMZ file, which is very annoying. Many online discussion talked about putting the !important keyword in the CSS declaration or to use balloon style in some funny ways to prevent this. So far, I have not found a concrete solution.
I simply want to know if there is a hack or a method for Google Earth to not simply remove all of your CSS. That can include importing or inserting CSS from an external source after the page load and/or putting in a litle jQuery if nescessary.I will provide a code template for what a typical balloon should look like. Note that this actually works in the Google Earth program, but not online.
</Placemark>
<Placemark id="placemark1">
<name>City</name>
<description>
<![CDATA[<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<link href="http://localhost/Kmz_Files/player.css>
<div class="container" >
<span class = "title">My location</span>
<hr>
<div>
<a href="http://www.google.com" target="_blank">
<img src="http://www.google.ca/images/srpr/logo3w.png" width="250" />
</a>
</div>
<hr>
<p> My description</p>
</div>
</body>
</html>]]>
</description>
<Point>
<coordinates>-45, 45</coordinates>
</Point>
</Placemark>

Looks like you're talking about the Google Earth Plugin, not the Google Earth desktop application, which does not scrub JavaScript or CSS.
Looks like you want to use getBalloonHtmlUnsafe().

Related

How to display content for websites in Myanmar/Burmese font

I have a website which serves the Burmese people in burmese language. Problem is in Myanmar country Unicode format is not used instead they use Zawgyi format of encoding. The content on my website appears broken. How do I fix this issue.
This error is occuring in Iphones only
You can use font link and embed with font-family.All fonts correctly appear in any device or browser no need to put or install specific fonts in it's device.If you want to check another Myanmar fonts link.You can go there https://mmwebfonts.comquas.com/#how-to-use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href='https://mmwebfonts.comquas.com/fonts/?font=myanmar3' />
<link rel="stylesheet" href='https://mmwebfonts.comquas.com/fonts/?font=zawgyi' />
<style type="text/css">
.zawgyi{
font-family:Zawgyi-One;
}
.unicode{
font-family:Myanmar3,Yunghkio,'Masterpiece Uni Sans';
}
</style>
</head>
<body>
<h3>This is for ZawGyI font</h3>
<p class="zawgyi">
သည္စာသည္ ေဇာ္ဂ်ီ ျဖင့္ေရးေသာစာျဖစ္သည္
</p>
<h3>This is for unicode (myanmar3) font</h3>
<p class="unicode">
သည်စာသည် unicode ဖြင့်ရေးသောစာဖြစ်သည်
</p>
</body>
</html>
knayi is a good library to convert or detect (Unicode & Zawgyi) fonts.
You can load the script via CDN or NPM and use kanayi.fontConvert();
// Expected paramaters
kanayi.fontConvert(content, targetFontType , orignalFontType)
Example
knayi.fontConvert('မဂၤလာပါ', 'unicode', 'zawgyi') // မင်္ဂလာပါ
knayi.fontConvert('မဂၤလာပါ', 'unicode') // မင်္ဂလာပါ
Btw, I made a wordpress widget with kanayi.
https://github.com/ronaldaug/auto-font
Please add 2 or three extra fonts for font fall back
.zawgyi{
font-family:Zawgyi-One,second font,third font;
}
Like this if font is not supported the second one will work if not then third on different platform.

Add custom icons with Material Icons

I am using the official google material icons: https://material.io/icons/
I want add some icons created by me, in svg.
how can I do it?
You will need to create your own web font.
If you've already got SVGs then you can possibly use something like https://icomoon.io/app/ to create one. I've not used it so can't help any further with that.
If not, you'll need to find a font authoring tool that exports to woff or woff2 or whatever web font format you need. (I think the material one is woff2)
About more it enter link description here
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<title></title>
</head>
<body>
<i class="material-icons md-light md-inactive">face</i>
</body>
</html>

XHTML Strict 1.0 .. unlimited errors

i've checked my XHTML Strict 1.0 code and i faced a lot of errors the validator : validator.w3.org please can you help me fixing errors
code :
<!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" lang="en" xml:lang="en"> <head>
<title> my trip around the US on my very own Segway </title>
</head>
<body>
<h1> Segway'n USA </h1>
<p>
Documenting my trip around the US on my
very own Segway
</p>
<h2> August 20, 2005 </h2>
<img src="images/segway2.jpg"/ alt="segway"/>
<p>
Well I made it 1200 miles already, and I passed
through some interesting places on the way:
</p>
<ol> <!-- ordered list -->
<li>Walla Walla, WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Why, AZ</li>
<li>Truth or Consequences, NM</li>
</ol>
<h2> July 14, 2005 </h2>
<p>
I saw some Burma Shave style signs on the side of the
road today :
</p>
<blockquote>
Passing cars,
When you can't see, May get you,
A glimpse,
Of eternity.
</blockquote>
<p>
I definitely won't be passing any cars.
</p>
<h2> June 2, 2005 </h2>
<img src="images/segway1.jpg"/ alt="segway">
<p>
My frst day of the trip! I can't believe I fnally got
everything packed and ready to go. Because I'm on a Segway,
I wasn't able to bring a whole lot with me: cellphone, iPod,
digital camera, and a protein bar. Just the essentials. As
Lao Tzu would have said, <q>A journey of a thousand miles begins
with one Segway</q>
</p>
</body>
</html>
full code link : http://pastebin.com/L95bt2Yu
thanks guys
Don't use the validator first (use the XML parser first) and don't use old versions of XHTML. You should use HTML5 for HTML and XHTML for the XML parser which will catch about 80% of rendering errors right off the bat and streamline your development. So that means use XHTML5 for the best of both worlds. To use HTML5 you need to use the HTML5 elements. To use the XML parser you need to serve the page as application/xhtml+xml. Locally you need to save a file with a .xhtml extension. Do not let the overwhelming negative attitude towards XHTML undermine the usefulness of the XML parser, the best use the best tools and ignore the masses when they're wrong. As long as you use it in conjunction with HTML5 then you're doing the most you can do and that puts you far ahead of most people.
For servers you need to do content negotiation. When you get to PHP use the following before you send non-header data (e.g. any HTML/echo):
if (stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
header('Content-Type: application/xhtml+xml');
}
Until you get to that point use the a program like WinMerge to determine how code is different if for full pages until you're able to narrow it down.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML5 Example</title>
<meta name="description" content="Manage domain accounts." />
<meta name="keywords" content="example" />
<meta name="language" content="en" />
<meta name="robots" content="noarchive, noindex, nofollow" />
<base href="https://localhost/" />
<link href="blog/rss/" rel="alternate" title="Blog RSS Feed" type="application/rss+xml" />
<link href="favicon.ico" rel="icon" />
<script defer="defer" src="scripts/index.js" type="application/javascript"></script>
</head>
<body>
<h1><span>Example Header, use h1 element only once per page</span></h1>
<main>
<p>Example paragraph.</p>
<ol>
<li><span>Bullet One</span></li>
<li><span>Bullet Two</span></li>
<li><span>Bullet Three</span></li>
</ol>
<ul>
<li><span>Bullet</span></li>
<li><span>Bullet</span></li>
<li><span>Bullet</span></li>
</ul>
<blockquote>
<p>The <code>blockquote</code> element may contain block-level elements.
The <code>q</code> element may only contain inline elements.</p>
</blockquote>
</main>
<aside>
<img alt="Alternative text displayed only if image does not load" src="example.png" />
</aside>
</body>
</html>

Html anchor in another html

Suppose I have two html files footer.html and main.html. The footer contains a reference to the top of a page as follows:
<!-- footer.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<footer>
<small>To top</small>
</footer>
</body>
</html>
The main.html file embeds the footer by using the <object> tag (see note 1) as shown below. There can be several files similar to main.html. Because of this <a href="page#header"> may not be used.
<!-- main.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="header">...</div>
<div id="content"> Long content ... </div>
<object id="footer" type="text/html" data="footer.html"></object>
</body>
</html>
Question: Is it possible to refer to the anchor from the footer to main without using javascript, php etc?
Note 1: The <object> tag can be used to embed another html, although without a relation:
You can also use the <object> tag to embed another webpage into your HTML document.
from http://www.w3schools.com/tags/tag_object.asp
The same can be done using <iframe> or <embed> instead of <object>, but the issue remains.
Is it possible to refer to the anchor from the footer to main without using javascript, php etc?
No, it isn't.
If you use a relative URL, then it will be relative to the document that the link appears in (i.e. the footer).
If you use an absolute URL, then you have to specify which document you want to link to the top of (and since multiple documents will embed the footer, you can't do that).
You've ruled out generating the URL programatically with JavaScript.
Thanks to all for the comments and answers. Indeed, this approach seems not to work due to a missing relation between html files. In other words, footer.html cannot refer to the inside of main.html. Instead, I modified the structure, so that the main includes the footer directly and the content is embedded by using an <iframe> as follows:
<!-- main.html -->
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="header">...</div>
<iframe id="content" name="contentframe" src="content.html"></iframe>
<footer id="footer">
<small>To top</small>
</footer>
</body>
</html>
This solves the issue and works without JS, PHP or the like independently of the page loaded into the <iframe>. That is, it simply jumps to top keeping the contents of the loaded page. Eventually, there is one main and multiple long content pages which are loaded into this main. Tested with FF and IE.

Responsive Bootstrap page not working in IE8 despite implementing response.js and css3-mediaqueries.js

After struggling to get a Bootstrap responsive page to work in IE8, I've simplified it incredibly, creating a very basic page that should only display the size of the browser using the "visible" classes, but still cannot get the page to render properly in IE8. I've read where respond.js must be on the same subdomain as the CSS, and fixed that, but it still doesn't work. After much trial and error, reading through documentation (getbootstrap.com, responsejs.com, etc.), and reading some threads on stackoverflow, I thought I'd post my issue.
Here's the code, which is supposed to display the size of the browser, The page is hosted in a landing page, marketing automation program, called Eloqua, hence the strange and lengthy URLs for the CSS and JS files:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Bootstrap -->
<link href="http://images.response.test.com/Web/test/{08fa83ba-e64a-401e-a642-8bc74434d750}_bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://images.response.test.com/Web/test/{5cdf751f-5097-4163-a9f3-b03c33408410}_html5shiv.js"></script>
<script src="http://images.response.test-mail.com/Web/test/{7caa6bb7-1d4d-422e-bfaa-e4f4afdb8da1}_respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>IE8 Test</h1>
<p>The Bootstrap grid type should be displayed below: </p>
<div class="container">
<p class="visible-lg">Large grid is being displayed. The grid stacks horizontally < 1200px. </p>
<p class="visible-md">Medium grid is being displayed. The grid stacks horizontally < 992px. </p>
<p class="visible-sm">Small grid is being displayed. The grid stacks horizontally < 768px. </p>
<p class="visible-xs">Extra small grid is being displayed. This grid is always horizontal. </p>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://images.response.test-mail.com/Web/test/{08fa83ba-e64a-401e-a642-8bc74434d750}_bootstrap.min.css"></script>
<script src="http://images.response.test-mail.com/Web/test/{4f3edd38-e24f-4f56-8336-dbb33cc5567b}_css3-mediaqueries.js"></script>
</body>
</html>
Thanks for any help.
In the GetBootstrap.com docs it reads, essentially, that any css used by Respond.js must be a relative path from the root of the html document, so you can't use absolute paths in your css url OR you can set up a proxy as per the Respond.js documentation.
Respond.js works by requesting a pristine copy of your CSS via AJAX,
so if you host your stylesheets on a CDN (or a subdomain), you'll need
to upload a proxy page to enable cross-domain communication.
DOCS: https://github.com/scottjehl/Respond

Resources