We Keep Coding

I need css animation on whole code and bullets after line break in the string. Also need control on time of loop

How can i apply bullets in this below mentioned code after line break. I mean when i break line, i need next line to start with the bullet. Also please apply css animation on this code. Also apply timing i-e when i run code, i can control after how many milliseconds the typing starts and when typing ends, i can control after how many milliseconds it starts again. Thanks
var typeString = ['I\'m Mr. Frits and I love Pakistan...:)'];
var i = 0;
var count = 0
var selectedText = '';
var text = '';
(function type() {
if (count == typeString.length) {
count = 0;
}
selectedText = typeString[count];
text = selectedText.slice(0, ++i);
document.getElementById('typing').innerHTML = text.fontsize(6);
document.getElementById('typing').style.fontFamily = "monospace";
document.getElementById("typing").style.color = "black";
document.getElementById("typing").style.fontWeight = "normal";
if (text.length === selectedText.length) {
count++;
i = 0;
}
setTimeout(type, 300);
}());
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds) {
break;
}
}
}
<pre id="typing" class="typing"></pre>

Just add \n and the unicode •
var typeString = ['• I\'m Mr. Frits\n• and I love Pakistan...:)'];
var i = 0;
var count = 0
var selectedText = '';
var text = '';
(function type() {
if (count == typeString.length) {
count = 0;
}
selectedText = typeString[count];
text = selectedText.slice(0, ++i);
document.getElementById('typing').innerHTML = text.fontsize(6);
document.getElementById('typing').style.fontFamily = "monospace";
document.getElementById("typing").style.color = "black";
document.getElementById("typing").style.fontWeight = "normal";
if (text.length === selectedText.length) {
count++;
i = 0;
}
setTimeout(type, 300);
}());
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds) {
break;
}
}
}
<pre id="typing" class="typing"></pre>

use • for the bullet character when generating the text variable
text = '• '+ selectedText.slice(0, ++i);

How to add wrapper on the word with space

In JS i need to add span as wrapper on the entire document text words.using below code i can able to add wrapper
function walk(root)
{
if (root.nodeType == 3) // text node
{
doReplace(root);
return;
}
var children = root.childNodes;
for (var i = 0;i<children.length ;i++)
{
walk(children[i]);
}
}
function doReplace(text)
{
var start = counter;
counter = counter+text.nodeValue.length;
var div = document.createElement("div");
var string = text.nodeValue;
var len = string.trim();
if(len.length == 0){
return;
}
var nespan = string.replace(/\b(\w+)\b/g,function myFunction(match, contents, offset, s){
var end = start + contents.length;
var id = start+"_"+end;
start = end;
return "<span class='isparent' id='"+id+"'>"+contents+"</span>";
});
div.innerHTML = nespan;
var parent = text.parentNode;
var children = div.childNodes;
for (var i = children.length - 1 ; i >= 0 ; i--)
{
parent.insertBefore(children[i], text.nextSibling);
}
parent.removeChild(text);
}
using above code ill get below result
input :
Stackoverflow is good
out put:
<span>Stackoverflow</span> <span>is</span> <span>good</span>
expecting result:
<span>Stackoverflow </span><span>is </span><span>good</span>

Add optional space character to your regex after the word but before the second word boundary: \b(\w+\s*)\b

Stop Looping Text but still run the effect

Example
var text = 'ENTER...';
var chars = text.split('');
var enter = document.getElementById("enter")
var i = 0;
setInterval (function(){
if (i < chars.length){
enter.innerHTML += chars[i++];
}else{
i = 0;
enter.innerHTML = "";
}
}, 200);
I'm trying to have this typing "enter" effect and I am wondering how to make it only go once. So it will type out "ENTER..." and then stop.
Example

var text = 'ENTER...';
var enter = document.getElementById("enter")
var i = 0;
(function nextLetter() {
enter.innerHTML = text.substr(0, ++i);
if (i < text.length) {
setTimeout(nextLetter, 200);
}
})();
edit: you either have to use setTimeout (one time "sleep"), or remember return value of setInterval and destroy that timer by clearInterval after you don't need it/want it running.

If you use interval, you have to stop the it with clearInterval. Stop it inside the interval function, which is declared as a variable, in the if-statement:
var text = 'ENTER...';
var enter = document.getElementById("enter")
var i = 0;
var interval = setInterval(function() {
enter.innerHTML += text[i];
i += 1;
if(i === text.length) {
clearInterval(interval);
}
}, 200);
JSFiddle

var text = 'ENTER...';
var chars = text.split('');
var enter = document.getElementById("enter")
var i = 0;
var interval = setInterval (function(){
if(i == chars.length) {
clearInterval(interval);
return;
}
if (i < chars.length){
enter.innerHTML += chars[i++];
}else{
i = 0;
enter.innerHTML = "";
}
}, 200);
<div id="enter"></div>

Large list rendering in JavaScript

