I am trying to develop a VS Code extension that will display some graphs i made using CanvasJS. The issue I am facing is as follows: I do not know how to run the HTML file without using "go Live" or something like that.
I suspect what I might have to do is make a command that, when inputted, runs the correct HTML file. I just have simply never done anything like this. Would I perhaps have to somehow caputure what commands are used to normally run the HTML file? and then somehow link a command in the extension to the commands that run the HTML file?
any advice on how to do this would be greatly appreciated. Or perhaps information on anything similar to it at all.
You cannot "run" an HTML file. You have to return the HTML content in text form to the webview panel as demonstrated in this webview provider. Such HTML content can load scripts and generate graphs as shown in this code. Here's the main part of it:
const diagram = `<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
${this.generateContentSecurityPolicy()}
${this.getStyles(webView)}
<base target="_blank">
<script src="${graphLibPath}"></script>
<script>
let parseTreeRenderer;
let graphExport;
</script>
</head>
<body>
<div class="header"><span class="parse-tree-color"><span class="graph-initial">Ⓟ</span>arse Tree</span>
<span class="action-box">
Tree
<span class="switch">
<span class="switch-border">
<input id="switch1" type="checkbox" onClick="parseTreeRenderer.toggleTreeType(this)"/>
<label for="switch1"></label>
<span class="switch-handle-top"></span>
</span>
</span>
Cluster
Horizontal
<span class="switch">
<span class="switch-border">
<input id="switch2" type="checkbox"
onClick="parseTreeRenderer.toggleOrientation(this)"/>
<label for="switch2"></label>
<span class="switch-handle-top"></span>
</span>
</span>
Vertical
<a onClick="parseTreeRenderer.changeNodeSize(0.9);">
<span class="parse-tree-color" style="font-size: 120%; font-weight: 800;
cursor: pointer; vertical-align: middle;">-</span>
</a>
Node Size
<a onClick="parseTreeRenderer.changeNodeSize(1.1);">
<span class="parse-tree-color" style="font-size: 120%; font-weight: 800; cursor: pointer;
vertical-align: middle;">+</span>
</a>
Save to SVG
<a onClick="graphExport.exportToSVG('parse-tree', '${basename(uri.fsPath)}');">
<span class="parse-tree-save-image" />
</a>
</span>
</div>
<svg></svg>
<script type="module">
import { ParseTreeRenderer } from "${rendererScriptPath}";
import { GraphExport } from "${exportScriptPath}";
// Register a listener for data changes.
window.addEventListener("message", (event) => {
switch (event.data.command) {
case "updateParseTreeData": {
parseTreeRenderer.loadNewTree({ parseTreeData: event.data.treeData });
break;
}
default:
}
});
parseTreeRenderer = new ParseTreeRenderer();
graphExport = new GraphExport();
parseTreeRenderer.loadNewTree({
parseTreeData: ${JSON.stringify(graph)},
useCluster: ${clustered.toString()},
horizontal: ${horizontal.toString()},
width: 1000,
height: 1000,
initialScale: 0.75,
initialTranslateX: ${horizontal ? 200 : 500},
initialTranslateY: ${horizontal ? 400 : 50},
});
parseTreeRenderer.initSwitches();
</script>
</body>
</html>`;
Related
I am developing an application, and I need to parse JSON and display it. I used the getJSON() function, which is working fine, and I'm using $(class_name).html(text). When I view the isolated HTML file in the browser, minus the CSS formatting, I can see the text, but when I run the application, and navigate to the page, the text (with the CSS formatting) does not show up. Even when I Inspect the element, the text is not present in it. Why is this happening?
Thank you
What console.log(data); contains:
schools:"Schools"
search-school:"Search school by number or name"
student-det:"Student Details"
students:"Students"
summary:"Summary"
The actual JSON:
{
"schools":"Schools",
"search-school":"Search school by number or name",
"student-det":"Student Details",
"students":"Students",
"summary":"Summary"
}
$.getJSON("./lang/en.json", function(data) {
$(".SecondTopBarTitleProperties").html(data.schools);
});
.SecondTopBarProperties
{
background-color:#333333;
height:40px;
}
.SecondTopBarTitleProperties
{
color:white;
font-size:16px;
margin-top:6px;
margin-left:6px;
font-family: Helvetica;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container SecondTopBarProperties">
<label class="SecondTopBarTitleProperties"></label>
<button data-bind="click:NewSchool" type="button" class=" pull-right btn btn-primary btn-default btn-sm" style="margin-right: 10px;margin-top: 2px; margin-bottom: 2px;">Add School</button>
</div>
Before the "Add School" button, it's supposed to display "Schools".
Plain HTML:
Formatted:
Any help please?
you need to include your styles into your html code i prepared this fiddle
https://jsfiddle.net/vmf3e3mf/4/
$(function(){
var data = { name = "hey" }
$('.SecondTopBarTitleProperties').html('<span style="color:red">'+data.name+'</span>')
})
You need to wait with the execution of your JS until the DOM is ready, else your JS can't manipulate the DOM elements, because they do not yet exist.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
// Code inside this block will be executed when the DOM is ready
var data = {
schools: "Schools"
};
$(".SecondTopBarTitleProperties").html(data.schools);
}); // DOM ready
</script>
<div class="container SecondTopBarProperties">
<label class="SecondTopBarTitleProperties">
</label>
<button data-bind="click:NewSchool" type="button" class=" pull-right btn btn-primary btn-default btn-sm" style="margin-right: 10px;margin-top: 2px; margin-bottom: 2px;">Add School</button>
</div>
If this does not work for you, then you need to check what your $.getJSON("./lang / en.json ", function(data) { does, because we can't test this part for you.
Maybe it's due to copy&paste, but it should probably read $.getJSON("./lang/en.json", function(data) { without those spaces.
Check your browser's Network tab (in the browser's console) to see what you're requesting from the server and what the server returns.
I've tried this in w3schools and it works fine.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var data = { name :"hey" };
alert('hi');
$('.SecondTopBarTitleProperties').html(data.name);
});
</script>
</head>
<body>
<div class="container SecondTopBarProperties">
<label class="SecondTopBarTitleProperties"></label>
<button data-bind="click:NewSchool" type="button" class=" pull-right btn btn-primary btn-default btn-sm" style="margin-right: 10px;margin-top: 2px; margin-bottom: 2px;">Add School</button></div>
</body>
</html>
I have a question about background image change in MVC.
I have a main css for the website, multiple webpages within the website and i have a webpage within the user profile to change the background image of the website.
I have set up 4 pictures on a row with function. I also have typed in a javascript prior to the images div, e.g in the top of
My problem is that when i run the page. the images wont change background when i click on the images. Thus I can change the background by image click if i go to inspect element and turn of background-image of my "Site.css" ( my main webpage css, ill throw in a gyazo here: http://gyazo.com/169070689792884090f1d9a9c9b96158).
Seems like the Site.css is static or something. Bootstrap is used on the website, also a masterpage is created, could that be a missing point from my pov.
also, how would I save the image to remain background on all pages afterwards?`
here is my cshtml code for image backgrounds:
#{
ViewBag.Title = "Javascript - Change Background";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>#ViewBag.Title.</h2>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ButtonChangeBackground.css">
</head>
<body>
<script language="JavaScript">
var backImage = new Array();
backImage[0] = "/Content/img/Wood_floor_by_gnrbishop.jpg";
backImage[1] = "/Content/img/blue_wave_of_water-wide.jpg";
backImage[2] = "/Content/img/Falling-asleep-forest.jpg";
backImage[3] = "/Content/img/lava.jpg";
function changeBGImage(whichImage) {
if (document.body) {
document.body.background = backImage[whichImage];
}
}
</script>
<div id="choosebg">
<button onclick="javascript: changeBGImage(0);"><img id="wood" style="width: 100px; height: 80px;" src="~/Content/img/Wood_floor_by_gnrbishop.jpg" alt="" /></button>
<button onclick="javascript: changeBGImage(1);"><img id="water" style="width: 100px; height: 80px;" src="~/Content/img/blue_wave_of_water-wide.jpg" alt="" /></button>
<button onclick="javascript: changeBGImage(2);"><img id="forest" style="width: 100px; height: 80px;" src="~/Content/img/Falling-asleep-forest.jpg" alt="" /></button>
<button onclick="javascript: changeBGImage(3);"><img id="lava" style="width: 100px; height: 80px;" src="~/Content/img/lava.jpg" alt="" /></button>
</div>
<p> <div class="btn btn-default col-md-offset-2 "> #Html.ActionLink("Back to Profile", "Details") </div>
</p>
</body>
</html>
try this
...
function changeBGImage(whichImage) {
if (document.body) {
document.body.style.backgroundImage = 'url(' + backImage[whichImage] + ')';
}
}
...
I'm trying to add a video player inside a content page of a lesson on Moodle using Kaltura's JS embed. The embed looks like the following:
<script src="http://cdnapi.kaltura.com/p/"></script>
<div id="kaltura_player_" style="width: 530px; height: 327px;"
itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<span itemprop="name" content="Letter"></span>
<span itemprop="description" content="A case study."></span>
<span itemprop="duration" content="233"></span>
<span itemprop="thumbnail"
content="http://cdnbakmi.kaltura.com/p"></span>
<span itemprop="width" content="530"></span>
<span itemprop="height" content="327"></span>
</div>
<script>
kWidget.embed({
"targetId": "kaltura_player_",
"wid": "_1410652",
"uiconf_id": 21346902,
"flashvars": {
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"
},
"streamerType": "hdnetwork"
},
"cache_st": 139585,
"entry_id": "0_jd9t3gbd"
});
</script>
After saving the above into a content section in a Tiny MCE editor (as HTML), it directed me to a summarized edit page with each content section, where I can see the section with the video player working/playing just fine. However, during the preview of the content page, it only showed broken js code inside an input tag:
<input type="submit" value="//
kWidget.embed({
"targetId": "kaltura_player_,
"wid": "_1410652",
"uiconf_id": 21346902,
"flashvars": {
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"},
"streamerType": "hdnetwork"},
"cache_st": 1395856314,
"entry_id": "0_jd9t3gbd"
});
// ]]>">
With no player displayed on the preview. Afterwards, I went back into edit mode, into the MCE text editor in HTML mode, and found that it has been altered into this:
<p></p>
<div id="kaltura_player_" style="width: 530px; height: 327px;" itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject"></div>
<p>
<script type="text/javascript">// <![CDATA[
kWidget.embed({
"targetId": "kaltura_player",
"wid": "_1410652",
"uiconf_id": 21346902,
"flashvars": {
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"
},
"streamerType": "hdnetwork"
},
"cache_st": 5856314,
"entry_id": ""
});
// ]]></script>
</p>
Is this a Moodle issue? Or a Tiny MCE issue? or both? Is there a security config setting that I've missed? Would anyone know which of these components are altering the js code? Any help would be greatly appreciated!
I'm messing around with some JavaScript and I'm trying to figure out a way to read the localStorage in a way so I can have achievements go off every 10 clicks or what ever. Here's the code:
<!DOCTYPE>
<HTML>
<HEAD>
<link rel="stylesheet" type="css/text" href="css.css">
<script>
function clickCounter() {
if(typeof(Storage)!=="undefined")
{
var ten=10;
var value = clickCount;
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " +
localStorage.clickcount + " times.";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web
storage...";
}
}
function clickCounterReset() {
localStorage.clear();
localStorage.clickcount=0;
document.getElementById("result").innerHTML="You haven't clicked the button once!";
}
function Ach1() {
if (localStorage.clickcount=10) {
localStorage.setitem("GetData" , value);
alert(localStorage.getitem("GetData"));
document.getElementById("Ach1").innerHTML="Successfully reached 100!";
}
}
</script>
</HEAD>
<BODY class="body">
<br>
<br>
<div id="Ach1"></div>
<br>
<br>
<center>
<div class="noLight">
<div class="pointlessbutton" style="cursor: pointer;" onClick="clickCounter()">
<font color="white" size="4">+1</font>
</div>
<br>
<div class="pointlessbutton" style="cursor: pointer;" onClick="clickCounterReset()">
<font color="white" size="4">Reset</font>
</div>
</div>
<div id="result"></div>
</center>
</BODY>
</HTML>
As you may see, the actual script for the clicks works fine, so does all the HTML. However, at the bottom where it says "function Ach1()" is where I'm trying to get the script to read the data and compare it to a value I'd put in, such as 10 to then get it to spit out some HTML covered in pretty CSS and display the achievement.
I took out a BUNCH of your code and tried to clean it up.
Also, I want to point out that I butchered the crap of HTML5, as I see you are just learning. There are some BAD practices in this code, but for what you are trying to accomplish I think/hope you can gleam the import bits out with adopting this as dogma (I got lazy!).
Some things to be aware of:
JavaScript is CaSeSeNsItIvE. So if you start calling variables "clickcounter" and then try to reference as "clickCounter" you'll run into a bunch of errors.
The code I provided below: I mixed CSS in the HTML, and HTML (poor choice of tags) in the JavaScript. I see you had a CSS file, well - yeah, you didn't post it so I didn't have access to it. So I just took it out and added colors throughout.
Remember the power of console.log("your messages goes here");. It's a poor mans debugger/manhole into what your code is doing at any one time. Use it while you learn so you can see what the expected values are (FYI: most browsers have "developer tools" -- if you are using Chrome, then hit F12 -- this way you can SEE the CONSOLE messages (and the ERRORS in your JavaScript as you run it).
Don't be afraid to use functions heavily. It's a great way to organize your code and force yourself to pick up good practices.
Here is the code:
<HTML>
<HEAD>
<script>
function clickCounter() {
if(typeof(Storage)!=="undefined"){
if (localStorage.clickCount){
localStorage.clickCount=Number(localStorage.clickCount)+1;
updateResults();
console.log("Added +1 to Click Count! New value: " + localStorage.clickCount);
goldStarNotification();
}
else{
clickCounterReset(); // Set the click-counter to 0
updateResults();
}
}
}
function updateResults(){
var myCounter = localStorage.clickCount;
document.getElementById("result").innerHTML = "You have clicked the button " + myCounter + " time(s).";
}
function clickCounterReset(){
console.log("The reset was hit!");
localStorage.clickCount=0;
updateResults();
}
function goldStarNotification(){
if (localStorage.clickCount == 10){
console.log("You WIN!!! ZOMG!");
document.getElementById("starNotification").innerHTML = "<center><h1>Successfully reached Level 10!</h1></center>";
}
}
</script>
</HEAD>
<BODY class="body" bgcolor="black", onLoad="clickCounterReset()">
<br>
<br>
<div id="starNotification" style="color: white;"></div>
<br>
<br>
<center>
<div class="noLight">
<div class="pointlessbutton" style="cursor: pointer;" onClick="clickCounter()">
<font color="white" size="4">+1</font>
</div>
<br>
<div class="pointlessbutton" style="cursor: pointer;" onClick="clickCounterReset()">
<font color="white" size="4">Reset</font>
</div>
</div>
<div id="result" style="color: white;">Hey! Update me! :-)</div>
</center>
</BODY>
</HTML>
Im trying to create a simple text editor for a web site.
I want to add to him something like the code button in this site.
So by selecting a specific text, color it's background with gray color.
Here is what i have for now but if i have a multi row text selected(rows created by pressing enter) the function test() doesn't work. It works only if i select a row each time.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="Awesome/css/font-awesome.css">
</head>
<body onload="InitEditable()">
<div style="margin-left:10px;">
<p>
<div class="btn-group">
<a class="btn" href="#" onclick="fontEdit('bold')"><i class="icon-bold"></i></a>
<a class="btn" href="#" onclick="fontEdit('italic')"><i class="icon-italic"></i></a>
<a class="btn" href="#" onclick="fontEdit('underline')"><i class="icon-underline"></i></a>
<a class="btn" href="#" onclick="test()"><i class="icon-link"></i></a>
<a class="btn" href="#" onclick="fontEdit('justifyLeft')"><i class="icon-align-left"></i></a>
<a class="btn" href="#" onclick="fontEdit('justifyCenter')"><i class="icon-align-center"></i></a>
<a class="btn" href="#" onclick="fontEdit('justifyRight')"><i class="icon-align-right"></i></a>
<a class="btn" href="#" onclick="fontEdit('justifyFull')"><i class="icon-align-justify"></i></a>
</div>
</p>
</div>
<div style="margin-left:10px;"><iframe id="textEditor" style="width:500px;height:170px;font-family:arial;font-size:11px;"></iframe></div>
<script type="text/javascript">
var editorDoc;
var editor;
function InitEditable()
{
editor = document.getElementById("textEditor");
editorDoc = editor.contentwindow.document;
var editorBody = editorDoc.body;
if ('contentEditable' in editorBody) {
// allow contentEditable
editorBody.contentEditable = true;
}else { // Firefox earlier than version 3
if ('designMode' in editorDoc) {
// turn on designMode
editorDoc.designMode = "on";
}
}
}
function fontEdit(x,y)
{
editorDoc.execCommand(x,"",y);
editorDoc.focus();
}
function test(){
var range = document.getElementById("textEditor").contentwindow.window.getSelection().getRangeAt(0);
var newNode = document.createElement('div');
newNode.style.backgroundColor = "gray";
range.surroundContents(newNode);
return false;
}
</script>
</body>
</html>
There must be a problem with surroundContents() and divs but cannot think something to solve it.
Any idea is welcomed!
Thanks in advance.
One option is the class applier module of my Rangy library (demo)
Live demo: http://jsfiddle.net/D7s5j/
CSS:
.code {
background-color: #ccc;
font-family: Courier New, monospace;
}
JS:
var codeApplier = rangy.createCssClassApplier("code");
codeApplier.applyToSelection();
So the problem is that the contenteditable object, creates <div> so this couldn't let surroundContents() work properly and add it's own <div>s around the selected range.
I solve my problem finally by adding this code
$("#textEditor>div").replaceWith(function() { return $(this).contents(); });
which deletes <div>s tags from the contenteditable object.
Also you can add this for create a <br> tag after enter pressed.
$("#textEditor > div").before("<br />").contents().unwrap();
For the second code thank VisioN.