I'm just trying to run this code I got from Vtk.js documentation examples:
<!DOCTYPE html>
<html>
<head>
<title>vtk</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/#babel/polyfill#7.0.0/dist/polyfill.js"></script>
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script type="text/javascript">
import 'vtk.js/Sources/favicon';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkSTLReader from 'vtk.js/Sources/IO/Geometry/STLReader';
</script>
</body>
</html>
But I got a blank page and the console shows me the error:
SyntaxError: Unexpected string literal 'vtk.js/Sources/favicon.'
import call expects exactly one argument. I think my error comes from the my first import.
Thanks in advance
You can run vtk.js on a html page like this:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="https://unpkg.com/#babel/polyfill#7.0.0/dist/polyfill.js"></script>
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script type="text/javascript">
var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
var actor = vtk.Rendering.Core.vtkActor.newInstance();
var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
var stlReader = vtk.IO.Geometry.vtkSTLReader.newInstance();
</script>
</body>
</html>
Related
I'm trying to give my html an css inline style. But this style gets ignored.
This is the HTML string that I'm using for webView.loadHTMLString(htmlBelow, baseURL: Bundle.main.bundleURL)
let fontsize = 16 //This is an dynamic variable
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<meta http-equiv=\"X-UA-Compatible\"content=\"ie=edge\">
<title>Document</title>
<style>
​html {
font-size:\(fontsize)px; */THIS DOESN'T WORK/*
}
</style>
<link rel=\"stylesheet\" href=\"\style.css\">
<script src=\"jquery-3.4.1.min.js\"></script>
<script src=\"script.js\"></script>
</head>
<body>
<div class=\ "sqr-tree-level\"> \(restOfHtml) </div>
</body>
</html>
I'm trying to set the fontsize dynamically.
When I change the font-size in my css file it works, but I want to set it dynamically. That's why I wanna do it like this.
This is how my document.head.innerHTML looks like
For future reference the fix here was to put the styling in to the <body> tag instead of in the head <style> tag.
<body style=\"font-size:\(fontsize)px;\">
In this tutorial it says:
"Opening the spec runner in a web browser will give the expected outcome:"
But does not mention how to do it. How can I do it?
Example code:
var My = {
sqrt: function(x) {
if (x < ) throw new Error("sqrt can't work on negative number");
return Math.exp(Math.log(x)/2);
}
};
Test code:
describe("sqrt", function() {
it("should compute the square root of 4 as 2", function() {
expect(My.sqrt(4)).toEqual(2);
});
});
There should be a SpecRunner.html file that references jasmine, your code, and your spec files. Looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.2</title>
<link rel="shortcut icon" type="image/png" href="libs/jasmine-2.0.2/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="libs/jasmine-2.0.2/jasmine.css">
<script type="text/javascript" src="libs/jasmine-2.0.2/jasmine.js"></script>
<script type="text/javascript" src="libs/jasmine-2.0.2/jasmine-html.js"></script>
<script type="text/javascript" src="libs/jasmine-2.0.2/boot.js"></script>
<script type="text/javascript" src="libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="libs/jasmine-jquery.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src=""></script>
<!-- include spec files here... -->
<script type="text/javascript" src=""></script>
</head>
<body>
</body>
</html>
I have an angular 2 app that I built using the angular cli generator: https://github.com/EdmundMai/angular-2-playing
This is the generator: https://github.com/angular/angular-cli
I ran ng serve and now I have a page I can see when I visit http://localhost:4002
My dist/index.html file in the angular 2 app looks like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularTwo</title>
<base href="/">
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="http://carbon.ec2.crowdtap.com/component_importer.js"></script>
</head>
<body>
<angular-two-app>Loading...</angular-two-app>
<script src="vendor/es6-shim/es6-shim.js"></script><script src="vendor/reflect-metadata/Reflect.js"></script><script src="vendor/systemjs/dist/system.src.js"></script><script src="vendor/zone.js/dist/zone.js"></script>
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
</body>
<script>
window.carbon.importComponents({ components: ['ct-button', 'ct-button/ct-button-link', 'ct-dialog', 'ct-progress'] });
</script>
</html>
In my rails view, I am trying to include these JS files:
<script src="http://localhost:4200/vendor/es6-shim/es6-shim.js"></script>
<script src="http://localhost:4200/vendor/reflect-metadata/Reflect.js"></script>
<script src="http://localhost:4200/vendor/systemjs/dist/system.src.js"></script>
<script src="http://localhost:4200/vendor/zone.js/dist/zone.js"></script>
<script src="http://localhost:4200/system-config.js"></script>
<script src="http://localhost:4200/main.js"></script>
However, it's not working and complaining that main.ts:1Uncaught ReferenceError: require is not defined
Is there a proper way of doing this?
You need to change the <base href="/"> tag (line 6) in the generated
dist/index.html
to <script>document.write('<base href="' + document.location + '" />');</script>
I have the following markup in an MVC 3 Razor view. As is, the ComboBox renders properly, but doesn't drop down when I click the dropdown arrow. If I remove the jQuery validate script references that are added to the view by the create view template, all works. What could be wrong here?
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
function provinceChanged() {
var cityCombo = $('#Cities').data('tComboBox');
cityCombo.loader.showBusy();
$.get(url, { provinceId: e.value }, function (data) {
cityCombo.dataBind(data);
cityCombo.loader.hideBusy();
cityCombo.enable();
});
}
</script>
...
<div class="editor-field">
#(Html.Telerik().ComboBox()
.Name("Provinces")
.SelectedIndex(1)
.BindTo(new SelectList(Model.ProvinceList, "ProvinceId", "Name"))
.ClientEvents(events => events.OnChange("provinceChanged"))
)
</div>
Here is how reference jQuery, in my master layout:
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Styles/Blueprint/screen.css") rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css"))
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>
RESOLVED: I have no idea what else changed, but after putting the jQuery Validate references back just for a code sample, my code now works with them as well.
Check this. You are probably using an older version of jquery.validate.js which conflicts with jQuery.fn.delegate.
I use inplacericheditor plugin and tiny_mce
Before asset_packager usage, this is how I include the files and they work well
<script src="/javascripts/patch_inplaceeditor_1-8-2.js" type="text/javascript">
</script>
<script src="/javascripts/patch_inplaceeditor_editonblank_1-8-2.js" type="text/javascript" </script>
<script src="/javascripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="/javascripts/tiny_mce_init.js" type="text/javascript"></script>
<script src="/javascripts/inplacericheditor.js" type="text/javascript"></script>
My asset_packager.yml section looks like this for the above files:
tinyeditor:
patch_inplaceeditor_1-8-2
patch_inplaceeditor_editonblank_1-8-2
tiny_mce/tiny_mce
tiny_mce_init
tiny_mce/langs/en
tiny_mce/themes/advanced/editor_template
tiny_mce/themes/advanced/langs/en
tiny_mce/plugins/save/editor_plugin
tiny_mce/plugins/autoresize/editor_plugin
tiny_mce/plugins/paste/editor_plugin
tiny_mce/plugins/preview/editor_plugin
tiny_mce/plugins/table/editor_plugin
tiny_mce/plugins/contextmenu/editor_plugin
tiny_mce/plugins/emotions/editor_plugin
inplacericheditor
When I include the asset_packaged file and load the page (in production)
I get the following errors:
"Ajax.InPlaceEditor is undefined"
"Ajax.InPlaceRichEditor is not a constructor"
Can anyone shed some light on where I am going wrong or share a better way to asset_package tinymce?
Thanks!
Ajax required prototype.js
try Following just after tiny_mce_init.js
<%= javascript_include_tag :defaults %>
<script src="/javascripts/inplacericheditor.js" type="text/javascript"></script>