Let's say for example i have a textarea and a toggle button:
<div class="input">
<textarea id="links">
http://facebook.com
http://friendster.com
http://google.com
http://facebook.com
http://friendster.com
</textarea>
Toggle
</div>
How do i make it possible for each link in the textarea to clickable with the click of the toggle button?
$('.toggle').click(function(){
var clickable = false;
if(!clickable){
var links = $(this).closest('.input').find('textarea').val().split('\n');
$.each(links,function(){
//lost here
});
}
return false;
});
You cannot make clickable links inside textarea, they are for a plain text.
There are possible workarounds though, you can make a div, copy formatted content of textarea to this div, when "Toggle" is clicked, and switch textarea and div.
DEMO
Your each function takes index and value parameters that you can use to make your anchors
$.each(links, function (i, val) {
var newA = $("<a />").text(val).attr("href", $.trim(val));
$("#links").append(newA).append("<br>");
});
(Though obviously you'll have to add them to a div, as the fiddle does. As anrie says, textareas can only hold text.)
Related
In a forum, I want to copy the original post and quote it and paste into a text area using jQuery:
I found this post. However, it doesn't apply what I really need.
If you have the original text in a <div> element like so:
<div id="original">
Original text...
</div>
and the button like so:
<button id="copy">Copy Text</button>
and the <textarea> like so:
<textarea id="paste"></textarea>
You can simply use jQuery to get the value of the original and paste it into the <textarea> like so:
$("#copy").click(function() {
$("#paste").val($("original").text());
});
See this example.
So, lets say you have the "original text" in a div with the ID original, the copy button has the ID copy, and the textarea has the ID paste-here. Then this simple snippet should to it:
//When the user clicks the copy button...
$('#copy').click(function() {
//Take the text of the div...
var text = $('#original').text();
//...and put it in the div:
$('#paste-here').val(text);
});
This will replace the content of the text area with the original text. If you just want to add it to the end, do this instead:
//Take the text of the textarea, a linebreak, and the text of the div...
var text = $('#paste-here').val() + '\n' + $('#original').text();
//...and put it in the div:
$('#paste-here').val(text);
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')
How to remove or hide only visible "text & link" from website using java script. For example I want to hide "some text " & "Link text here" from bellows code without remove this full code
<p style="text-align:center;">some text Link text here</p>
Please help me
Assuming you mean that you want to hide the <p> tag, you need this piece of JavaScript:
document.getElementsByTagName('p')[0].style.display = 'none';
That will hide the first <p> tag on your page. I suggest adding a class or id to the tags you want to hide though, so that you can select them more accurately.
If you want to clear all contents of your <p> tag, you can do this:
document.getElementsByTagName('p')[0].innerHTML = '';
That will simply remove all of the tag's contents. If you want to remove the whole tag itself (so that it doesn't leave the empty <p> tag sitting around) you can change the .innerHTML part to .outerHTML.
There are several things to consider: you may want the test to return, so we cannot just lose it. You may want to preserve event bindings on nested elements, so we cannot simply destroy those. In the end, I would suggest CSS being the most appropriate route to take.
var paragraph = document.querySelector("p");
paragraph.style.overflow = "hidden";
paragraph.style.textIndent = "-1000%";
You could, alternatively, create a custom class meant to set overflow and text-indent, and toggle that class with JavaScript (jQuery?) instead:
paragraph.classList.toggle( "offsetChildren" );
// jQuery: $(paragraph).toggleClass( "offsetChildren" );
Fiddle: http://jsfiddle.net/6UZ82/
Try this code
function Hide(ptext,aText){
var p = document.getElementsByTagName('p');
var a = document.getElementsByTagName('a');
for(var i=0;i<a.length;i++){
if(a[i].innerHTML==aText){
a[i].setAttribute("style","display:none") ;
}
}
for(var i=0;i<p.length;i++){
var str = p[i].innerHTML;
var rp = str.replace(ptext,'<span style="display:none">'+ptext+'</span>');
p[i].innerHTML = rp;
}
}
Hide('some text','Link text here');
Also you can show back using the reverse logic. i have commented out the show function in fiddle. you can uncomment it and click run to see it in action
Demo here
Right now, I'm trying to create a WYSIWYG HTML editor, and I need to display the source code of a contentEditable div next to the div that is being edited. I'm trying to automatically synchronize these two elements, and I'm not yet sure what the best approach would be.
<div contentEditable ="true" id = "showSourceCodeForThis">test 1</div>
<input type = "text" id = "showSourceCodeHere"></input>
Whenever the contentEditable div is updated, I want the displayed source code to be automatically updated as well, and vice-versa. Is it possible to synchronize the contents of a contenteditable div with a text box that shows the source code of the contenteditable div?
Here is one working solution: http://jsfiddle.net/sDdN3/14/
HTML:
<div contentEditable ="true" id = "showSourceCodeForThis">test 1</div>
<input type = "text" id = "showSourceCodeHere"></input>
JavaScript:
function test(){
var divs = document.getElementById('showSourceCodeForThis');
divs.onkeyup=function(event){
document.getElementById('showSourceCodeHere').value = document.getElementById('showSourceCodeForThis').innerHTML;
}
}
function test2(){
var divs = document.getElementById('showSourceCodeHere');
divs.onkeyup=function(event){
document.getElementById('showSourceCodeForThis').innerHTML = document.getElementById('showSourceCodeHere').value;
}
}
test();
test2();
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();
});
});