This is my first post and I am really new to computer programming so I apologize ahead of my time if my question is super simplistic. So I am trying to start an angular application and I currently have this:
<!DOCTYPE html>
<html>
<head ng-app>
<title>Hello World</title>
<body>
</head>
<h1>{{2+2}}</h1>
</body>
<script type="<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"> </script>
</head>
What is supposed to happen is that when I click the html page there should be the number 4 pop up but instead this pops up: {{2+2}}. I am assuming that my angular code is not correctly linked but I am not sure. Do you have any ideas?
Please find below the corrected html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body ng-app>
<h1>{{2+2}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</body>
</html>
Place the <body> tag in correct place. Moved the ng-app to body tag. Place the corrected script tag within <body>
Working sample: http://plnkr.co/edit/T15fetn913Fwn2uJ5pcj?p=preview
Explanation:
The body of an html page is where the components that display on a page will be declared.
- Overlying declaration of html
-where you put meta data, scrip imports, css imports, and title. Basically things the page will use
- all other tags from anchors to spans, things the user sees
Note*** nothing can go in between these tags
Visit w3schools for a great tutorial on this...
http://www.w3schools.com/html/default.asp
Related
So I've been trying to make pjax work on my website but with little luck.
What I want to do is very basic and simple. I just want to create two links on my home page which both load a common page. But one link would load it using pjax, thus only change the contents of the div, and the other one would not use pjax and thus load the whole page.
This is the code of my main page (main.html) -
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Pjax Tutorial</title>
<script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
<script src='main.js' type="text/javascript"></script>
</head>
<body>
<h1>Welcome to Pjax tutorial</h1>
<a id="first-link" class="js-Pjax" href="first.html">First link</a>
<a id="second-link" href="first.html">Second link</a>
<div id="first-div">Index page!</div>
</body>
</html>
and this is the code of the common page both links refer to (first.html) -
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Pjax Tutorial</title>
<script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
<script src='main.js' type="text/javascript"></script>
</head>
<body>
<h1>Welcome to Pjax tutorial</h1>
<a id="first-link" class="js-Pjax" href="first.html">First link</a>
<a id="second-link" href="first.html">Second link</a>
<div id="first-div">This is the first page! If you came here from the first link, then you can notice that the page didn't load but only the URL and the contents of this div were changed. Yay! If you came here from the second link then you can notice that the page actually loaded and each and everything was re-executed(JS) and re-applied(CSS) again. Boo!</div>
</body>
</html>
and this is the javascript that I'm using (main.js) -
var a = new Pjax({
elements: "a.js-Pjax",
selectors: ["#first-div"]
});
What it should do is if I click on first link, it should just replace the content of div and change the URL of the page whereas if I click on second link, it should load the page instead of just changing the div and URL.
I've written identical code in play framework (MVC) and it's working perfectly but according to me I should not be needing an MVC to run only this much of code.
I have got the Pjax from here: https://github.com/MoOx/pjax . Installed it through npm.
I've run Pjax.isSupported() command and that returned true.
Any help is appreciated!
Well two things to notice here, combination of which solved my problem.
First, The call to main.js or the javascript file I have written has to be done at the end of the body tag. Something like this -
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Pjax Tutorial</title>
<script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
</head>
<body>
<h1>Welcome to Pjax tutorial</h1>
<a id="first-link" class="js-Pjax" href="first.html">First link</a>
<a id="second-link" href="first.html">Second link</a>
<div id="first-div">Index page!</div>
<script src='main.js' type="text/javascript"></script>
</body>
</html>
And second, I do need a server running to make pjax work. It's working with both play framework and npm. Doesn't work without a server.
Hope this helps somebody.
Sorry for the basic question. I'm new to coding and I've already googled "how to run code from node modules" "how to use code from node modules" etc. for a few hours without any real progress.
Basically, I want to create a editable div with the text editor (https://github.com/yabwe/medium-editor) and I already manually downloaded and followed the directions to inserting the code inside the editor (can be found on the GitHub page).
Here is my code for the editable div in its entirety:
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" type="text/css" href="post.css">
<script src="other.js"></script>
<link rel="stylesheet" href="css/medium-editor.css">
<link rel="stylesheet" href="css/themes/default.css">
<script src="js/medium-editor.js"></script>
<div contenteditable="true" class= ".editable" id="posteditor"> <p> test words</p></div>
</body>
Javascript (other.js -referenced in html code):
var elements = document.querySelectorAll('.editable'),
editor = new MediumEditor('.editable');
I also copy and pasted the files from the downloaded file into a new file folder holding the HTML/CSS/Javascript code for the editable div (not sure if this even makes a difference).
Thank you so much for helping a new coder.
EDIT: Figured it out! My paths were in the wrong order and I wasn't referencing some of the necessary code in the
You need some simple html css js basics knowledge to start dealing with such code
here are some tips:
*put link tag in the head
*put script tags in before the ending of the body
try now to run this code and double tap the word you want to edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<div class="editable"><h4>hi I am editable</h4></div>
<script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
<script>var editor = new MediumEditor('.editable');</script>
</body>
</html>
I'm starting to coding in angular.js on webstorm:
<!DOCTYPE html>
<html ng-app="store">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="store">
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<p>Nothing here {{'yet' + '!'}}</p>
{{1 + 1}}
</body>
</html>
but the browser display
Nothing here {{'yet' + '!'}}
{{1 + 1}}
what can i do?
You don't provide enough details to resolve the issue, but I made these four changes to your HTML to get it working, at least with respect to AngularJS:
Remove the 'ng-app' attribute from the body tag.
Use a CDN URL for angularjs.
Remove the reference to your js file.
Remove your store app from the 'ng-app' attribute in the html tag.
This modified version of your HTML runs fine using WebStorm:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="https://code.angularjs.org/snapshot/angular.js"></script>
<p>Nothing here {{'yet' + '!'}}</p>
{{1 + 1}}
</body>
</html>
Once you see that working, you can progressively undo the changes I made (undo 2, then 3 then 4, but retain change 1), and retest to identify the problem.
More details are needed to determine the root cause, but the most likely issues are:
Your angularjs file can't be found.
Your "app.js" file can't be found.
Some problem(s) with your code in app.js.
But since you are using WebStorm, it may be able to identify your precise problem. Run Code=>Inspect Code on your project, then review the output. It will identify very basic problems, such as failing to locate your script files.
Supposed I have a html page like this:
Before:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://www.domain.com/css1.css">
</head>
<body>
<style type="text/css">
.test1{clear:both}
.test2{width:110px}
...
</style>
</body>
</html>
After:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://www.domain.com/css1.css">
<style type="text/css">
.test1{clear:both}
.test2{width:110px}
...
</style>
</head>
<body>
</body>
</html>
Just curious if it could be done via Regex replacement?
Thanks a lot.
PS: Or did anybody know how google pagespeed apache2 extension does move the css to head?
You could write a little application that parses through the html file, filters the style tags out, deletes them from the tags and creates a style tag in the head and saves the html file again.
But lets face it, when we are talking here about one or two html files, then you will spend much more time on developing that app than just clean up your mess by hand.
I am working on same task in my one project, I have made a javascript regex which selects all inline styles, you can use this in your project.
/<(style)[^>]*?>(?:.|\n)*?</\s*\1\s*>/igm
You can test this regex at: http://www.regexr.com
Html:
<!DOCTYPE html>
<html>
<head>
<SCRIPT language="JavaScript" src="mapbody.js"></SCRIPT>
</head>
<body>
Click for a message..
</body>
</html>
mapbody.js:
function a_message()
{
alert('I came from an external script! Ha, Ha, Ha!!!!');
}
When I pull up the web page and click the link nothing happens. Both files are in the same folder. What am I missing?
Several things:
HTML-elements should all be lower-case.
The language-attribute in the script-tag is obsolete. Use type="text/javascript" instead.
A JavaScript-function call should go into the onclick-attribute, not the href.
A proper implementation might look like this:
<!DOCTYPE html>
<html>
<head>
<title>Is required!</title>
<script type="text/javascript" src="mapbody.js"></script>
</head>
<body>
<a onclick="a_message();" href="#">Click for a message..</a>
</body>
</html>
Also, binding function-calls to an HTML-Element using the onclick (or any other onXX-attribute) is old-school. Library's like jQuery enable you to use CSS-selectors to bind actions on certain HTML-elements, which allows a full separation of HTML and JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
Click for a message..
<script type="text/javascript" src="mapbody.js"></script>
</body>
</html>
Lukas Knuth was faster than me. :)
Works for me (Firefox 8) : http://jsfiddle.net/FCXxU/
Is the URL to your script good?
A simple way to check that is to add an alert('test'); at the beginning of mapbody.js (before the function).