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...
I'm a newbie in html and javascript. And I'm trying to take a screenshot of my page of html and save it as jpg or png file.
Here is my html image
I want to take a screenshot of right side(colored with gray) with those drag and drop divs by pressing Image Save button at the right corner from image.
How can I take a screen shot with html and javascript?
I saw some of html2canvas but that is not what I want. I think..
Does anybody have an idea for this?
Thanks,
p.s. if you want the code of my html, I can EDIT
You can only capture images or video frames as a screenshot using Canvas. But if you want to capture particular element on a web page try some library like this: html2canvas
Here is the code:
Note: Adjust dimensions carefully in drawImage() function
$(".drag").draggable();
$(".drag").droppable();
var takeScreenShot = function() {
html2canvas(document.getElementById("container"), {
onrendered: function (canvas) {
var tempcanvas=document.createElement('canvas');
tempcanvas.width=350;
tempcanvas.height=350;
var context=tempcanvas.getContext('2d');
context.drawImage(canvas,112,0,288,200,0,0,350,350);
var link=document.createElement("a");
link.href=tempcanvas.toDataURL('image/jpg'); //function blocks CORS
link.download = 'screenshot.jpg';
link.click();
}
});
}
#container{
width:400px;
height:200px;
}
#rightcontainer{
width:300px;
height:200px;
background:gray;
color:#fff;
margin-left:110px;
padding:10px;
}
#leftmenu{
color:#fff;
background-color:green;
width:100px;
height:200px;
position:fixed;
left:0;
padding:10px;
}
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.drag{
width:40px;
height:20px;
background-color:blue;
z-index:100000;
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<button onclick="takeScreenShot()">Snapshot</button>
<div id="container">
<div id="leftmenu">
Left Side
<div class="drag">
</div>
<div class="drag">
</div>
<div class="drag">
</div>
Drag----------->
&
Click Snapshot
</div>
<div id="rightcontainer">
Right Side
</div>
</div>
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 just started making my first website, and this is the first REAL problem that I have run into. I'm trying to make "Sign in" and "Sign up" buttons that automatically change their text if the user is logged in. To do it, I'm using Javascript to read the localStorage username value, check if it equals null, and then set both button's .innerHTML based on that. The problem? My Javascript won't run. Here's the HTML/Javascript code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Phyre-Home</title>
<link href="Phyre-Home.css" rel="stylesheet">
<script language="javascript">
page.onload function{
var profile = document.getElementById("Profile");
var signout = document.getElementById("SignUpOut");
var username = localStorage.getItem('phyreUsername');
if(username == null) {
profile.innerHTML = "Sign in";
signout.innerHTML = "Sign up";
}else{
profile.innerHTML = username;
signout.innerHTML = "Sign out";
}
}
</script>
</head>
<body>
<header>
<img src="PhyreSiteHeader.bmp" alt="Phyre">
<button id="SignUpOut"></button>
<button id="Profile"></button>
<h1 style="display:none">Fire</h1>
<script language="javascript">
</script>
</header>
<nav>
<ul>
<li><b>Home</b></li>
<li>Profile</li>
<li>Games</li>
<li>Chat</li>
<li>Videos</li>
</ul>
</nav>
<aside>
<h1><b>Page Nav</b><br></h1>
<p><i>This page does not have its own, separate navigation section. Sorry.</i></p>
<h1><b>Ads</b><br></h1>
</aside>
<article>
</article>
</body>
</html>
...And here's the CSS, just in case it matters:
article, aside, figure, figcaption, footer, header, main, nav, section, summary {
display:block;
}
header:img{
max-width:90%;
}
body{
background-color:rgb(75, 75, 75);
margin:0px;
font-family:times new roman, serif;
}
header{
width:100%;
float:top;
}
#SignUpOut{
position:absolute;
top:0%;
right:0%;
}
#Profile{
position:absolute;
top:0%;
right:7.5em;
}
h1{
text-align:center;
font-family:AR BLANCA, times new roman, serif;
}
ul{
list-style-type:none;
margin:0;
padding:0;
}
li{
float:left;
width:20%;
font-size:large;
text-align:center;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:2px;
margin-bottom:0.5%;
}
aside{
float:left;
width:20%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
margin-right:0.5%;
}
article{
float:right;
width:79.5%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
}
The culprit is the first Javascript section. Please help if you can, I'm pretty new to HTML5, CSS3, and Javascript.
P.S. I don't have a domain or anything yet, so none of the links are valid.
As far as I know, there's no such thing as page, you probably want window
window.onload = function() {...
or just drop the onload handler and move the script to the bottom, right before </body>
The main issue is that page is not a JavaScript variable.
You could do something like
function myLoadFunction() {
...
}
then
<body onload="myLoadFunction()">
...
</body>
Alternatively you can use window.onload
window.onload = function () {
...
};
I have made you a completely working example here, that does everything you are asking, you may simply click this link to see it in action. You may click the second link in order to see the code and dissect it a bit.
Working Sample (with username)
Just click the link to see it work.
Working Sample (without username)
Just click the link to see it work.
Working Sample (Code)
Just click the link, then click Run with JS to see it work.
Now that I have shown you a completely working solution, allow me to explain why it works.
You do not appear to be using any sort of external library, this means that there is really nothing running overhead to try and help manage when these events fire and such.
You did not declare any kind of id on the elements you were trying to fetch
To demonstrate this, I cite your original code;
var profile = document.getElementById("Profile");
Which was assumed to be functioning on the following <a> tag.
<li>Profile</li>
The problem here is that document.getElementById actually needs an id to get by. This is remedied by ammending the <a> tag with an id, like this.
<li><a id="Profile" href="www.phyregaming.com/profile">Profile</a></li>
The next part of the problem is that you needed this code to run only after the page had loaded. But because you're running just normal javascript, it will run in the order it is seen - unless wrapped inside of a function. Because page.onload is not a valid function, your javascript simply threw an error, and since page.onload is not a real function, it didn't quite understand what its own problem was, so it didn't give you any really useful information.
I fixed this by first wrapping your code in a function, like this.
<script type="text/javascript">
function ready() {
// your javascript code here
}
</script>
What this meant is that when the page hit that part, it created the function, but it did not run it.
Then you needed to run the function, but only once the other parts of the page were ready. We did this using the onload attribute of the <body> tag, like this;
<body onload="ready()">
And that is really all there is to it! From there it was just a matter of assigning the id attributes where needed, and doing a little bit of housekeeping to the HTML and CSS.
I made some changes to help your sample run a bit better, most noticed is that I removed this part of your CSS
#Profile { position: absolute; top: 0%; right: 7.5em; }
I am not sure if you need it to be positioned like that, but from what it looked like, you wanted to make sure that the Profile section is also where the user finds the Login and Logout buttons. I accommodated by moving the <li> that contained those elements to the last ones in the list, this will ensure they are always rendered in the upper right part of the page, for this example.
The first one is just a sample showing how to run the code when the page is loaded. The second shows where you would put your actual code, but I do not know what your specific javascript is aiming to accomplish, so I commented it out.
Here is the complete working code.
You can remove the line localStorage.setItem("phyreUsername", "Ciel"); or comment it out, to see how the behavior changes based on whether or not a username is found.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript">
function ready(){
// comment this line out to test different behaviors
localStorage.setItem("phyreUsername", "Ciel");
var username = localStorage.getItem("phyreUsername");
var profile = document.getElementById("SignIn");
var signout = document.getElementById("SignUpOut");
if (username == null) {
profile.innerHTML = "Sign in";
signout.innerHTML = "Sign up";
} else {
profile.innerHTML = username;
signout.innerHTML = "Sign out";
}
}
</script>
</head>
<body onload="ready()">
<nav>
<ul>
<li><b>Home</b></li>
<li>Games</li>
<li>Chat</li>
<li>Videos</li>
<li>
Sign In
Sign Up
</li>
</ul>
</nav>
<aside>
<h1>
<b>Page Nav</b>
</h1>
<p style="font-style: italic">This page does not have its own, separate navigation section. Sorry.</p>
<h1>Ads</h1>
</aside>
</body>
</html>
CSS
article, aside, figure, figcaption, footer, header, main, nav, section, summary {
display:block;
}
body {
margin: 0;
}
nav {
width: 100%;
margin: 0;
padding: 0;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
float: left;
width: 20%;
font-size: large;
text-align: center;
border: solid rgb(187,15,23) 2px;
margin-bottom: 0.5%;
box-sizing: border-box;
background: rgb(255, 0, 0);
}
body {
background-color:rgb(75, 75, 75);
margin:0px;
font-family:times new roman, serif;
}
header {
width:100%;
float:top;
}
h1 {
font-weight: bold;
}
aside {
float:left;
width:20%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
margin-right:0.5%;
}
article {
float:right;
width:79.5%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
}
I hope that this gives you enough information to really start making some headway. If you have further questions, please ask.
I want to be able to grab all the bubbles inside the "bubble game" div and put an onclick on them so that they dissapear(delete from the page) when being clicked. I have tried making a variable in javascript that contains all bubbles in the div and then put an onclick on them but it doesn't seem to work. Preferably not using jquery.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bubbles</title>
<link href="bubbles.css" rel="stylesheet">
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/bubbles.js"></script>
<script src="scripts/java.js"></script>
</head>
<body>
<!--background bubbles-->
<div id="b-blue" class="b" data-speed="1"></div>
<div id="b-green" class="b" data-speed="2"></div>
<div id="b-red" class="b" data-speed="4"></div>
<!--bubble text-->
<div id="bText">
B<br />U<br />B<br />B<br />L<br />E<br />S<br />!
</div>
<!--bubble game-->
<div id="bubbleGame">
<!-- <div class="bubble"></div> -->
</div>
<!--bubble score and reset-->
<div id="bottomCorner">
<div id="reload">refresh...</div>
<div id="score">0</div>
</div>
</body>
</html>
body{
background:black;
}
#bText{
width:300px;
float:left;
height:auto;
color:white;
font-size:300px;
text-align:center;
font-family:'spilt_inkregular', Verdana, Geneva, sans-serif;
position:relative;
z-index:10;
opacity:0.8;
}
.b{
width:100%;
height:1000%;
position:fixed;
top:0;
left:0;
}
#b-blue{ background:url(images/b-blue.png); }
#b-red{ background:url(images/b-red.png); }
#b-green{ background:url(images/b-green.png); }
#bubbleGame{
width:75%;
height:100%;
position:fixed;
right:2%;
top:0;
}
.bubble{
background:url(images/b-white.png);
background-size:cover;
position:absolute;
}
window.onload = bubblegame;
function bubble(){
var bubbleburst = document.querySelectorAll("#bubbleGame");
for(var i=0; i<bubbleburst.length; i++){
bubbleburst[i].onclick = burst;
}
}
function burst(){
alert("hi");
}
$(document).ready(function() {
$("#bubbleGame").on("click", ".bubble", function() {
$(this).hide();
})
});
If you would like to remove the element from the DOM, use $(this).remove(), instead of $(this).hide().
You should use event-Delegation:
I prepared a simplified Fiddle
document.getElementById("bubblegame").addEventListener("click", function(element){
var target=element.target;
if(target.id==='bubblegame') return;
target.style.display='none';
});
In this case, you do not add eventListener to the bubbles itself, but to the parent div.
When an element is clicked, the event bubbles up to the "catching" div, where a central dispatcher is waiting for that event. So you have the advantage of having one handler to deal with all events. For more information about delegation of events, take a look here
Since you seem to be using jQuery:
$("#bubbleGame > .bubble").click(function() {
$(this).hide();
});
without Jquery:
var bubbles = document.querySelectorAll('.bubble');
for (var bubble of bubbles) {
bubble.onclick = deleteBubble
}
function deleteBubble() {
this.parentNode.removeChild(this);
}
FIDDLE
You could use jQuery and do it like this
$(document).ready(function() {
$(".bubble").click(function() {
$(".bubble").hide();
})
});