I'm trying to work on a webpage that allows users to write their own notes for a school project, and my idea was to let them bold/italicize/underline their text using buttons. As of now, the buttons are working, but they bold/italicize/underline everything inside the text area. Instead, I want it to work in such a way that only the text they highlight gets bold/italicized/underlined.
I'd also like to know how to make it so that when they click the bold button, text that they type from then onwards will come out bold, and when they click it again, the text that is typed from then onwards will come out normal.
<script type="text/javascript">
function boldText(){
var target = document.getElementById("TextArea");
if( target.style.fontWeight == "bolder" ) {
target.style.fontWeight = "normal";
} else {
target.style.fontWeight = "bolder";
}
}
function italicText(){
var target = document.getElementById("TextArea");
if( target.style.fontStyle == "italic" ) {
target.style.fontStyle = "normal";
} else {
target.style.fontStyle = "italic";
}
}
function underlineText(){
var target = document.getElementById("TextArea");
if( target.style.textDecoration == "underline" ) {
target.style.textDecoration = "none";
} else {
target.style.textDecoration = "underline";
}
}
</script>
You can use execCommand(). This API was meant for developing text editors. The 3 buttons utilize the very versatile execCommand() and the writing element is a plain div enabled with the attribute contenteditable.
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
:root {
font: 400 2ch/1.25 Consolas;
}
body {
font-size: 2ch
}
#editor {
height: 100px;
width: 375px;
margin: 10px auto 0;
}
fieldset {
margin: 2px auto 15px;
width: 375px;
}
button {
width: 5ex;
text-align: center;
padding: 1px 3px;
}
</style>
</head>
<body>
<fieldset id="editor" contenteditable="true">
The quick brown fox jumped over the lazy dog.
</fieldset>
<fieldset>
<button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
</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);" title='Underline Highlighted Text'><u>U</u>
</button>
</fieldset>
</body>
</html>
Textarea does not allow such things. I would suggest you to use something like ckeditor. It will do the job for you neatly. But if you still want to do it yourself, you need to use a div with contenteditable tag.
Good Luck !
With textarea you cannot achieve that, use divs instead, so you can do something like this:
$(document).ready(function(){
$('.boldText').click(function(){
$('.container').toggleClass("bold");
});
$('.italicText').click(function(){
$('.container').toggleClass("italic");
});
$('.underlineText').click(function(){
$('.container').toggleClass("underline");
});
});
div.container {
width: 300px;
height: 100px;
border: 1px solid #ccc;
padding: 5px;
}
.bold{
font-weight:bold;
}
.italic{
font-style :italic;
}
.underline{
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container" contentEditable></div><br/>
<input type="button" class="boldText" value="Bold">
<input type="button" class="italicText" value="Italic">
<input type="button" class="underlineText" value="Underline">
Related
My goal is to have text change onmouseover from "hello" (without a link) to "Google" and provide an 'href' on the resulting "Google" text, and then revert to "hello" onmouseout without a link.
The code below works in changing the text from "hello" to "Google" but,
the link on "Google" does not work (even though I can right-click on "Google" and open the link on another tab)
the text does not change back to "hello" onmouseout.
Thanks for your help in advance!
Here is my code:
<style>
.container {
margin-top: 6vw;
margin-left: 40%;
margin-right: 40%;
}
</style>
<div class="container">
<h1>
<div class="hello" id="hello1" onmouseover="changeText()" onmouseout="changeText(this,'Hello.')">Hello.</div>
</h1>
</div>
<script>
function changeText() {
if (document.getElementById("hello1")) {
a = document.getElementById("hello1")
a.innerHTML = 'Google'
}
}
</script>
try this way onmouseout="this.innerHTML='Hello.';"
function changeText() {
if (document.getElementById("hello1")) {
a = document.getElementById("hello1")
a.innerHTML = 'Google'
}
}
.container {
margin-top: 6vw;
margin-left: 40%;
margin-right: 40%;
}
<div class="container">
<h1>
<div class="hello" id="hello1" onmouseover="changeText()" onmouseout="this.innerHTML='Hello.';">Hello.</div>
</h1>
</div>
By changing a class of a parent tag, any and all child tags can be affected via CSS. Having the HTML ready when the page loads and then hiding it is better than constantly creating and destroying HTML for trivial effects.
The events "mouseenter" and "mouselrave" are handled by a property event handler and an event listener. Either one is sufficient, but avoid using attribute event handlers:
<div onmouselame="lameAttributeEventHandler()">...</div>
Details are commented in the example below
// Reference the <header>
const hdr = document.querySelector('.title');
/* This is a property event handler
// Whenever the mouse enters within the borders of
// the <header>:
// '.google' class is added
// '.hello' class is removed
*/
hdr.onmouseenter = function(event) {
this.classList.add('google');
this.classList.remove('hello');
};
/* This is an even listener
// Whenever the mouse exits the <header> the
// opposite behavior of the previous handler
// happens
*/
hdr.addEventListener("mouseleave", function(event) {
this.classList.add('hello');
this.classList.remove('google');
});
.title {
height: 50px;
margin-top: 3vh;
border: 3px solid black;
text-align: center;
}
h1 {
margin: auto 0;
}
.hello span {
display: inline-block;
}
.hello a {
display: none;
}
.google a {
display: inline-block;
}
.google span {
display: none;
}
<header class="title hello">
<h1>
<span>Hello</span>
Google
</h1>
</header>
You can try this, May it help u to solve the problem
<!DOCTYPE html>
<head>
<title>change text on mouse over and change back on mouse out
</title>
<style>
#box {
float: left;
width: 150px;
height: 150px;
margin-left: 20px;
margin-top: 20px;
padding: 15px;
border: 5px solid black;
}
</style>
</head>
<html>
<body>
<div id="box" onmouseover="changeText('Yes, this is Onmouseover Text')" onmouseout="changeback('any thing')" >
<div id="text-display" >
any thing
</div>
</div>
<script type="text/javascript">
function changeText(text)
{
var display = document.getElementById('text-display');
display.innerHTML = "";
display.innerHTML = text;
}
function changeback(text)
{
var display = document.getElementById('text-display');
display.innerHTML = "";
display.innerHTML = text;
}
</script>
</body>
</html>
Hi there all i had some great help from people last night and have been trying to continue the project today at hte moment i am almost there i just need to be able to change the color of the button on this HTML page depending on the stats of the conole.log
<html>
<head>
<style>
input.MyButton {
width: 300px;
padding: 25px;
cursor: pointer;
font-weight: bold;
font-size: 150%;
background: #3366cc;
color: #fff;
border: 1px solid #white;
border-radius: 10px;
padding-bottom:25px;
}
input.MyButton:hover {
color: #ffff00;
background: #000;
border: 1px solid #fff;
}
</style>
</head>
<body>
<form>
<br>
<input class="MyButton" type="button" value="Office Light" onclick="togglelight('126')" />
<br>
<input class="MyButton" type="button" value="Fishtank Light" onclick="togglelight('128')" />
<br>
<label id ="officestatus">This</label>
</form>
</body>
<script type="text/javascript">
function togglelight(ipstr) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText); //To check output while error[Optional]
(#"=officestatus").append("hello");
}
};
xhttp.open("GET", "http://192.168.1."+ipstr+"/cm?cmnd=Power%20toggle", true);
xhttp.send();
}
</script>
</html>
Let's start with some syntax issues first. :)
<style>
input.MyButton {
// ...
border: 1px solid #white;
should be border: 1px solid white; or #fff
And also (#"=officestatus").append("hello"); is not valid syntax. The way to do this without jQuery (even though now it is present in all browsers) is document.querySelector("#officestatus").append("hello"); or document.getElementById("officestatus").append("hello");.
And lastly, in order to achieve what you want with changing the color of a button, I would recommend doing it like this:
create new CSS classes that controls the styling of the button in
input.buttonStyle1 {
background: red; // or any color you wish
}
input.buttonStyle2 {
background: green;
}
then add the class to the button depending on the value that you wish to check
if (this.responseText === "someValue") {
document.querySelector("input.MyButton").classList.add("buttonStyle1");
} else if (this.responseText === "someOtherValue") {
document.querySelector("input.MyButton").classList.add("buttonStyle2");
}
PS: By the way, I recommend adding an id to each button to differentiate between them. :)
PSS: You could do some nifty stuff like making the responseText be the name of the class that should be added to the button:
document.querySelector("input.MyButton").classList.add(responseText);
but you would also need to declare each possible class in your stylesheet.
I'm trying to make a small chat application (like in facebook). Now the problem is, I have somehow made it work, but the next message box doesn't append where I want it to be if there are more than 2 lines in previous chat message. They overlap. Now I thought appending one or more br tags after each div of message will solve this but it doesn't.
How to dynamically append div after div inside a larger div, making sure the div boxes inside it do not overlap and are at least 20px apart?
Does the following solve your problem:
$(document).ready(function() {
var smallerDiv = "<div class='container'><div class='floatLeft'>Some message</div></div>";
var smallerDivRight = "<div class='container'><div class='floatRight'>Some message</div></div>";
var alignRight = 0;
$('#addMore').click(function() {
var elem = $('#largerDiv');
if(alignRight == 0) {
elem.append(smallerDiv);
} else {
elem.append(smallerDivRight);
}
elem.scrollTop(elem[0].scrollHeight);
alignRight = (alignRight + 1)%2;
});
});
.container {
width: 100%;
display: inline-block;
padding: 4px;
border: 1px solid green;
}
.floatRight {
float: right;
}
.floatLeft {
float: left;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="largerDiv" class="largerDiv">
</div>
<input type="button" id="addMore" value="Add more">
</body>
</html>
function expand(){
currentvalue = document.getElementById("test").value;
if(currentvalue == "off"){
document.getElementById("test").value="on";
document.getElementById("test").style.height="100px";
var div = document.getElementById("test");
var content = document.getElementById("test3");
div.innerHTML = div.innerHTML + content.innerHTML;
}
else{
document.getElementById("test").value="off";
document.getElementById("test").style.height="20px";
var div = document.getElementById("test").innerHTML = "<div id='test2'><b>Div</b></div>";
}
}
<!doctype html>
<html>
<head>
<style>
#test{
position: absolute;
border-radius: 4px;
background: #CCCC00;
height: 20px;
width: 300px;
border: 1px solid #000000;
}
#test2{
text-align: center;
font-size: 12pt;
}
</style>
</head>
<body>
<a href="#" onClick="javascript:expand()" value="on">
<div id="test">
<div id="test2"><b>Div</b></div>
<div id="test3" style="display: none;">I want this to show up in my div!</div>
</div>
</a>
</body>
</html>
I'm trying to make an expandable div container which will display some text inside of it
when opened and then hide it when closed. I managed to make the div expand and close but
I can't figure out how to make the text appear in the expanded box. I can do it by inserting the text in the javascript but I want it set as a variable so i can use the script for multiple pages with different text inside of the div.
I don't know if I've approached it the right way and would like some help, ty in advance.
To display your text just change the style of the div containing your text to display: block:
document.getElementById("test3").style.display = "block";
For your requirements, it would be something like this:
function expand() {
if (currentValue == "off") {
currentValue = "on";
document.getElementById("test").style.height = "100px";
document.getElementById("test3").style.display = "block";
}
else {
currentValue = "off";
document.getElementById("test").style.height= "20px";
document.getElementById("test3").style.display = "none";
}
}
Here you have a working fiddle.
I have a code that I am working on so that it has a heading tag and an arrow floated to the right and when you click on that arrow it shows the contents of the hidden element and changes the down arrow to an up arrow. Everything seems to work fine except the links I have under the image within the toggle do not work. I cannot highlight the text for some reason so I am assuming that there is an overlap somewhere in my coding.
The JavaScript
function toggleDisplayNewark() {
document.getElementById("toggleMe").style.display == "none";
if(document.getElementById("toggleMe").style.display == "none" ) {
document.getElementById("toggleMe").style.display = "inline";
document.getElementById("toggleMe").style.visibility = "visible";
document.getElementById("arrow").style.background = "url(img/up.png) no-repeat";
} else {
document.getElementById("toggleMe").style.display = "none";
document.getElementById("arrow").style.background = "url(img/down.png) no-repeat";
}
}
The HTML
<div id='newark'>
<div class='text-heading'>
<h2>Newark</h2>
<a href="#newark" onclick="toggleDisplayNewark();">
<div id='arrow'></div>
</a>
</div>
<div id='toggleMe' style='display: none;'>
<div class='alignleft thumb-imgs'>
<img src='img/excercise.png' />
<a href='http://exercise.com/' target='_blank'>Exercise Institute</a>
</div>
<div class='clear'></div>
</div>
</div>
The CSS
#arrow {background: url(http://emf-websolutions.com/wp-content/uploads/2013/03/down.png) no-repeat; height: 27px; width: 29px; float: right; margin: -30px 10px 0 0;}
#toggleMe {display: none;}
.text-heading {-webkit-border-radius: 5px; border-radius: 5px; margin: 10px 0; width: 640px; padding: 5px 0px; background: #333; border: 1px solid red;}
.clear {clear: both;}
.thumb-imgs {width: 204px; height: 210px; padding: 5px 5px 40px 5px;}
I built this in a html file before I put it into wordpress so I could make sure that it works properly. I just can't seem to find where the problem lies. I have striped down the coding so that it would not take up so much space. The idea of this is to have a heading with an arrow in the right side to drop down this box with 3 images with a link under each one for each line.
Thanks for your help in advance.
http://jsfiddle.net/QXSXC/
remove the onclick
<a href="#newark" >
and use jQuery:
$('#newark').click(function() {
document.getElementById("toggleMe10").style.display == "none";
if(document.getElementById("toggleMe10").style.display == "none" ) {
document.getElementById("toggleMe10").style.display = "inline";
document.getElementById("toggleMe10").style.visibility = "visible";
document.getElementById("arrow10").style.background = "url(img/up.png) no-repeat";
} else {
document.getElementById("toggleMe10").style.display = "none";
document.getElementById("arrow10").style.background = "url(img/down.png) no-repeat";
}
});
You can assign a handler to #newarkwith pure JS google it if you can't use jQuery