Develop Reference

How to add closeable text tags to Textarea Kendo | jQuery

I need to use Text area like this image.
I should able to click Text A, Text B, Text C, Text D buttons and, once I click any of this button it should add to the Text area and also able remove added text field from the Text area. Can I do it using jQuery UI , jQuery or JavaScript .Kendo UI is also okay. but I'm unable to found my requirement support Kendo component to do this.
I researched and found this http://skfox.com/jqExamples/insertAtCaret.html , but it's not support added text fields removable function,

As was mentioned in my previous comments on your previous post, this cannot be done with a <textarea> element. These elements can only contain text, they cannot contain other elements like <button> or <span> which would be required to make a remove button.
The following is a very lightweight example and it has many pitfalls. It does give you some ideas of how you might look at proceeding.
$(function() {
function calcWordWidth(str, fontfamily, fontsize) {
var word = $("<span>").css({
display: "none",
"font-family": fontfamily,
"font-size": fontsize
}).html(str).appendTo("body");
var width = word.width();
word.remove();
return width;
}
function addCloseButton(pos, st, en, trg) {
var btn = $("<span>", {
class: "closeBtn"
}).html("x");
btn.css({
position: "absolute",
left: pos + "px",
top: "1px"
});
trg.parent().append(btn);
btn.click(function() {
removeText(st, en, trg);
$(this).remove();
});
}
function addText(str, trg) {
var cur = trg.val();
var start = cur.length;
if (start) {
trg.val(cur + " " + str);
} else {
trg.val(str);
}
cur = trg.val();
var end = cur.length;
var width = calcWordWidth(cur, trg.css("font-family"), trg.css("font-size"));
console.log(width);
addCloseButton(width, start, end, $("#txtMessage"));
}
function removeText(start, end, trg) {
var cur = trg.val();
var upd = cur.slice(0, start) + " " + cur.slice(end);
trg.val(upd);
}
$("button").click(function() {
addText($(this).val(), $("#txtMessage"));
});
});
.closeBtn {
font-family: Arial;
font-size: 12px;
cursor: pointer;
padding: 1px;
background: #ccc;
border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maincontainer">
<div id="navtoplistline"> </div>
<div id="contentwrapper">
<div><button id="btn-1" value="Hello World!">Hello World!</button></div>
<div id="maincolumn">
<div class="text" style="position: relative;">
<textarea name="txtMessage" id="txtMessage" class="txtDropTarget ui-droppable" cols="80" rows="15"></textarea>
</div>
</div>
</div>
</div>
You can also look at using a <div> element with the contenteditable attribute enabled. Again, pretty complex and would not advise it.
As I suggested, you may be better off using something like TinyMCE. TinyMCE is a JavaScript based Rich Text editor that is highly customizable.
Example: https://jsfiddle.net/Twisty/fngjcse3/
JavaScript
tinymce.init({
selector: 'textarea',
menubar: false,
statusbar: false,
plugins: "code",
toolbar: 'helloWorld allBase code',
setup: function(editor) {
var makeSpan = function(str) {
return '<span class="word"> ' + str + ' <em>x</em><span> ';
}
editor.ui.registry.addButton('helloWorld', {
text: 'Hello World!',
onAction: function(_) {
editor.insertContent(makeSpan("Hello World!"));
}
});
editor.ui.registry.addButton('allBase', {
text: 'All your Base',
onAction: function(_) {
editor.insertContent(makeSpan("All your base"));
}
});
},
content_style: 'span.word em { font-style: normal; font-size: 12px; background: #ccc; cursor: pointer; padding: 1px; border-radius: 3px; }',
init_instance_callback: function(editor) {
editor.on('click', function(e) {
if (e.target.nodeName == "EM") {
console.log("Remove Word.");
e.target.parentElement.remove();
}
});
}
});
This initializes TinyMCE with custom buttons. These buttons add the HTML that would be needed. You can also initialize it with custom callbacks, this can handle the close or remove options you are looking for.

Insert a "tag x" in variations chart if without stock

I want to insert a (x) inside variations without stock (quantity="0")
i'm working inside a ecommerce plataform that not have support for this.
my codes JS: (helped by the forum)
/*var buttons = "";
$("select option").each(function () {
buttons += "<input type='button' value='" + this.value + "'/>";
});
$("select").replaceWith(buttons);
*/
var selectName = $('select').attr('name');
// add a hidden element with the same name as the select
var hidden = $('<input type="hidden" name="'+selectName+'">');
hidden.val($('select').val());
hidden.insertAfter($('select'));
$("select option").unwrap().each(function() {
var btn = $('<div class="btn">'+$(this).text()+'</div>');
if($(this).is(':checked')) btn.addClass('on');
$(this).replaceWith(btn);
});
HTML + CSS EMBED:
<!-- Variações -->
<iluria.if.product.has.variations>
<div class="product-variations-container">
$iluria.product.variations
</div>
<script src="variations.js"></script>
<style>
*.product-variations-container > div:nth-child(4) { display: none; }*
div.btn {display: inline-block;border: 2px solid #ccc;margin-right: 5px;padding: 2px 5px;cursor: pointer;}
div.btn.on {background-color: #777;color: white;}
</style>
</iluria.if.product.has.variations>
$(document).on('click', '.btn', function() {
$('.btn').removeClass('on');
$(this).addClass('on');
$('input[name="'+selectName+'"]').val($(this).text());
});
Forum suggest to insert this
Screen that i want:
Link of one product "P" + "M" have stock, "G" not
Link product: http://www.hdmclothing.com.br/pd-3d1b01-sainha-azul.html
Thanks!

How to format a text in a div with jQuery/Css

I would like to display a text copied from a site, for example Wikipedia, in a div. This text has to be strictly without the tags that the computer copies with the text from wikipedia.
I think that the solution is to set a sort of formatting of the text but I don't know.
This is how it should be (Press OK). But I don't want to paste the text in the code, I have to paste the text in the textarea.
In fact if you try to paste something from Wikipedia in the textarea of this Jsfiddle you will see that the result is horrible and with all the html tags.
HTML:
<div id="faketxt" contenteditable></div>
<button id='btn'>OK</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
</button>
<button class="fontStyle" onclick="document.execCommand( 'underline',false,null);"><u>U</u>
</button> <br>
<div id='boxes'>
</div>
CSS:
#faketxt {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;
}
.fakes{
width: 150px;
height: 300px;
font-size: 10px;
border-style: solid;
display:inline-block;
float: left;
}
#boxes{
display : flex;
display:inline-block;
}
jQuery:
$('#btn').click(function() {
var primo = document.getElementById('faketxt');
var wordLimit = 130;
var words = primo.innerHTML.replace(/(<([^>]+)>)/ig,"").split(/\s/);
if (words.length) {
var count = 0;
var div = createDiv();
var bold = false;
words.forEach(function(word) {
if (++count > wordLimit) {
count = 1;
div = createDiv();
}
if (div.innerHTML) {
div.append(' ');
}
if (word.indexOf('<b>') != -1) {
bold = true;
}
if (bold) {
$(div).html($(div).html() + '<b>' +
word + '</b>');
} else {
$(div).html($(div).html() +
word);
}
if (word.indexOf('</b>') != -1) {
bold = false;
}
});
}
});
function createDiv() {
div = document.createElement('div');
div.className = 'fakes';
document.getElementById('boxes').append(div);
return div;
}

innerHTML or jquery's $.html() will pull the content (including HTML) of an element. But textContent or jquery's $.text() will just get the text.
Instead of var words = primo.innerHTML have you tried using var words = primo.textContent or var words = $(primo).text()?

try using
words = primo.textContent.replace(/(<^>]+)>)/ig,"").split(/\s/);
instead of
words = primo.innerHTML.replace(/(<([^>]+)>)/ig,"").split(/\s/);

