It is like comment box. People are able to post their comments. Here I have one text area and and a div. If click one a button the comment has to be done. The comment should display in a div. I have given an external link,
wich allows edit the text how they want.
<div id="sample">
<script type="text/javascript" src="http://js.nicedit.com/nicEdit- latest.js"> </script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<h4>First Textarea</h4>
<textarea name="area1" cols="40"></textarea>
</div>
<button type="submit" value="submit"
style="background-color:red; color:#fff;
width:80px; height:50px; padding:5px;" onclick=""> Submit</button>
<div id="demo" style="width:300px; height:200px; border:1px solid #333;"></div>
First, you need to give your textarea an Id value:
<textarea id="commentEditor" name="area1" cols="40"></textarea>
Then, in your script after you have created the editor, you need to create a function that can extract the text from your NicEdit box and put it into a div.
function SubmitComment {
var editor = nicEditors.findEditor("commentEditor"); //find the editor by the ID
var commentText = editor.getContent(); //this gets the actual text content from it
//then assign the div with your content
var commentDiv = document.getElementById('demo');
commentDiv.innerHTML = commentText;
//afterwards, you can clear the comment entry box
editor.setContent("");
}
Make sure you tell your button to trigger this function
<button type="submit" value="submit"
style="background-color:red; color:#fff;
width:80px; height:50px; padding:5px;" onclick="SubmitComment"> Submit</button>
Related
My page has two textareas and a div. One textarea is for the user to enter html and the other is for entering css. When a button is clicked I will call a javascript function to display the css and html inside the div.
function handleLaunch() {
var div = document.getElementById('pane');
var html = document.getElementById('h');
var css = document.getElementById('c');
div.innerHTML = html.value;
// This line obviously doesn't work div.style = css.value;
}
<body>
<textarea id="c" placeholder="CSS code here..." rows="10" cols="50"></textarea>
<div id="pane">
</div>
<br>
<textarea id="h" placeholder="Html code here..." rows="10" cols="50"></textarea>
<br>
<button type="button" onclick="handleLaunch()">Launch</button>
Now, how to set the css to the text ?
EDIT: I should have mentioned that I want to be able to put something like
.classExample{text-align:center} in the css textarea and have it apply.
Yes, #adeneo answer works, this snippet shows it. Enter color: red; for example as CSS, and any text as HTML...
function handleLaunch() {
var div = document.getElementById('pane');
var html = document.getElementById('h');
var css = document.getElementById('c');
div.innerHTML = html.value;
div.style.cssText = css.value;
}
<body>
<textarea id="c" placeholder="CSS code here..." rows="10" cols="50"></textarea>
<div id="pane">
</div>
<br>
<textarea id="h" placeholder="Html code here..." rows="10" cols="50"></textarea>
<br>
<button type="button" onclick="handleLaunch()">Launch</button>
Assuming that you are defining css properties along with selectors, for example you css text is like
div{
background:red;
}
.someClass{
font-size:12px;
}
and your html looks like
<div>DIV content</div>
<span class="someClass"> Content in someClass</span>
You can add the html as div.innerHTML = html.value;
But for adding the css to your page you will have to do the following
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = document.getElementById('c').value;
document.getElementsByTagName('head')[0].appendChild(style)
I implemented a javascript code which converts a div into a canvas. Below is the code:
JS
$(window).load(function(){
$(function() {
$(".btnSave").click(function() {
onrendered: function(canvas) {
thyCanvas = cnvs;
document.body.appendUncle(cnvs);
cnvs.toWall(function(Wall) {
saveAss(Wall, "xprf.png");
});
}
});
});
});
});
When the user clicks the button (.btnSave), they convert the div called #widget into a canvas element. There are multiple divs(all different) and I've placed the button beside each div.
<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget" style="width:10px; height:10px; background:red">
</div>
<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget2" style="width:10px; height:10px; background:blue">
</div>
<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget3" style="width:10px; height:10px; background:green">
</div>
The problem is that I'd like for my users to be able to click any of the buttons beside each div and when they do so, the div beside the button will be converted into a canvas.
TL;DR I'm trying to get my button to work for the div that it's beside so users can convert any of the divs into a canvas.
jQuery has the .next() method that allows you to select the next sibling of an element. In your case, it will be the next element from the current clicked button:
$(".btnSave").click(function() {
html2canvas($(this).next(), {
I am trying to display the content of one of my div in a textbox ... Can somebody help me out with this? How can I display the content of my div tag in a textbox in HTML?
The following is what I have tried so far:
<script>
var test = document.getElementById("div").innerHtml;
document.getElementById("Key").value = test;
</script>
<div id="div" style="width: 50px" /></div>
<input type="text" id="Key" style="width: 50px" />
Julius, in your code, the text part needs to be a div class and in an external css stylesheet; declare the div class with a border.
Example HTML :
<div class="boxed">
This text is enclosed in a box.
</div>
CSS :
.boxed {
border: 1px solid green ;
}
Another way is to have a div class outside the form code and with css style the div and form
<div id="div">
<form id="form">
<input id="text" type="textbox" />
</form>
</div>
#div {
text-align: center;
}
#text {
width: 200px;
}
Say you have a div:
var myTextBox = $("#myTextBox");
var myText = $(".myDiv").text();
myTextBox.val(myText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv"> blah blah </div>
<input type="text" value="" id="myTextBox" />
Using JQuery, you can do:
var myText = $(".myDiv").text(); // query the DOM for .myDiv selector and get its text
var myTextBox = $("#myTextBox"); // query the DOM and get your textbox
myTextBox.val(myText); // assign value to your textbox
To use jquery, you have to include it at the top of your html page like this:
<script type="text/javascript src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js" ></script>
This will get the content from the div once the page had loaded.
If you have dynamic data: You can put this into a function and have window.onload call that function. If you want the content to update with the dynamic data then you can call the function to update the text box.
window.onload=function(){
//Get the innerHTML of the div tag
var a=document.getElementById('div').innerHTML;
//Place the inner HTML into the text box 'Key'
document.getElementById('Key').value=a;
};
<div id="div" style="width:50px;">Content here...</div>
<input type="text" id="Key"/>
I hope this helps. Happy Coding!
Firstly div is a really bad name for an id - give it something meaningful.
Secondly - do you see the / inside the opening div tag? that means you've just closed the div...
<div id="div" style="width: 50px" />
is the same as
<div id="div" style="width: 50px" /></div> so your code is now
<div id="div" style="width: 50px"></div></div>
and nothing in between the
<div id="div" style="width: 50px" /> and </div> will count as the inner html
I have a code of jQuery and HTML. The code is suppose to enable the user to change text color when clicking and also choose the color that the text should be changed to.
However, I'm having a bit of trouble. When I write blue in the textarea, it always change the text color to black. The second problem is that when I click "Show me the color of the text" it shows color with rgb. Is there any way to make it show the color's name?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Change Color of Text</title>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
var TextColor = $("#text").css("color");
var ColorToChangeTo = $("#ColorToChange").text();
$("#GetColor").click(function () {
$("#ShowColor").text("The text color is " + TextColor);
});
$("#ChangeColor").click(function () {
$("#text").css("color", ColorToChangeTo);
});
});
</script>
</head>
<body dir="ltr" style="font-family: calibri;">
<center>
<div id="text" style="color: red;">
Hello, I am a text.
<br>Click the button below to see what is my color. If you want to change my color,
<br>enter the color that you want me to be displayed in and push the button "Change text color!"
</div>
<input type="button" id="GetColor" value="Show me the text's color!" />
<br>
<div id="ShowColor"></div>
<input type="text" id="ColorToChange" />
<br>
<input type="button" id="ChangeColor" value="Change text color!" />
</center>
</body>
</html>
This should solve your first issue:
<!DOCTYPE html>
<html>
<head>
<title>Change Color of Text</title>
<script>
$(document).ready(function () {
$("#GetColor").click(function () {
var TextColor = $("#text").css("color");
$("#ShowColor").text("The text color is " + TextColor);
});
$("#ChangeColor").click(function () {
var ColorToChangeTo = $("#ColorToChange").val();
$("#text").css("color", ColorToChangeTo);
});
});
</script>
</head>
<body dir="ltr" style="font-family: calibri;">
<center>
<div id="text" style="color: red;">
Hello, I am a text.
<br>Click the button below to see what is my color. If you want to change my color,
<br>enter the color that you want me to be displayed in and push the button "Change text color!"
</div>
<input type="button" id="GetColor" value="Show me the text's color!" />
<br>
<div id="ShowColor"></div>
<input type="text" id="ColorToChange" />
<br>
<input type="button" id="ChangeColor" value="Change text color!" />
</center>
</body>
</html>
In particular:
$("#ChangeColor").click(function () {
var ColorToChangeTo = $("#ColorToChange").val();
$("#text").css("color", ColorToChangeTo);
});
You have to get the color inserted by the user every time the button is clicked (if you run $("#ColorToChange").val(); only at the loading of the page, it will keep the value at that particular moment and won't refresh).
To get the content of an Input, use .val() instead of .text(). The first one reads the value of the input, the second is used for retrieving the text inside a tag (<span>This is text that would be retrieved by .text()</span>)
Regarding the second request:
Is there any way to make it show the color's name?
Returning name of colors using jQuery
You can do that with color_classifier.js plugin. It works good and returns the name of nearest color that has name.
This is a question may be answered previously in stackoverflow here or here
How can I adapt the following code so that one of the divs will be open when the page is first loaded but will close when other divs are opened?
As it is now, the code hides the open div when another is open but only if that div is closed when the page is loaded.
I found the code here: Hiding a div when another is shown
So credit to whoever posted it.
<body>
<script language="javascript">
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
</script>
<input id="tempDivName" type="hidden" />
<ul>
<li>Show myDiv1</li>
<li>Show myDiv2</li>
<li>Show myDiv3</li>
</ul>
<br/>
<div id="myDiv1" style="background-color:red; height:200px; width:200px; display:none">
myDiv1
</div>
<div id="myDiv2" style="background-color:yellow; height:200px; width:200px; display:none">
myDiv2
</div>
<div id="myDiv3" style="background-color:green; height:200px; width:200px; display:none">
myDiv3
</div>
</body>
This is how I've adapted it so far to make it so each subsequent div can be accessed from the open div, but none of my (inexpert) tinkering has been able to make the code work when the first div in open to begin with, nor have I been able to find the answer using a search engine.
<body>
<script language="javascript">
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
</script>
<input id="tempDivName" type="hidden"/>
<div align="center">Contents</div>
<div id="myDiv1" style="display:none">
Page 1
<br/>
Page 2
</div>
<div id="myDiv2" style="display:none">
<div align="right">Page 2 ►</div>
<br/>
text page 1
</div>
<div id="myDiv3" style="display:none">
◄ Page 1
<br/>
<br/>
text page 2
</div>
</body>
You could just add a call to MyFunction to show one automatically.
So, after the divs, you can add
<script>
MyFunction('myDiv1');
</script>
jsfiddle: http://jsfiddle.net/cyberdash/x8nQs/