I am trying to render the list based on virtual rendering concept. I am facing some minor issues, but they are not blocking the behaviour. Here is the working fiddle http://jsfiddle.net/53N36/9/ and Here are my problems
Last items are not visible, I assume some where I missed indexing.(Fixed, Please see the edit)
How to calculate scrollPosition if I want to add custom scroll to this.
Is this the best method or any other?
I have tested it with 700000 items and 70 items in chrome. Below is the code
(function () {
var list = (function () {
var temp = [];
for (var i = 0, l = 70; i < l; i++) {
temp.push("list-item-" + (i + 1));
}
return temp;
}());
function listItem(text, id) {
var _div = document.createElement('div');
_div.innerHTML = text;
_div.className = "listItem";
_div.id = id;
return _div;
}
var listHold = document.getElementById('listHolder'),
ht = listHold.clientHeight,
wt = listHold.clientWidth,
ele = listItem(list[0], 'item0'),
frag = document.createDocumentFragment();
listHold.appendChild(ele);
var ht_ele = ele.clientHeight,
filled = ht_ele,
filledIn = [0];
for (var i = 1, l = list.length; i < l; i++) {
if (filled + ht_ele < ht) {
filled += ht_ele;
ele = listItem(list[i], 'item' + i);
frag.appendChild(ele);
} else {
filledIn.push(i);
break;
}
}
listHold.appendChild(frag.cloneNode(true));
var elements = document.querySelectorAll('#listHolder .listItem');
function MouseWheelHandler(e) {
var e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
console.log(delta);
//if(filledIn[0] != 0 && filledIn[0] != list.length){
if (delta == -1) {
var start = filledIn[0] + 1,
end = filledIn[1] + 1,
counter = 0;
if (list[start] && list[end]) {
for (var i = filledIn[0]; i < filledIn[1]; i++) {
if (list[i]) {
(function (a) {
elements[counter].innerHTML = list[a];
}(i));
counter++;
}
}
filledIn[0] = start;
filledIn[1] = end;
}
} else {
var start = filledIn[0] - 1,
end = filledIn[1] - 1,
counter = 0;
if (list[start] && list[end]) {
for (var i = start; i < end; i++) {
if (list[i]) {
(function (a) {
elements[counter].innerHTML = list[a];
}(i));
counter++;
}
}
filledIn[0] = start;
filledIn[1] = end;
}
}
//}
}
if (listHold.addEventListener) {
listHold.addEventListener("mousewheel", MouseWheelHandler, false);
listHold.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else listHold.attachEvent("onmousewheel", MouseWheelHandler);
}());
Please suggest me on this.
EDIT:
I have tried again and I am able to fix the indexing issue. http://jsfiddle.net/53N36/26/
But how can I calculate the scroll position based on the array list currently displayed.

Is this the best method or any other?
I think something that would make this much easier is not to try to handle scrolling yourself.
In this fiddle I show that you can let the browser handle scrolling for you, even though we are using virtual rendering.
Using .scrollTop I detect where the browser thinks the user is looking, and I draw in items based on that.
You'll note that if you set hidescrollbar to false and the user uses it to scroll, my method still runs fine.
Therefore, to calculate scroll position you can just use .scrollTop.
And as for custom scrolling, just make sure you influence the .scrollTop of #listHolder and recall refreshWindow()
CODE FROM FIDDLE
(function () {
//CHANGE THESE IF YOU WANT
var hidescrollbar = false;
var numberofitems = 700000;
//
var holder = document.getElementById('listHolder');
var view = null;
//get the height of a single item
var itemHeight = (function() {
//generate a fake item
var div = document.createElement('div');
div.className = 'listItem';
div.innerHTML = 'testing height';
holder.appendChild(div);
//get its height and remove it
var output = div.offsetHeight;
holder.removeChild(div);
return output;
})();
//faster to instantiate empty-celled array
var items = Array(numberofitems);
//fill it in with data
for (var index = 0; index < items.length; ++index)
items[index] = 'item-' + index;
//displays a suitable number of items
function refreshWindow() {
//remove old view
if (view != null)
holder.removeChild(view);
//create new view
view = holder.appendChild(document.createElement('div'));
var firstItem = Math.floor(holder.scrollTop / itemHeight);
var lastItem = firstItem + Math.ceil(holder.offsetHeight / itemHeight) + 1;
if (lastItem + 1 >= items.length)
lastItem = items.length - 1;
//position view in users face
view.id = 'view';
view.style.top = (firstItem * itemHeight) + 'px';
var div;
//add the items
for (var index = firstItem; index <= lastItem; ++index) {
div = document.createElement('div');
div.innerHTML = items[index];
div.className = "listItem";
view.appendChild(div);
}
console.log('viewing items ' + firstItem + ' to ' + lastItem);
}
refreshWindow();
document.getElementById('heightForcer').style.height = (items.length * itemHeight) + 'px';
if (hidescrollbar) {
//work around for non-chrome browsers, hides the scrollbar
holder.style.width = (holder.offsetWidth * 2 - view.offsetWidth) + 'px';
}
function delayingHandler() {
//wait for the scroll to finish
setTimeout(refreshWindow, 10);
}
if (holder.addEventListener)
holder.addEventListener("scroll", delayingHandler, false);
else
holder.attachEvent("onscroll", delayingHandler);
}());
<div id="listHolder">
<div id="heightForcer"></div>
</div>
html, body {
width:100%;
height:100%;
padding:0;
margin:0
}
body{
overflow:hidden;
}
.listItem {
border:1px solid gray;
padding:0 5px;
width: margin : 1px 0px;
}
#listHolder {
position:relative;
height:100%;
width:100%;
background-color:#CCC;
box-sizing:border-box;
overflow:auto;
}
/*chrome only
#listHolder::-webkit-scrollbar{
display:none;
}*/
#view{
position:absolute;
width:100%;
}