Rather than getting the innerHTML of the source, simply get the text content using either the javascript or JQuery text() functions.
So, given you are using jQuery, change your words variable to initialise as follows.
var words = $(primo).text().split(/\s/);

Show more/less text in a table automatically according to text length

I have a table with two columns, the second one sometimes contains big text so I want to show only the first 100 characters and put a show more link to display the remaining text. You can see here what Table I am working on http://jsfiddle.net/j11mj21x/.
For that I am using a code provided in this link (http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/), I put it in a file show_less_more.js :
(function($) {
$.fn.shorten = function (settings) {
var config = {
showChars: 100,
ellipsesText: "...",
moreText: "more",
lessText: "less"
};
if (settings) {
$.extend(config, settings);
}
$(document).off("click", '.morelink');
$(document).on({click: function () {
var $this = $(this);
if ($this.hasClass('less')) {
$this.removeClass('less');
$this.html(config.moreText);
} else {
$this.addClass('less');
$this.html(config.lessText);
}
$this.parent().prev().toggle();
$this.prev().toggle();
return false;
}
}, '.morelink');
return this.each(function () {
var $this = $(this);
if($this.hasClass("shortened")) return;
$this.addClass("shortened");
var content = $this.html();
if (content.length > config.showChars) {
var c = content.substr(0, config.showChars);
var h = content.substr(config.showChars, content.length - config.showChars);
var html = c + '<span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> ' + config.moreText + '</span>';
$this.html(html);
$(".morecontent span").hide();
}
});
};
})(jQuery);
$(document).ready(function(){$(".descriptionText").shorten();});
I am using it like this:
<script src="show_less_more.js"></script>"
The HTML is like this for every row:
<tr>
<th>
course1
</th>
<td> <div class="descriptionText">Description of the course</div></td>
</tr>
I have also added the CSS for the more and less links:
a {
color: #0254EB
}
a:visited {
color: #0254EB
}
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span {
display: none;
}
When I do this in sfiddle it works pretty good as you can see here http://jsfiddle.net/j11mj21x/2/
However, I get nothing when rendering my table with python.
I think the problem is that I don't succeed to load my JS page into the html page, because when I click on it it give nothing.
Here is what is rendered in my html page:
....
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"><!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
</script><script src="showLessMore.js"></script>
....
Can anyone tell me what could be the problem behind this because I have the "show_less_more.js" in the same folder as the file generator which in python?
Thank you in advance !

