I have created an html file with angularjs as follows:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<title>AnguarJS</title>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-controller='bodyController'>
<p>{{name}}</p>
</body>
</html>
the problem is that if i provide an angular.js file as a source i am getting the output as {{name}} but if i provide the url in the script src then i am getting the desired output.
can anyone please explain to me why is this happening?
PS: the controller.js code:
var myApp = angular.module('myApp',[]);
function bodyController($scope){
$scope.name= 'Syed Rameez Khalid';
}
Make sure that you have angular.min.js and html file at the same location.
Related
I am looking to create a website that compiles the HTML code that you write it in a text editor.
Here is my code:
<!DOCTYPE html>
<html>
<head><title>HTML editor</title></head>
<body>
<textarea id="textarea">
</textarea>
<iframe id="frame" srcdoc="This is where the code is interpreted. ">
</iframe>
<button onclick="run();"></button>
<script>
function run() {
var x = document.getElementById("textarea").value;
var y = document.getElementById("frame");
y.srcdoc = x;
}
</script>
</body>
</html>
Write now, I have successfully created something that compiles html code. But I want to do the syntax highliting. How do I highlight the text?
Just add the required CSS and JS for Prism.js.
<!DOCTYPE html>
<html>
<head>
...
<link href="https://myCDN.com/prism#v1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="https://myCDN.com/prism#v1.x/components/prism-core.min.js"></script>
<script src="https://myCDN.com/prism#v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>
Then add below HTML element
<pre><code class="language-css">p { color: red }</code></pre>
whatever code you write in this element will have syntax highlighting. class="language-css" determines the language for hightlighting, you can change as per your requirement. You can find all supported languages here.
Note: this is a basic example you can start from here and find more info at prism.js usage
I want to get the data from the another html file using angularjs $http get method, but i did't get anything
below is my code
<!DOCTYPE html>
<html>
<head ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<p>{{welcome}}</p><br />
<h1>{{error}}</h1>
</div>
<script>
var app=angular.module('myApp',[])
app.controller('myCtrl',['$scope','$http',function($scope,$http){
$http.get('home.html').than(function(response){
$scope.welcome=response.data;
},function(reason){
$scope.error=reason.data;
});
}]);
</script>
</body>
</html>
Below is my another html file code
<p>This is home page</p>
it should be then not than
.then(function(response){
Demo
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Literally Canvas</title>
<link href="css/literallycanvas.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="react-with-addons.min.js"></script>
<script src="underscore-min.js"></script>
<script src="js/literallycanvas-core.min.js"></script>
<script src="js/literallycanvas.js"></script>
</head>
<body>
<div class="literally"></div>
<form class="controls export">
<input type="submit" data-action="export-as-png" value="Export as PNG">
</form>
<script>
$(document).ready(function(){
//initial without jQuery
var lc = LC.init(
document.getElementsByClassName('literally')[0],{
imageURLPrefix:'img',
primaryColor:'#fff',
backgroundColor:'#ddd',
toolbarPosition:'top',
tools:
[
LC.tools.Pencil,
LC.tools.Eraser,
LC.tools.Line,
LC.tools.Rectangle,
LC.tools.Text,
LC.tools.Polygon
]
});
//export as png
$('.controls.export [data-action=export-as-png]').click(function(e) {
e.preventDefault();
window.open(lc.getImage().toDataURL());
});
});
</script>
</body>
</html>
I have download literallycanvas-0.4.11 and added the files under css/ and img/ to my project, as well as the appropriate file from js/.
I can see the initial is worked because I can see the primaryColor was changed but I can't find my tools.
I followed the literally canvas however it still something wrong.
Anybody can help me??
I changed imageURLPrefix option and it worked for me. Just write path to your img folder there.
var lc = LC.init(
document.getElementsByClassName('my-drawing')[0],
{
imageURLPrefix: 'path/to/your/img',
.....
.....
});
I am trying to develop a simple back-end widget for asp. Since, I am new to ASP, I chose JavaScript as ASP language. I think I don't have the right tool to write to output. Response.Write() sends output directly to the start of the page. What I am missing here?
Hers is the code that I made:
<!DOCTYPE html>
<html>
<body>
<h2>Hello world</h2>
<script language=Javascript runat=server>
Response.Write("Hello JS");
</script>
</body>
</html>
which is giving the following output:
Hello JS <!DOCTYPE html>
<html>
<body>
<h2>Hello world</h2>
</body>
</html>
There is a great answer on the subject here but basically if you want this to work change the above code block as follows;
<!DOCTYPE html>
<html>
<body>
<h2>Hello world</h2>
<% Call Response.Write("Hello JS"); %>
</body>
</html>
You can also replace the above line of code with <%= "Hello JS" %> as a shortened form of Response.Write() method.
if you want to use javascript then it should be like this:
<script language=Javascript>
alert("Hello JS");
</script>
or
<script language=Javascript>
alert('<%=SomeVarfromASP%>');
</script>
Those will give you POP up boxes with your message or in your case value of your variable in it.
Basically when you put "<%=" it is pretty much like you say please write this...
If you need something to be typed/printed on the page by JavaScript you will need to use more specialized functionality such as getelementbyid or similar.
Your code would look like:
<html>
<head>
<script type="text/javascript">
function ChangeGreet()
{
var vgreet = document.getElementById("JSGreet");
vgreet.innerHTML = 'Hello JS';
}
</script>
</head>
<body onload="ChangeGreet()">
<div>Hello MS</div>
<div id="JSGreet"> </div>
</body>
</html>
JavaScript and VBScript(Classic ASP) have their own syntax. Look it up at http://www.w3schools.com/js/DEFAULT.asp. It has great tutorials for beginners in both languages.
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>