Develop Reference

Stop changing cursor location when innerHTML is changed

How do I stop the cursor changing location when innerHTML is edited by javascript?
I am currently making a little code editor project where I want text highlighting, but to do that I must edit the innerHTML / DOM element to add a span into it. But when that happens it changes location to start of text.
var c = document.getElementById("c");
var t = setInterval(function(){
c.innerHTML = $("#c").text().split("lol").join("<span class='hi1'>lol</span>");
},1);
[contenteditable] {
border: 1px solid gray;
}
.hi1 {
color: rgb(51, 153, 255);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable id="c">
write "l o l" without spaces. Then continue to write and try to change location with arrow keys / mouse
</div>

Positioning a timer created textarea ,that repeats on a timer , in a javascript coded tabs in a formatted website

I have a website (html/css/javascript/php) on a WAMP server. The format is header. nav (on the left), section (to the right of the nav div). In the section I have a javascript 3 tabs container. I am pulling the info from a .php file and displaying the retrieved data in the textarea. The textarea is on a timer so each time new data is retrieved, a new textarea is created below the current textarea with the new data.
My problem, since Javascript is loaded into the page last, the textareas are positioned outside of the tabbed div container and run across all boundaries and borders.
How can I position the newly created textareas so they will appear and stay inside the first tab? Here is the code I am using so far. I have tried many solutions and none worked, even absolute positioning did not work.
<div id="section">
<!-- these are the tags ID and the href links back to itself, the page does not navigate forward or backward-->
<ul id="tabs">
<li>.........Orders Placed</li>
<li>.......Delivered</li>
<li>.......Cancelled</li>
</ul>
<div class="tabContent" id="order" style="max-height:800px;overflow-y:scroll;border:1px solid red;">
<div>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript" >
function myFunction() {
var x = document.createElement("TEXTAREA");
var t = document.createTextNode("<?php include('NewIncomingOrders.php')?>");
x.appendChild(t);
document.body.appendChild(x);
setTimeout(myFunction, 9000);
}
</script>
</div>
</div>
and the css I have tried: more than on way here, and I could not get any of them to work. I have a button included in the code to start the timed function.
TEXTAREA{
width:80em;
height:4em;
border: 1px solid #FFFFFF;
position:static;
left: 195px;
top: 1px;
}
OR THIS METHOD:
.section{
position:relative;
height:200px;
width:400px;
background-color:blue;
}
.tabContent{
position:absolute;
bottom:2px;
left:2px;
right:2px;
}
.tabContent textarea{
width:100%;
height:30px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
If anyone has an idea how to position the textarea so that it stays within the tab, or hints on what direction to go, please let me know!
Here is a picture to let you know what I mean.
Tab_Not_Working:

Dan O put me on the right path. I got it working:
<script type="text/javascript" >
function myFunction() {
var x = document.createElement("TEXTAREA");
var t = document.createTextNode("<?php include('NewIncomingOrders.php')>");
x.appendChild(t);
document.getElementById("order").appendChild(x);
setTimeout(myFunction, 9000);
}
</script>

Getting User input with javascript while using three.js?

I am working off of this three.js example (http://threejs.org/examples/#webgl_interactive_cubes) and am trying to find a way for the user to add boxes with specified X, Y, & Z positions.
I could do this with a javascript prompt
var boxes = prompt("X Position", 500); // 500 = Default position
However, I want to make it possible for the user to enter multiple fields (E.g. x, y, z positions; size of box, etc.), so I want to add input boxes. The only way I know how to do this is to use html/css/javascript with something like this -
<!-- CSS formating of Input Boxes -->
<style type = "text/css">
#x_pos {
position: absolute;
bottom: 120px;
left: 10px;
width: 130px;
background-color: #3c4543;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 2px solid #000000;
font-family: Futura;
}
... Repeat for #y_pos & #z_pos
</style>
<!-- Adding a div for each Input Box -->
<div id="x_pos">
<input type="text" id="xpos">
</div>
... Repeat for #y_pos & #z_pos
<h1>Add Node here...</h1>
<!--Allowing user to add input to the Input Box and saving that value as the x, y, & z positions -->
<script text="text/javascript">
var xPosition;
$(document).ready(function(){
$('#xpos').val('Longitude');
$("#xpos").change(function(){
xPosition = $('#xpos').val();
})
... Repeat for #ypos & #zpos
});
However, while I can get the Header and input box to appear, they have absolutely no functionality. I can't type anything in the text boxes and I can't add .click(function () ...) functionality to the h1 text. It's almost like all html and javascript functionality I am used to has been disabled by the rest of the three.js code. My final goal will be to have .click call a function that I can have the divs I defined above appear underneath the h1 "Add Node here..." like this (http://jsfiddle.net/zsfE3/9/).
Can anyone explain to me what is going on here and how I might be able to fix it? Or does anyone have a better way to do this? Thanks guys for any help!

Consinder using the datGUI lib for your project. I had great success with it together with Three.Js. Also there are a number of examples also using it. See this blog post for a tutorial.

Try Something Like This:
html:
<input type = "text" id = "input1">
<button>ADD BOX</button>
</input>
css:
canvas{z-index:-1;}
#input1{
position:fixed;
right:40px;
top:40px;
z-index:1;
width:5%;
height:60px;
}
Good Luck!

How to create a function in which a box moves in accordance with 2 user inputs (direction and # of pixels to move)

Here's what I have so far:
The following is my CSS for the box:
p
{
width: 100px;
padding: 25px;
border: 25px solid red;
margin: 25px;
position: fixed;
top: 100px;
}
And here is the JavaScript and HTML I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Box Mover</title>
<link rel="stylesheet"; style="text/css"; href="style.css">
</head>
<script>
function initialize()
{
var positionBox = document.getElementById("positionBox");
positionBox = addEventListener("click", moveBox);
}
function moveBox()
{
var positionBox = document.getElementById("positionBox");
positionBox.style.position = "absolute";
}
</script>
<body>
<p>This is a box.</p>
<form>
Number of pixels to move:
<input id="numPixels">
<br>
<br>
Direction to move:
<select id="directionSelection">
<option>Up</option>
<option>Down</option>
<option>Left</option>
<option>Right</option>
</select>
<br>
<br>
<input id="positionBox" type="button" value="Move Box">
</form>
</body>
</html>
The part I am stumped on is how I can get my positionBox button to interact with my directionSelection drop-down menu and numPixels within my JavaScript. Could someone help me out here?
In my class yesterday, my prof showed us an example of getting a button to move with hard-coded parameters, but now I need to do that with a box, making it move in the direction the user specifies, along with the number of pixels to move. I could also post that example code if it could be helpful to anyone.

The part I am stumped on is how I can get my positionBox button to interact with my directionSelection drop-down menu and numPixels within my JavaScript
In your moveBox function, use document.getElementById("numPixels").value and document.getElementById("directionSelection").value to get the number of pixels and the direction to move.
showed us an example of getting a button to move with hard-coded parameters, but now I need to do that with a box
To be able to move the box from your moveBox function, you will need to add an id attr to the <p>This is a box.</p> element so that you can select it with var box = document.getElementById("myBox");. Then, apply the values to box.style.top and box.style.left to move the box around instead of applying the values to the positionBox.

DIV dynamically resizing using vertical slide

This is a little hard to explain, but I'm going to do my best:
My webpage is divided using two divs: one floating at left, and other floating at right (50% each one more or less).
I want to add a new feature: dynamically resize. That is: when I click on right border of DIV#1 or click on left border of DIV#2, each one should resize from left to right or right to left.
Maybe you don't understand me, but this effect is what I need (from this plugin):
This plugin only works for images, not divs. I need the same effect on my divs. Actually, I'm trying to use JQueryUI Resizable class but I don't know how to synchronize both resizes.
Can you help me? Any suggestion or track about this would be really appreciated. Thanks!

I created this functionality using 15 lines of JS/jQ: http://jsfiddle.net/xSJcz/
Hope it helps! You could easily modify it to respons to click, or similar.
EDIT: For future records, here is the answer's CSS:
#left,#right{
border:1px solid #aaa;
float:left;
height:100px;
width:48%;
}
#handle{
background:#000;
float:left;
height:100px;
margin:1px;
width:1%;
}
HTML:
<div id="left">
Left
</div>
<div id="handle"></div>
<div id="right">
Right
</div>
JS:
var h = $('#handle'),
l = $('#left'),
r = $('#right'),
w = $('body').width() - 18;
var isDragging = false;
h.mousedown(function(e){
isDragging = true;
e.preventDefault();
});
$(document).mouseup(function(){
isDragging = false;
}).mousemove(function(e){
if(isDragging){
l.css('width', e.pageX);
r.css('width', w - e.pageX);
}
});