Here's a simple example of doing this relying more on CSS.
$(function() {
$('a').click(function() {
$('div').removeClass('ellipsis');
});
});
div {
border: solid 1px orange;
width: 200px;
overflow: hidden;
}
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='ellipsis'>Some really really long text that just is way too long so we must use ellipses to shorten it until the user wants to see it all.</div>
<br>
<a href='#'>Show All</a>

show more/Less text with just HTML and JavaScript

I am needing to create a show more/less text function, but with just JavaScript and HTML.. I can't use any additional libraries such as jQuery and it can't be done with CSS. The sample code I have added displays the 'more' text, but not the 'less'.
If someone could point me in the right direction, it would be much appreciated.
I've spent the majority of the day frying my brain over this, as its clearly not the modern way to do it, however, my HTML is:
<html>
<head>
<script type="text/javascript" src="moreless.js"></script>
</head>
<body>
Lorem ipsum dolor sit amet
<p>
<p id="textarea"><!-- This is where I want to additional text--></div>
</p>
<a onclick="showtext('text')" href="javascript:void(0);">See More</a>
<p>
Here is some more text
</body>
</html>
and my JavaScript is (moreless.js):
function showtext()
{
var text="Here is some text that I want added to the HTML file";
document.getElementById("textarea").innerHTML=text;
}

My answer is similar but different, there are a few ways to achieve toggling effect. I guess it depends on your circumstance. This may not be the best way for you in the end.
The missing piece you've been looking for is to create an if statement. This allows for you to toggle your text.
More on if statements here.
JSFiddle: http://jsfiddle.net/8u2jF/
Javascript:
var status = "less";
function toggleText()
{
var text="Here is some text that I want added to the HTML file";
if (status == "less") {
document.getElementById("textArea").innerHTML=text;
document.getElementById("toggleButton").innerText = "See Less";
status = "more";
} else if (status == "more") {
document.getElementById("textArea").innerHTML = "";
document.getElementById("toggleButton").innerText = "See More";
status = "less"
}
}