allocation of amount to different fields javascript

I have a problem, in fact at least I do not know how. I have several fields revealing different amount  each position is identified by an id example: p1, p2, p3 etc. ...
So this fields contain amounts, in their decimal form.
what I wish to make. Because in fact I will be led to allocate an amount entered in a field that is a deposit.
that is to say as long as the amount of deposit is> 0 then I spread over the various post
For example let's say I have
300 = p1, p2 and p3 = 120 = 50
and I have a deposit for an amount of 450 Euros, so I would
p1 = 0 and o1 fields (fields that is revealing what has been imputed) 300
p2 = 0 and the fields 120 o2
p3 = 20 fields and o3 = 30
I actually tried by a number of conditions but I tangled brushes.
this is what it gave:
<script type="text/javascript">
function ventilation()
{
var montantacompte = document.getElementById("montantacompte").value;
var p1 = document.getElementById("p1").value;
var p2 = document.getElementById("p2").value;
var p3 = document.getElementById("p3").value;
var p4 = document.getElementById("p4").value;
var p5 = document.getElementById("p5").value;
var p7 = document.getElementById("p7").value;
var p8 = document.getElementById("p8").value;
var p9 = document.getElementById("p9").value;
var p10 = document.getElementById("p10").value;
var p11 = document.getElementById("p11").value;
var p12 = document.getElementById("p12").value;
var p13 = document.getElementById("p13").value;
if(p1>0 &&p1-montantacompte>=0)
{
f1=p1-montantacompte;
document.getElementById('p1').value=f1;
document.getElementById('o1').value=Math.round(montantacompte*100)/100;
}
if(p1>0 &&p1-montantacompte<=(p1+p2))
{
reste1=montantacompte-p1;
impute=p1;
impute2=reste1;
f1=m1-impute;
document.getElementById('p1').value=f1;
document.getElementById('o1').value=Math.round(impute*100)/100;
document.getElementById('o2').value=Math.round(impute2*100)/100;
}
}
</script>
I also tried with a loop but well I also tangled brush, my small knowledge of javascript does not help.
<script type="text/javascript">
function ventilation()
{
var reste = document.getElementById("montantacompte").value;
var ac = document.getElementById("montantacompte").value;
var p1 = document.getElementById("p1").value;
var p2 = document.getElementById("p2").value;
var p3 = document.getElementById("p3").value;
var p4 = document.getElementById("p4").value;
var p5 = document.getElementById("p5").value;
var p7 = document.getElementById("p7").value;
var p8 = document.getElementById("p8").value;
var p9 = document.getElementById("p9").value;
var p10 = document.getElementById("p10").value;
var p11 = document.getElementById("p11").value;
var p12 = document.getElementById("p12").value;
var p13 = document.getElementById("p13").value;
var c = 1;
while(reste>0 && c<13)
{
if(reste> 'p'+c)
{
reste = 'p'+c - ac;
document.getElementById('p'+c).value=Math.round(honoraires*100)/100;
print reste;
}
}
</script>
suddenly, I do not know because every time I do not arrived more advancing in both cases.
in advance thank you to all and anyone who can help me progress.
Sincerely yours.

As I understand this issue, the user inputs a Payment Amount then this amount is applied to line items on an order.
Input: 17100
Item 1: <input id="p1" class="items" value="16000.00 €"/>
Item 2: <input id="p1" class="items" value="535.00 €"/>
Item 3: <input id="p1" class="items" value="955.00 €"/>
function getItems()
{
var items = new Array();
var itemCount = document.getElementsByClassName("items");
for(var i = 0; i < itemCount.length; i++)
{
items[i] = document.getElementById("p" + (i+1)).value;
}
return items;
}
function setItems(items,payAmt)
{
document.getElementById("inputField").value = payAmt;
for(var i = 0; i < items.length; i++)
{
document.getElementById("p" + (i+1)).value = items[i];
}
}
function itemSum(items)
{
var sum = 0;
for(var i=0; i < items.length; i++)
{
sum = items[i] + sum;
}
return sum;
}
function payment(inputElm)
{
var items = getItems();
var payAmt = document.getElementById("inputField").value;
var i = 0;
var sum = itemSum(items);
while(payAmt != 0 && sum != 0)
{
var temp = items[i] - payAmt;
if(temp > 0)
{
items[i] = temp;
break;
}
else if(temp < 0)
{
items[i] = 0;
payAmt = temp*-1;
}
i++;
sum = itemSum(items);
}
setItems(items, payAmt);
}
I think that should do it if I understand your problem correctly. You'll need to make sure the IDs match up and this is untested so there'll be a bug or two in there more than likely.