This is my code...
body
{
margin:0;
padding:0;
height:100vh;
}
#particles-js
{
height:100%;
background:#f00;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RESUME</title>
<link rel="stylesheet" href="p.css">
</head>
<body>
<div id="particles-js">
</div>
<script type="text/javascript" src="particles.js"</script>
<script type="text/javascript" src="app.js"</script>
</body>
</html>
I am beginner in javascript and jquery. I want to add particles in background of my webpage.I downloaded particles-js-master zip file from github and add particles.js and app.js in my html file. but it not working in any browser.did i wrong something? please help me out....thanks in advance :)
Related
Couldn't find proper solution in old questions, so
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body, input{
background-color:red;
}
</style>
<script>
function test() {
return false
}
</script>
</head>
<body>
<div></div>
</body>
</html>
everything except code inside <style> and <script> tags indented ok, how can I fix it?
As it turns out: That this has been done on purpose! Even my current Vim 8.1 installation contains an indent/html.vim-file which has such zero-indentation as its default setting.
That is however configurable via vimrc with:
let g:html_indent_script1 = "inc"
let g:html_indent_style1 = "inc"
...and -shame on us- is also mentioned in :help html-indent
I use othree/html5.vim plugin which supports css/javascript inside html. It works although this isn't probably the simplest solution.
Your code is indented like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body, input{
background-color:red;
}
</style>
<script>
function test() {
return false
}
</script>
</head>
<body>
<div></div>
</body>
</html>
I want to load codemirror js editor into an iframe to avoid styles overriding. I read the document https://codemirror.net/doc/manual.html#config but it is not clear. Here is what i am tried.
HTML
<iframe id="code"></iframe>
Js
var codemirror = CodeMirror(document.getElementById("code").contentWindow.document.body, {
mode: "javascript",
theme: "monokai"
});
How can I load codemirror js editor into an iframe?
Place below code in your html markup.
<iframe src="https://codemirror.net/doc/manual.html#config"></iframe>
If you want to have CodeMirror in an iframe, you will need two different html files. See a very simple example below. Please be a little bit more specific for further requirements.
iframe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet href="http://codemirror.net/doc/docs.css">
<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src=http://codemirror.net/lib/codemirror.js></script>
<script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
<style type=text/css>
.CodeMirror {float: left; width: 100%; height: 100%; }
</style>
</head>
<body>
<div>
<textarea id=content name="content"></textarea>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
mode: 'application/x-httpd-php',
lineNumbers: true
});
</script>
</body>
</html>
main.html
<!DOCTYPE html>
<html>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
I'm trying to set background color to blue using javascript ran with Sublime Text 3. What command should I be using. Thank you
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<backgroundColor="blue>;
</backgroundColor="blue">
</body>
</html>
<style> tag is used to declare CSS properties in the same HTML document.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.blueDiv
{
background-color: blue;
}
</style>
</head>
<body>
<div class="blueDiv">
Background color of this div is blue.
</div>
</body>
</html>
You can use inline style with div to set background color:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.bg-blue{background-color:blue;}
</style>
</head>
<body>
<div class="bg-blue">
</div>
</body>
</html>
Thank you guys, until now I tried this - in vain:
<!DOCTYPE>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>DropDown</title>
<script language="javascript">
fuction()
$("select").change(function() {
$(this).css("background-color", ($(this).attr("data-correctVal") ==
$(this).val()) ? "green" : "red");
});
</script>
</head>
<body>
<select name="Armaturen">
<option value="1">Ölvorwärmung</option>
<option value="2">Kesselthermostat</option>
<option value="3">Ölpumpe</option>
<option></option>
</select>
</body>
</html>
Now I will try yours - patience please ... and thanks a lot!!!
i'm writing a android apps with phonegap and need inappbrowser to display certain contents, so i write some testing code
<!DOCTYPE HTML>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8"/>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.2.css" />
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<style>
#footer {
position:fixed;
bottom:0;
width:100%;
}
</style>
</head>
<body>
<div data-role="page" id="page_dashboard">
<script type="text/javascript" charset="utf-8" src="scripts/dashboard.js"></script>
<script type="text/javascript" charset="utf-8">
var ref = window.open('http://apache.org','_blank','location=yes, enableViewportScale=yes');
ref
.addEventListener('loadstart', function() { alert(event.url); });
</script>
After i clicked the button, the strange code will convert to the valid text. That is "Alert" box to prompt "undefined" text.
Problems:
Why the text can't be displayed?
Why there is a alert box when the apps start?
I checked many times, but I have no idea why the jQuery wont work. It works in jsfiddle!
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
css:
#menu{
width:15px;
height:200px;
background:red;
}
jquery:
$('#menu').hover(function(){
$("#menu").stop().animate({width : "300px"});
});
It seems like problem lies here:
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Your animate.js goes before jquery loads
You need to either wrap your jquery code in $(function () {}) or (preferred) move the code to just before </body>.
Since the other answers didn't seem to work out for you, I'm going to take a stab at a suggestion.
I'm guessing that you're initializing your JavaScript in a location where the element you're adding the event listener to isn't available yet. Here is a solution to this problem.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
</head>
<body>
<div id="menu">
</div>
<script type="text/javascript">
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
</script>
</body>
</html>
In this example, the JavaScript is immediately below the element you're adding the listener to, so it is guaranteed to be available in the DOM.
Alternatively, you can wrap your JS around an event to fire after the document is ready. Here is an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
});
</script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
It is also important to note the sequence of the JavaScript elements.