With some HTML changes, you can absolutely achieve this with CSS:
Lorem ipsum dolor sit amet
<p id="textarea">
<!-- This is where I want to additional text-->
All that delicious text is in here!
</p>
<!-- the show/hide controls inside of the following
list, for ease of selecting with CSS -->
<ul class="controls">
<li class="show">Show</li>
<li class="hide">Hide</li>
</ul>
<p>Here is some more text</p>
Coupled with the CSS:
#textarea {
display: none; /* hidden by default */
}
#textarea:target {
display: block; /* shown when a link targeting this id is clicked */
}
#textarea + ul.controls {
list-style-type: none; /* aesthetics only, adjust to taste, irrelevant to demo */
}
/* hiding the hide link when the #textarea is not targeted,
hiding the show link when it is selected: */
#textarea + ul.controls .hide,
#textarea:target + ul.controls .show {
display: none;
}
/* Showing the hide link when the #textarea is targeted,
showing the show link when it's not: */
#textarea:target + ul.controls .hide,
#textarea + ul.controls .show {
display: inline-block;
}
JS Fiddle demo.
Or, you could use a label and an input of type="checkbox":
Lorem ipsum dolor sit amet
<input id="textAreaToggle" type="checkbox" />
<p id="textarea">
<!-- This is where I want to additional text-->
All that delicious text is in here!
</p>
<label for="textAreaToggle">textarea</label>
<p>Here is some more text</p>
With the CSS:
#textarea {
/* hide by default: */
display: none;
}
/* when the checkbox is checked, show the neighbouring #textarea element: */
#textAreaToggle:checked + #textarea {
display: block;
}
/* position the checkbox off-screen: */
input[type="checkbox"] {
position: absolute;
left: -1000px;
}
/* Aesthetics only, adjust to taste: */
label {
display: block;
}
/* when the checkbox is unchecked (its default state) show the text
'Show ' in the label element: */
#textAreaToggle + #textarea + label::before {
content: 'Show ';
}
/* when the checkbox is checked 'Hide ' in the label element; the
general-sibling combinator '~' is required for a bug in Chrome: */
#textAreaToggle:checked ~ #textarea + label::before {
content: 'Hide ';
}
JS Fiddle demo.

Try to toggle height.
function toggleTextArea()
{
var limitedHeight = '40px';
var targetEle = document.getElementById("textarea");
targetEle.style.height = (targetEle.style.height === '') ? limitedHeight : '';
}

This is my pure HTML & Javascript solution:
var setHeight = function (element, height) {
if (!element) {;
return false;
}
else {
var elementHeight = parseInt(window.getComputedStyle(element, null).height, 10),
toggleButton = document.createElement('a'),
text = document.createTextNode('...Show more'),
parent = element.parentNode;
toggleButton.src = '#';
toggleButton.className = 'show-more';
toggleButton.style.float = 'right';
toggleButton.style.paddingRight = '15px';
toggleButton.appendChild(text);
parent.insertBefore(toggleButton, element.nextSibling);
element.setAttribute('data-fullheight', elementHeight);
element.style.height = height;
return toggleButton;
}
}
var toggleHeight = function (element, height) {
if (!element) {
return false;
}
else {
var full = element.getAttribute('data-fullheight'),
currentElementHeight = parseInt(element.style.height, 10);
element.style.height = full == currentElementHeight ? height : full + 'px';
}
}
var toggleText = function (element) {
if (!element) {
return false;
}
else {
var text = element.firstChild.nodeValue;
element.firstChild.nodeValue = text == '...Show more' ? '...Show less' : '...Show more';
}
}
var applyToggle = function(elementHeight){
'use strict';
return function(){
toggleHeight(this.previousElementSibling, elementHeight);
toggleText(this);
}
}
var modifyDomElements = function(className, elementHeight){
var elements = document.getElementsByClassName(className);
var toggleButtonsArray = [];
for (var index = 0, arrayLength = elements.length; index < arrayLength; index++) {
var currentElement = elements[index];
var toggleButton = setHeight(currentElement, elementHeight);
toggleButtonsArray.push(toggleButton);
}
for (var index=0, arrayLength=toggleButtonsArray.length; index<arrayLength; index++){
toggleButtonsArray[index].onclick = applyToggle(elementHeight);
}
}
You can then call modifyDomElements function to apply text shortening on all the elements that have shorten-text class name. For that you would need to specify the class name and the height that you would want your elements to be shortened to:
modifyDomElements('shorten-text','50px');
Lastly, in your your html, just set the class name on the element you would want your text to get shorten:
<div class="shorten-text">Your long text goes here...</div>

