I want a editbox editable when we click on div as we accomplish this by clicking on "Div editable".It work great for single id Can you please tell how to make it for multiple id's.Thanks in advance.
<table>
<tr>
<td>
Editable Div (double click text to the right, to enter edit mode) :
</td>
<td>
<div id="makeEditable">Div editable</div>
</td>
</tr>
</table>
(function($) {
$.fn.editable = function() {
var textBlock = $(this);
// Create a new input to allow editing text on double click
var textBox = $('<input/>');
textBox.hide().insertAfter(textBlock).val(textBlock.html());
// Hiding the div and showing a input to allow editing the value.
textBlock.dblclick(function() {
toggleVisiblity(true);
});
// Hiding the input and showing the original div
textBox.blur(function() {
toggleVisiblity(false);
});
toggleVisiblity = function(editMode) {
if (editMode == true) {
textBlock.hide();
textBox.show().focus();
// workaround, to move the cursor at the end in input box.
textBox[0].value = textBox[0].value;
}
else {
textBlock.show();
textBox.hide();
textBlock.html(textBox.val());
}
};
};
})(jQuery);
$(function() {
var $edit = $('#makeEditable').editable();
});
You could simplify things a bit by using contenteditable="true"
Working Example
Basic functionality
<div id="makeEditable" contenteditable="true">Div editable</div>
Optionally add some css to make it a little more user friendly
#makeEditable:focus{
box-shadow: 0 0 2px blue;
}
MDN Documentation for Content Editable
You should rework your logic a little. You should create separate input for every div element and in the events you should operate over current dblclicked or blured element through this. Here is JSFiddle demo with little modifications.
Hope it helps you. But I recommend to use contenteditable attribute as #apaul34208 suggested unless you have other custom js logic.
Just use basic jQuery selectors like this:
$('#makeEditable,#anotherid,#anidagain')
But if you want to do it on multiple divs/elements its better to give all the elements a class, and apply the function to all the elements with that class. Your selector will then be:
$('.editable')
Related
I'm looking to design a form that will accept HTML tags and convert them into styled text displayed in a separate text area. Think a very simple JSbin. I thought that this would work:
document.getElementById('tagName').innerHTML='variable'
But this displays the text along with the tags - I just want the tag.
I need some helpful hints or a nudge in the direction I should go. Thanks!
Take a look at https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/ you want to use .textContent to get the text without the tags.
document.getElementById('text').innerHTML=document.getElementById('html-elements').textContent
<div id="html-elements">
<button>hello</button> <strong><em>world</em></strong>
</div>
<div id="text"></div>
I think what you're looking for is contenteditable attr.
You can use that attribute in order to make editable a DOM element like div, span, p, and so on.
For more info go to Making content editable
On the order hand, to be able to write HTML from a textarea and the entered HTML text be rendered into the contenteditable element, you need to bind some kind of event in order to get the wrote HTML and then set it into the target contenteditable element.
var variable = '<b>EleFromStack</b>',
tagName = document.getElementById('tagName'),
textarea = document.getElementById('textarea');
textarea.addEventListener('input', function() {
tagName.innerHTML = this.value;
});
div {
width: 300px;
border: 1px dashed #000
}
<textarea id='textarea'>
</textarea>
<div id='tagName' contenteditable='true'>
</div>
I think what you want to do is create an input then listen to the value changes and display the inner html in another div
<!-- HTML -->
<input type="text" id="input"></input>
<div id="output"></div>
Then listen to the change and update the output
//JS
const input = document.querySelector('#input'),
output = document.querySelector('#output');
button.addEventListener('change', () => {
output.innerHTML = input.value;
})
(JSBIN: https://jsbin.com/genokox/edit?html,js,console,outputjsbin)
The problem is you're trying to write HTML into a text area. The text area is reserved, by the browser engine, to post plain text. Instead of writing out your content to a textarea write it to a DIV or some other content block designed to contain HTML.
I am having a requirement to include a repeating TextArea control (I created small jQuery snippet, that will clone the first textarea and append it to ul on hitting a button and therefore I am calling it as repeating text area control) inside a repeating DIV section (users will be presented with another add button and when that button is clicked it should clone the div and add that div to the main container. Users can hit the button as many times as they want and therefore I am calling it as repeating DIV).
I am not getting any idea of getting this task done. Here is the elaborated requirement. (It's similar to Repeating Field inside a Repeating Section in InfoPath)
Using jQuery I created a repeating textarea controls (TextAreas get added as list items on hitting Add button) and now I will be having a div which will need to have some textboxes and also need to include this repeating textarea field. ID's also need to unique for everything. As I mentioned above, there will be a button after that div and when the user hits that button, the entire div needs to be cloned and needs to be appended to the main container.
There are a huge number of different ways to do this. I recently had a project where I had to do this very thing. Here is a working Fiddle of the following code example:
HTML
<div id="container">
<span id="sholder"></span>
<br />
<input type="button" value="Add Section" class="addsection" />
</div>
<div id="section_template" class="template">
<div class="section">
<span class="taholder"></span>
<br />
<input type="button" value="Add Textarea" class="addtextarea" />
</div>
</div>
The key concept here is that I created a div section with class template, and in the CSS template is set to display: none;. I use it to more easily create a bigger section of HTML later in the CreateSection() function.
jQuery / javascript
$(function() {
//add the click handler to add a new section
$("input.addsection").click(CreateSection);
//add the click handler for the new section
//since the buttons are added dynamically, use "on" on the "document" element
// with the selector for the button we want to watch for.
$(document).on("click", "input.addtextarea", function() {
var section = $(this).closest("div.section");
AddTextarea(section);
});
});
function CreateSection() {
var section = $("#section_template div.section").clone();
var holder = $("#container span#sholder");
//get the current total number of sections
var sectionCount = holder.find("div.section").length;
//create the section id by incrementing the section count
section.attr("id", "section" + (sectionCount + 1));
//add a textarea to the section
AddTextarea(section);
//add the new section to the document
holder.append(section);
}
function AddTextarea(section) {
var sectionID = section.attr("id");
var holder = section.find("span.taholder");
//get the current total number of textareas in this section
var taCount = holder.find("textarea").length;
//create the new textarea element
var ta = $(document.createElement("textarea"));
//create the textarea unique id
var taID = section.attr("id") + "_textarea" + (taCount + 1);
ta.attr("id", taID);
//show the id... can be removed
ta.val("ID: " + taID);
//add the textarea to the section
holder.append(ta);
}
There are several helpful search functions in the above code: closest, find. Also, I'm using the clone function to duplicate that HTML section.
Also of note, I create the new textarea using $(document.createElement("textarea")). document.createElement is the fastest way for JS to create new HTML DOM objects.
And a bit of CSS for the example
div.template {
display: none;
}
div.section {
border: 1px solid black;
}
div.section textarea {
display: block;
}
This example keeps the IDs unique as you can see in the JSFiddle. However, reading those fields if they are posted to the server is an answer to another question.
Is there a way to put actual html code inside a title attribute on a table row element? My goal is to pop-up not only text but some info-graphics along with it, so a mouseover event thats not a modal would be great. Am I going in the wrong direction?
This table is already using jquery datatables but I don't believe it can do that sort of event.
<tr title='This activity will be open to registration on April 31st' >
.....
</tr>
Nope. You'd need to create your own title substitute with JavaScript.
No.
HTML can't be placed in an attribute.
If the goal is to have a pop-up with rich content, then you need to handle this via javascript. In addition, from an accessibility standpoint, you likely don't want to put that amount of content into the title attribute anyways, so going the JS route is going to solve a few problems for you. Google 'JS Tooltip' for dozens of options.
Native tooltips do not use HTML. jQuery UI tooltips would be very useful here.
Demo: http://jqueryui.com/tooltip/
EDIT: You would need to use the content option to use markup instead of the title attribute.
$(".text")
.tooltip({ content: '<b style="color: red">Tooltip</b> <i>text</i>' });
Here's a Fiddle demonstrating this: http://jsfiddle.net/acbabis/64Q2m/
You can use jquery ui tooltip plugin for showing custom title
There is no direct way to render HTML code written inside a tooltip. However, if you are using jQueryUI (or, if you can) then the code below will show the HTML effect (render) and not the HTML code in the tooltip.
Requirements: jQuery, jQueryUI.js, jQueryUI.css
HTML Code:
<tr data-title='This activity will be open to registration on <b>April 31st</b>'>.....</tr>
JavaScript:
$(function() {
$( document ).tooltip({
items: '[title], [data-title]',
track:true,
content: function(){
var element = $( this );
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "[data-title]" ) ) {
return element.attr( "data-title" );
}
}
});
});
Instead of focusing on the title attribute, enclose a popup message with tags inside the target <td></td> (table data element). Then put a class in that td to control the div with CSS, hiding it first, then making its contents visible when the mouse hovers over the specific table data element. Something like this:
<tr><td class="info-tooltip">This activity will be open to registration on April 31st <div>[ *the contents you would want to popup here* ]</div></td></tr>
Your CSS then might be something like:
td.info-tooltip div {
display:none;
}
td.info-tooltip:hover {
position:relative;
cursor:pointer;
}
td.info-tooltip:hover div {
position:absolute; /* this will let you align the popup with flexibility */
top: 0px; /* change this depending on how far from the top you want it to align */
left: 0px; /* change this depending on how far from the left you want it align */
display:block;
width: 500px; /* give this your own width */
}
Using Bootstrap Tooltips one can do the following
<span title="Some <b>bold words</b>" data-toggle='tooltip' data-html='true'>this has an html supported tooltip</span>
for me it happens automatically but you might need to trigger it with javascript.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
docs
I think a good option is to put that content inside a data attribute, something like this:
<div data-tooltip="Some information I want to show">
Actual content
</div>
And then, write a simple jQuery plugin that shows that content inside an element upon hover over.
This is what I try to do, and I know this will take many hours to get the good looking UI.
$("input[type=text],textarea").bind("focus", function()![enter image description here][1] {
var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");
}).bind("blur", function() {
$('.css-editor').remove();
});
Above code is just a prototype. Redactor air mode http://imperavi.com/redactor/examples/air/ is the closest thing I can find on the net.
I wonder if there are currently any jQuery plugins or Javascript to do this?
<table style="width:100%" class="remark" cellspacing="0" cellpadding="0">
<tr class="invoice-cell-section">
<th colspan="6" class="invoice-cell-top">
**<input type="text" value="{_ Remark}"/>**
</th>
</tr>
<tr>
<td colspan="6" class="invoice-footer invoice-cell-bottom">
**<textarea class="invoice-remark static"></textarea>**
</td>
</tr>
</table>
You see input box with value Remark and empty Textarea up here.. I want when people click on it.. there is a stylesheet editor to edit only that textarea/input element...
For anyone just reading this question.. I know there is several way to add/enable this .css-editor to the DOM.... I see right to it now how to implement it if I need to code myself.. + better UI than select dropdown + hours of debugging... It like a small version of TinyMCE or CLEditor that works for single HTML element not the whole HTML in textarea.
I just want to know if there are any plugin/snippet that I can instantly use..
why not just:
$(document).on('focus', 'input[type=text],textarea', function(){
$(this).addClass('focused');
});
$(document).on('blur', 'input[type=text],textarea', function(){
$(this).removeClass('focused');
});
define a css class called focused and apply the style there.
hope that helps.
EDIT:
after better understanding of what you need, think about something like this.
create an invisible, floating (absolute positioned) panel- it will be the "css editor".
now, on every focus on an input, get to know it's location on document, and display the invisible floating css editor relatively. look at this idea:
$(document).on('focus', 'input[type=text],textarea', function(){
$('.css-editor').css({left: $(this).offset().left+'px', top: $(this).offset().top+'px'}).show();
});
$(document).on('blur', 'input[type=text],textarea', function(){
$('.css-editor').hide();
});
note that there's no need to remove and re-create this hidden element. you can create it once on DOM and manipulate it's position & visibility.
hope it's better :-)
No need to bind focus event on the textbox, it itself have the focus,focusin and focusout events attached in it. So you can simply use either .onfocus or you can also use .live function.
Using onfocus handler directly:
$("input[type=text],textarea").focus(function() {
var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");
});
Using Live event handler:
$("input[type=text],textarea").live("focus",function() {
var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");
});
You need to add function() {}
$("input[type=text],textarea").click(function(){
$(this).removeClass("your_old_class").addClass("your_new_class")
});
My code is as follows:
<script>
$(document).ready(function() {
var tagCounter=0;
$("#tag-add-button").click(function () {
var text = $("#tagadd").val();
$("#set-tags").append("<input type='text' id='tag"+tagCounter+"' READONLY>");
$("#tag"+tagCounter).val(text);
$("#tagadd").val("");
tagCounter++;
});
});
</script>
This does the following:
When tag-add-button is clicked, it takes the text from the inputbox (tagadd) and puts it in a new inputbox thats appended to the set-tags div. The tagadd inputbox is then made blank.
The problem I'm having, is I want each input box to have its own remove button. But I don't see how the javascript can be generated for that when there can be an unlimited number of input boxes...
Any ideas?
Put the input element inside of a div or span, and make the remove button a sibling of the input element. Then, in the onclick handler of the button, just do something like $(this).parent().remove()
This has the effect of removing both the input element, and the remove button itself
Rather than using an id (#tag-add-button), use classes and then use the each function of jQuery and traverse to the appropriate elements.
$(document).ready(function() {
var tagCounter=0;
$("#tag-add-button").click(function () {
var text = $("#tagadd").val();
$("#set-tags").append('<input type="text" id="tag'+tagCounter+'" READONLY /><span class="remove">Remove</span>');
$("#tag"+tagCounter).val(text);
$("#tagadd").val("");
tagCounter++;
});
$('span.remove').bind('click',function(){
$(this).prev('input').andSelf().remove();
});
});