I'm trying to make a web text editor that has live syntax highlighting like Visual Studio Code but the problem is when I try to highlight, it puts my cursor in the back of the editor.
My code:
<html>
<head>
<title>Code</title>
<style>
body {
margin:0px;
padding:0px;
overflow:hidden;
}
#code {
background:#2b2e33;
color:white;
font-family:Monaco;
width:100%;
height:100%;
font-size:12px;
}
</style>
</head>
<body>
<div id="code" contenteditable="true"></div>
<script>
var div = document.getElementById("code");
setInterval(function() {
var code = div.innerText;
code = code.replace("var","<span style='color:magenta'>var</span>");
div.innerHTML = code;
},100)
</script>
</body>
The cursor seems to go to the back and the text is being reversed for no apparent reason...
Related
I want to copy the HTML code by clicking on the button using javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#data {
background: #eee;
width: 300px;
padding: 13px;
text-align: center;
font-family: arial;
}
</style>
</head>
<body>
<button type="button" onclick="copyToClipboard('data')">Copy </button>
<textarea id="data" name="data">
<p>I Want to copy this html code1.</p>
<p>I Want to copy this html code2.</p>
</textarea>
<script src="doc/jquery.min.js"></script>
<script src="doc/clipboard.min.js"></script>
<script>
window.copyToClipboard = function(elementId) {
var aux = document.getElementById(elementId);
aux.select();
document.execCommand("copy");
}
</script>
</body>
</html>
I try this code, but it shows the code only, and I want it to show the preview of the HTML code.like this
So how can I copy HTML code from the browser by clicking on the button?
A textarea is a text only element.
It won't parse the HTML in its value.
What you might want to look into is a WYSIWYG editor that supports html export of its contents.
I have used TinyMCE (self-hosted, there is a paid option as well) in the past tho there are definitely other options. I have no affiliation with TinyMCE.
Edit:
After clarifying, here is a sample of the code:
<button onclick="fun_name();">get outerHTML</button>
<div id="idDiv">
<div id="data">
<p>I Want to copy this html code1.</p>
<p>I Want to copy this html code2.</p>
</div>
</div>
<script>
function copyToClipboard(text) {
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
function fun_name() {
var elem = document.getElementById("idDiv").outerHTML;
copyToClipboard(elem)
}
</script>
Currently I am working on a sample project which is a single page website where all the details are divided in sections.
I am calling all the section through internal linking and I want to modify the url structure of those links from like "example.com/#section-1" to "example.com/about-us". So, how can I achieve this?
The following is a sample code structure.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, body *{
margin:0;
padding:0;
}
body, html, div{
height:100%;
width:100%;
}
#container-1{
background-color:green;
}
#container-2{
background-color:yellow;
}
#container-3{
background-color:gray;
}
.container p{
padding:10px;
font-size:50px;
}
</style>
</head>
<body>
<div id="main-container">
<div id="container-1" class="container"><p>Container-1</p>To Container-2</div>
<div id="container-2" class="container"><p>Container-2</p>To Container-3</div>
<div id="container-3" class="container"><p>Container-3</p>To Container-1</div>
</div>
</body>
</html>
If I understand you correctly, you can use history.pushState.
So here is the steps:
Get the relative URL from the clicked link.
Use pushState to push the state to the history (so you could use back and forward.
Scroll the page to the selected element.
Keep it in you mind that you need to configure your server that wil transfer (rewrite) any sub page to the main page. So when user will try to go to "sub page" (container2 for example) the server will return the main page, and with the javascript you will scroll to page to the right section.
Array.prototype.forEach.call(document.querySelectorAll('a'), function(a) {
a.addEventListener('click', function(e) {
e.preventDefault();
var link = a.hash.replace('#', '');
history.pushState(null, 'page', link);
scrollToElement();
});
});
function scrollToElement() {
var page = location.pathname.replace('/', ''),
container = document.querySelector('#' + page);
container.scrollIntoView();
}
<!DOCTYPE html>
<html>
<head>
<style>
html, body, body *{
margin:0;
padding:0;
}
body, html, div{
height:100%;
width:100%;
}
#container-1{
background-color:green;
}
#container-2{
background-color:yellow;
}
#container-3{
background-color:gray;
}
.container p{
padding:10px;
font-size:50px;
}
</style>
</head>
<body>
<div id="main-container">
<div id="container-1" class="container"><p>Container-1</p>To Container-2</div>
<div id="container-2" class="container"><p>Container-2</p>To Container-3</div>
<div id="container-3" class="container"><p>Container-3</p>To Container-1</div>
</div>
</body>
</html>
http://output.jsbin.com/zaduqo
I would reccomend using Apache mod_rewrite module
RewriteRule ^/about-us /index.php#container-2 [NE,L,R=301]
RewriteRule ^/contact-us /index.php#container-1 [NE,L,R=301]
and then using
links
jQuery functions like .hide(),.fadeIn(),.fadeOut() are not properly working after giving the transition duration property.
example : hide(2000) then after 2 second it is hiding but the animation is not getting applied and it is the common problem i am having with all the jQuery functions
if i delete the transition-duration then all working with animation. Why this is happening? Someone explain it to me and also give solution to solve this problem
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Opening Sequence </title>
<link rel="stylesheet" href="open.css">
<script src="jquery.js"></script>
<script src="open.js"></script>
</head>
<body>
<br><br>
<section id="container">
<p id="content"> This is cool </p>
</section>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
#container
{
width:600px;
height:600px;
margin:0 auto;
border:1px solid red;
line-height:500px;
}
#content
{
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
text-align:center;
transition-duration:3s;
}
JS
$(document).ready(function()
{
//alert("Application has been started");
$i=0;
var ob=$('#content');
ob.slideUp(4000);
//ob.hide(2000);
});
problem is after 4 seconds it is hiding but not sliding up, in the sense not animating like hiding from the down to the top
I have a problem with my code in javascript. I want to edit code to make my mini game.
This is the original code I'm trying to edit. It's about bouncing balls. When you press the button the balls starts bouncing. The balls are in random position and every ball is moving randomly. When they are about to escape the border they are returning. Everything in this code works perfect.
Original code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#border {height:500px; width:500px; border:1px solid grey; margin:auto; position:relative}
b {display:block; height:10px; width:10px; border-radius:5px; background:red; position:absolute}
h1,div {text-align:center; margin:10px}
</style>
</head>
<body>
</body>
<h1>Balls</h1>
<div id='border'>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
</div>
<div>
<button onclick="run=false"> Stop </button>
<button onclick="run=true;start()"> Start </button>
</div>
<script>
var b=document.getElementsByTagName('B');
var run=false;
var i;
for(i=0;i<b.length;i++)
{
b[i].x=Math.random()*490;
b[i].y=Math.random()*490;
b[i].vx=Math.random()*20-10;
b[i].vy=Math.random()*20-10;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
function start()
{
var i;
for(i=0;i<b.length;i++)
{
b[i].x+=b[i].vx;
b[i].y+=b[i].vy;
if(b[i].x>490 || b[i].x<0) b[i].vx*=-1;
if(b[i].y>490 || b[i].y<0) b[i].vy*=-1;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
if(run)
setTimeout(start,20);
}
</script>
</html>
I want to replace the balls with images. I think I did it but it doesn't work at all. Images are always in the same position. When I press the button to move them, images are moving in the same direction. Images are escaping from border (they should bounce on the walls and return).
My edit:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#border {height:500px; width:500px; border:1px solid grey; margin:auto; position:relative}
img {display:block; height:10px; width:10px; position:absolute}
h1,div {text-align:center; margin:10px}
</style>
</head>
<body>
</body>
<h1>Balls</h1>
<div id='border'>
<img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
<img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
<img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
</div>
<div>
<button onclick="run=false"> Stop </button>
<button onclick="run=true; start()"> Start </button>
</div>
<script>
var b=document.getElementsByTagName('IMG');
var run=false;
var i;
for(i=0; i<b.length; i++)
{
b[i].x=Math.random()*490;
b[i].y=Math.random()*490;
b[i].vx=Math.random()*20-10;
b[i].vy=Math.random()*20-10;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
function start()
{
var i;
for(i=0; i<b.length; i++)
{
b[i].x+=b[i].vx;
b[i].y+=b[i].vy;
if(b[i].x>490 || b[i].x<0) b[i].vx*=-1;
if(b[i].y>490 || b[i].y<0) b[i].vy*=-1;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
if(run)
setTimeout(start,20);
}
</script>
</html>
I want my images to behavior like the balls in original code.
You're my only hope.
Instead of using <img>, use
b {background-image: url("http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354");
background-repeat: no-repeat;
background-position: right top;}
The reason the code is not working with img tags is outlined in the documentation:
HTMLImageElement.x Read only Returns a long representing the
horizontal offset from the nearest layer. This property mimics an old
Netscape 4 behavior.
HTMLImageElement.y Read only Returns a long
representing the vertical offset from the nearest layer. This property
mimics an old Netscape 4 behavior.
As a work around you can use background-image on b tags or change the coordinates property names to i.e. currentX and currentY
I'm trying to get all title out of body text.
I created a button and linked my function to it.
However, when I click on it, it disappears and I want it to stay in the same place because I will add other buttons with other functions.
Do you know any idea how I could keep it always in there?
I tryed to use fixed position but soon realised that it just fixes the button on top if I scroll down for example.
Also, when I get the titles my text is in different shrift, I just wonder why is that?
Your guidance will be appreciated.
This is what I have at the moment:
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#navigation li{
display:inline;
postion:absolute;
}
#navigation a{
padding:2px 2px;
background-color:#09F;
color:#FFFFFF;
}
#navigation a:hover{
background-color:#F90;
color:#666;
}
</style>
<div id="navigation">
<a href="#"><input type=button onclick="myFunction()">
</div>
</head>
<body>
<div>
<p id="demo">
<pre>
<b>This is one title</b>
I'm writing here
the text that I
don't need to get.
<b>Other title</b>
And so we'll test
whether this thing works.
</p>
</pre>
</div>
<script>
function myFunction() {
var text = document.body.innerText;
var titles =text.match(/^\n(.+?)\n\n/mg);
for (var i = 0; i < titles.length; i++) {
document.write(titles[i] + "<br />" + "<br />");
}
}
</script>
</body>
</html>
Basically you have an opening <a> tag but not a closing one. That makes your whole website a link. But apart from that you had a lot of invalid HTML. Closing tags that were mixed up and HTML between </head> and <body>.
Your HTML should look like:
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style>
#navigation li{
display:inline;
postion:absolute;
}
#navigation a{
padding:2px 2px;
background-color:#09F;
color:#FFFFFF;
}
#navigation a:hover{
background-color:#F90;
color:#666;
}
</style>
</head>
<body>
<div id="navigation">
<input type=button onclick="myFunction()" />
</div>
<div>
<p id="demo">
<pre>
<b>This is one title</b>
I'm writing here
the text that I
don't need to get.
<b>Other title</b>
And so we'll test
whether this thing works.
</pre>
</p>
</div>
<script>
function myFunction() {
var text = document.body.innerText;
var titles =text.match(/^\n(.+?)\n\n/mg);
for (var i = 0; i < titles.length; i++) {
document.write(titles[i] + "<br />" + "<br />");
}
}
</script>
</body>
</html>
Here you go. I have fixed the HTML, made it more semantic (by removing the onclick from the HTML), and made the algorithm simpler by using document.getElementsByTagName().
New code:
var r = document.getElementById('results');
document.getElementById('btn').onclick = myFunction;
function myFunction() {
var titles = document.getElementsByTagName('b');
for (var i = 0; i < titles.length; i++) {
r.innerHTML += titles[i].innerHTML + "<br />" + "<br />";
}
}