We Keep Coding

javascript - Why do I get a if I script ?

I having hard time to insert a single space at the end of my </span> in a document.execCommand().
document.execCommand("insertHTML", false, "<span class='own-class2'>"+"Test"+"</span>");
The reason behind this is I want the cursor to be outside the <span> after having made the insertion.
Here is a simple jsFiddle to show you what I mean:
jsFiddle
In that example, if you click the image and then write something, the text will be green. That means the text is still inside the span.
So What I want is to insert a normal space after </span>.
What I have already tried:
a space like this '</span> ' -> I get no space in Chrome.
a space like this '</span> ' -> I get </span> in Chrome
So my question is how to add a single space in order to get a result equivalent to this '</span> ' or '</span> ' and not '</span> ' ?
WHAT I GET ON THE INSPECTOR : https://ibb.co/cqCW2x
if I do :
document.execCommand("insertHTML", false, "<span class='own-class2'>"+"Test"+"</span> ");

Maybe you could use the zero width no break space character (invisible character) : \uFEFF.
The advantage of this solution is it does not create an (maybe?) unwanted visible space after the span
function Test() {
document.execCommand("insertHTML", false, "<span class='own-class2'>"+"Test"+"</span>\uFEFF");
}
#textBox {
width: 540px;
height: 200px;
border: 1px #000000 solid;
padding: 0;
overflow: scroll;
}
.own-class2 {color:green;}
<div id="toolBar">
<button height="20px" onclick="Test()" >insert a span</button>
</div>
<div id="textBox" class="textbox" contenteditable="true"></div>

append strange behaviour

I have some application that adds elements to contentEditable div.
Something like this:
<div id="div" contentEditable="true"></div>
<button id='appendBtn'>append</button>
<style>
.bracket {
color: blue;
}
.template-content {
color: green;
}
#div {
border: solid 1px gray;
margin-bottom: 10px;
}
</style>
<script>
function appendContent() {
var content = "<span class='template-block'>" +
"<span class='bracket'>{</span>" +
"<span class='template-content'>param</span>" +
"<span class='bracket'>}</span>" +
"</span>";
$("#div").append(content);
}
document.getElementById ("appendBtn").addEventListener ("click", appendContent, false);
</script>
I wrote a working example in jsfiddle.
The problem is that when I click append and continue typing after added element all next text comes green. It happens because all next text pasts into last span tag (of class bracket with green color)...
<span class="bracket">}some text</span>
The solution is adding a after last closing span tag. Like this:
var content = "<span class='template-block'>" +
"<span class='bracket'>{</span>" +
"<span class='template-content'>param</span>" +
"<span class='bracket'>}</span>" +
"</span> ";
But it brings a lot of unwanted staff I have to do with the text after. How can I solve this?

Thats a default behaviour of content editable setting the pointer behind the last character inside. In Your case the pointer is set
<span class='bracket'>}--> pointer <--</span>
You could try a workaround with ​ entity (zero width space)
if you dont want the

how to do display none using css

<div class="span9">
<span class="disabled"><< previous</span><span class="current numbers">1</span> |
<span class="numbers">2</span> |
<span class="numbers">3</span>
<span class="next">next >></span>
I want to delete '|' sign after span. I am using cakephp pagination . Is it possible to delete thought css or jquery or javascript. Automatically its taking | sign from library pagination.

You can remove all the unwraped elements like this,
$('.span9').html($('.span9').children());
Fiddle

i think this is the easiest way to replace your | in span text hopefully you may use this
$(".span9").html($(".span9").html().split('|').join(""));
try this Fiddle

I think a solution where the | is replaced with is what you are looking for, then
$('span.numbers').each(function(){
var next = this.nextSibling;
if(next && next.nodeType==3 && next.nodeValue.trim()=='|'){
next.nodeValue = ' ';
//or this.parentNode.removeChild(next);
}
})
Demo: Fiddle

You can set font-size to 0 of the div and add font-sizes to spans.
div { font-size: 0px}
div span { font-size: 14px;padding: 3px;}
Fiddle

You can hide the span9 and make the other spans visible.
.span9 {
visibility: hidden;
}
.span9 span {
visibility: visible;
}

CSS List style type Using attribute value

