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>
Related
I am trying to make a simple shareable text editor with Mozilla's TogetherJS, but it does not seem to work. Based on their instructions, I added the library/script in the head and calling the JS from the button.
https://togetherjs.com/
In the Head tag:
<script src="https://togetherjs.com/togetherjs-min.js"></script>
In the body:
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test JS</title>
</head>
<body>
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
<div>
<textarea style="border:1px solid red; height:300px; width: 500px; font-size: 16px;">
</textarea>
</div>
<script src="https://togetherjs.com/togetherjs-min.js"></script>
</body>
</html>
It seems to super-simple, yet for some reason, it does not seem to work!
Could you please check now wrap your script in the body i.e.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test JS</title>
</head>
<body>
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
<script src="https://togetherjs.com/togetherjs-min.js"></script>
</body>
</html>
I'm on a tutorial to create a success check mark with an animation.
I already created all the elements such as the box for the alert etc but have trouble with an animation.
Here is the code example I'm following : Link
I tried to do it on my computer putting the HTML part and the JS together and the css in a style.css sheet but doesn't work :(
Here is the HTML document :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Test</title>
<script>
$("button").click(function () {
$(".check-icon").hide();
setTimeout(function () {
$(".check-icon").show();
}, 10);
});
</script>
</head>
<body>
<div class="success-checkmark">
<div class="check-icon">
<span class="icon-line line-tip"></span>
<span class="icon-line line-long"></span>
<div class="icon-circle"></div>
<div class="icon-fix"></div>
</div>
</div>
<center>
<button id="restart">Restart Animation</button>
</center>
</body>
</html>
I didn't copy the css as it is the same as is the link and a long code..
It gives me a white screen and a lot of warnings on code inspection :
As I'm doing something wrong please ?
Thank you for your help,
Jerry
jQuery is missing from your code, try adding adding it in the <head> section.
EDIT: You are also using a wrong .css file. I think you copied the uncompiled SCSS from the tutorial. To fix this, go back to the CodePen example and on the top-right corner of the CSS section open the context menu and click "View Compiled CSS". Then copy the CSS into style.css
Here is a working solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(() => {$("button").click(function () {
$(".check-icon").hide();
setTimeout(function () {
$(".check-icon").show();
}, 10);
});});
</script>
</head>
<body>
<div class="success-checkmark">
<div class="check-icon">
<span class="icon-line line-tip"></span>
<span class="icon-line line-long"></span>
<div class="icon-circle"></div>
<div class="icon-fix"></div>
</div>
</div>
<center>
<button id="restart">Restart Animation</button>
</center>
</body>
</html>
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 :)
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>
The code:
<!DOCTYPE html>
<html>
<head>
<title>Project 507</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#draggable {
width: 150px;
height: 150px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#draggable").draggable();
});
</script>
</head>
<body>
<div id="draggable">
<p>Compose new Tweet</p>
</div>
</body>
</html>
The .draggable(); functionality is not working. I have placed it in a <div> and used jQuery to try and make this <p> work. However there is something wrong with this code and its not outputting the .draggable(); function. Can i get some help please? Thanks.
Add jquery-ui.js in your code :
For reference you can have a look on this :
Fiddle
Code is as below
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Except this all code is same.