I hope this helps you. Here is the functionality:
When text characters is less than or equal to 12. Then it displays the whole text and also does not display the more/less button
When text characters is more than 12. Displays only 12 characters of the text and also a More button which when pressed, shows the whole text.
When the More button is pressed the button changes to Less
Read more string manipulation in w3schools: String Manipulation or
Mozila: String Manipulation
var startStatus = "less";
function toggleText() {
var text = "Here is the text that I want to play around with";
if (text.length > 12) {
if (startStatus == "less") {
document.getElementById("textArea").innerHTML = `${text.substring(0, 12)}...`;
document.getElementById("more|less").innerText = "More";
startStatus = "more";
} else if (startStatus == "more") {
document.getElementById("textArea").innerHTML = text;
document.getElementById("more|less").innerText = "Less";
startStatus = "less";
}
} else {
document.getElementById("textArea").innerHTML = text;
}
}
toggleText();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<p id="textArea">
<!-- This is where i want text displayed-->
</p>
<span><a
id="more|less"
onclick="toggleText();"
href="javascript:void(0);"
></a
></span>
</div>
</body>
</html>

This should resolve your problem:
function toggleSeeMore() {
if(document.getElementById("textarea").style.display == 'none') {
document.getElementById("textarea").style.display = 'block';
document.getElementById("seeMore").innerHTML = 'See less';
}
else {
document.getElementById("textarea").style.display = 'none';
document.getElementById("seeMore").innerHTML = 'See more';
}
}
The complete working example is here: http://jsfiddle.net/akhikhl/zLA5K/

Hope this Code you are looking for
HTML:
<div class="showmore">
<div class="shorten_txt">
<h4> ##item.Title</h4>
<p>Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text </p>
</div>
</div>
SCRIPT:
var showChar = 100;
var ellipsestext = "[...]";
$('.showmore').each(function () {
$(this).find('.shorten_txt p').addClass('more_p').hide();
$(this).find('.shorten_txt p:first').removeClass('more_p').show();
$(this).find('.shorten_txt ul').addClass('more_p').hide();
//you can do this above with every other element
var teaser = $(this).find('.shorten_txt p:first').html();
var con_length = parseInt(teaser.length);
var c = teaser.substr(0, showChar);
var h = teaser.substr(showChar, con_length - showChar);
var html = '<span class="teaser_txt">' + c + '<span class="moreelipses">' + ellipsestext +
'</span></span><span class="morecontent_txt">' + h
+ '</span>';
if (con_length > showChar) {
$(this).find(".shorten_txt p:first").html(html);
$(this).find(".shorten_txt p:first span.morecontent_txt").toggle();
}
});
$(".showmore").click(function () {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
} else {
$(this).addClass("less");
}
$(this).find('.shorten_txt p:first span.moreelipses').toggle();
$(this).find('.shorten_txt p:first span.morecontent_txt').toggle();
$(this).find('.shorten_txt .more_p').toggle();
return false;
});

<script type="text/javascript">
function showml(divId,inhtmText)
{
var x = document.getElementById(divId).style.display;
if(x=="block")
{
document.getElementById(divId).style.display = "none";
document.getElementById(inhtmText).innerHTML="Show More...";
}
if(x=="none")
{
document.getElementById(divId).style.display = "block";
document.getElementById(inhtmText).innerHTML="Show Less";
}
}
</script>
<p id="show_more1" onclick="showml('content1','show_more1')" onmouseover="this.style.cursor='pointer'">Show More...</p>
<div id="content1" style="display: none; padding: 16px 20px 4px; margin-bottom: 15px; background-color: rgb(239, 239, 239);">
</div>
if more div use like this change only 1 to 2
<p id="show_more2" onclick="showml('content2','show_more2')" onmouseover="this.style.cursor='pointer'">Show More...</p>
<div id="content2" style="display: none; padding: 16px 20px 4px; margin-bottom: 15px; background-color: rgb(239, 239, 239);">
</div>
demo
jsfiddle

I'm not an expert, but I did a lot of looking to implement this for myself. I found something different, but modified it to accomplish this. It's really quite simple:
The function takes two arguments, a div containing only the words "show more" [or whatever] and a div containing the originally hidden text and the words "show less." The function displays the one div and hides the other.
NOTE: If more than one show/hide on page, assign different ids to divs
Colors can be changed
<p>Here is text that is originally displayed</p>
<div id="div1">
<p style="color:red;" onclick="showFunction('div2','div1')">show more</p></div>
<div id="div2" style="display:none">
<p>Put expanded text here</p>
<p style="color:red;" onclick="showFunction('div1','div2')">show less</p></div>
<p>more text</p>
Here is the Script:
<script>
function showFunction(diva, divb) {
var x = document.getElementById(diva);
var y = document.getElementById(divb);
x.style.display = 'block';
y.style.display = 'none';
}
</script>

You can also use details HTML tag which does the work for you.
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Source W3CSchool