I'm having some html elements like this
<div class="col-md-3">
<div class="olListPallette" data-numberStyle="counter(count, lower-alpha) '. '">type1</div>
</div>
<div class="col-md-3">
<div class="olListPallette" data-numberStyle='counter(count, upper-alpha) ". "'>type2</div>
</div>
<div class="col-md-3">
<div class="olListPallette" data-numberStyle='counter(count, lower-alpha) ") "'>type3</div>
</div>
What I'm trying to do is when a click a div, the attribute should be set to the <ol>. It has a counter in css and the new list style should be applied to the list items. Here is my list
<ol>
<li>first</li>
<li>second</li>
<li>thirs</li>
</ol>
and my js is
$('.olListPallette').click(function(){
$('ol').attr('data-numberStyle',$(this).attr('data-numberStyle'));
});
my css:
ol {
list-style: none !important;
counter-reset: count;
}
ol li:before {
content: attr(data-numberStyle);
counter-increment: count;
}
The problem is the attribute data-numberStyle doesn't get the counter value. If I give the value directly like content: counter(count, lower-alpha) ") " then it will work. But I need to use the attribute value in css.
Also, In other cases I need to use only separator. So, If I use the counter in css, I need to pass the separator.
Example:
content: counter(count) + attr(data-numberStyle); // this is not working
// Something like this counter(count) + ", ".
// <div data-numberStyle = ", ">
Here is my Fiddle. If my question is unclear, feel free to ask. I hope you understand. How to use this attribute value in CSS?

Given that data attribute should be a style, An idea comes to mind, it is to modify a 'style' tag directly in the header to apply :before css, please check the updated Fiddle sample:
http://jsfiddle.net/cHhJ5/3/
Javascript:
var $style;
$(document).ready(function(){
$('.olListPallette').click(function(){
if(!$style){
$style = $('<style id="listStyle">ol li:before {'+$(this).attr("data-numberStyle")+' ";}</style>');
$("head").append($style);
}else{
$style.html('ol li:before {'+$(this).attr("data-numberStyle")+' ";}</style>');
}
});
});
Hope it helps
Edit (Explanation):
:before (and others pseudo-selectors like :after) can't be modified directly with jQuery because there aren't part of the DOM.
So, a possible workaround may be to modify directly a style tag in header to accomplish the purpose of modify the list style.
However, I feel that it's a bit hackish to add a style tag in header and put styles directly in data attribute, I'd rather prefer to use predefinied css classes and assing them through javascript:
http://jsfiddle.net/cHhJ5/4/
Html, use a class name as a data attr. value:
<div class="olListPallette" data-numberStyle="low">type1</div>
Css, define classes with desired styles:
ol.low li:before {
content: counter(count, lower-alpha) ") ";
counter-increment: count;
}
ol.upp li:before {
content: counter(count, upper-alpha) ") ";
counter-increment: count;
}
Javascript, just set related class on click:
$(document).ready(function(){
$('.olListPallette').click(function(){
$("ol").removeClass();
$("ol").addClass($(this).attr("data-numberStyle"));
});
});

Make a textarea all caps?

I am trying to make a textarea that only will type in caps, even if the user isn't holding down shift or has caps lock on. Ideally this would accept the input no matter what and just automatically shift it to all caps. Most of the ways I am thinking of seem kind of clunky and would also show the lowercase before it gets converted.
Any suggestions or strategies?

you can use CSS
textarea { text-transform: uppercase; }
however, this only renders on the browser. let's say if you want to inject the text into a script or db in the textarea as all caps then you'll have to use javascript's toUpperCase(); before injection or form submit.
here is the jsfiddle for example:
html:
<textarea>I really like jAvaScript</textarea>
css:
textarea{
text-transform: uppercase;
}
javascript:
var myTextArea = document.getElementsByTagName('textarea');
for(var i=0; i<myTextArea.length; i++){
console.log('Textarea ' + i + ' output: ' + myTextArea[i].innerHTML); //I really like jAvaScript
console.log('Textarea ' + i + ' converted output: ' + myTextArea[i].innerHTML.toUpperCase()); //I REALLY LIKE JAVASCRIPT
}

CSS:
textarea { text-transform: uppercase; }

Quintin,
Create a style in your CSS such as the following:
textarea{
text-transform:uppercase;
}

Try adding a
textarea{
text-transform: uppercase;
}
to the text area.

Add you can get it
CSS:
textarea { text-transform: uppercase; }

This can be achieved with the oninput attribute, like so:
<textarea oninput="this.value = this.value.toUpperCase()">
<label for="upperCaseTextArea" style="display:block;">
Upper Case Text Area
</label>
<textarea
id="upperCaseTextArea"
name="upperCaseText"
rows="5"
cols="15"
oninput="this.value=this.value.toUpperCase()"
>
</textarea>