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>
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>
I want to repeat particular HTML element in a div after a particular height.
Consider we have a div and we want to add a <span> tag after every 50px height of div.
How can we achieve this?
I have tried this code.
<html>
<head>
<script>
function test() {
var length = document.getElementById('lc').style.length;
var element = document.createElement("div");
element.setAttribute("id", "break");
element.style.border
element.appendChild(document.createTextNode('Hello how are you'));
document.getElementById('lc').appendChild(element);
}
</script>
</head>
<body>
<input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />
<div id="lc" style="background: blue; height: 150px; width: 150px;
}" onclick="test();">
</div>
</body>
</html>
The thing is on which basis i can repeat loop for this code
<style>
.parent > *{
display:block;
height:50px;
border: 1px solid red;
}
</style>
<div classname="parent">
<span></span>
<span></span>
<span></span>
</div>
Try this code 😊
<script>
function test() {
var length = document.getElementById('lc').style.length;
var element = document.createElement("div");
element.setAttribute("id", "break");
element.appendChild(document.createTextNode('Hello how are you'));
element.style.height = "50px";
element.style.display = "block";
document.getElementById('lc').appendChild(element);
}
</script>
</head>
<body>
<input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />
<div id="lc" style="background: #999;min-height:150px;width: 150px;" onclick="test();">
</div>
</body>
</html>
Something like that?
Here I'm adding a div for every 50px in the area (read my comments in the code).
IMPORTANT: you can completely ignore the eventListener. That part is just so the script recalculates the amount of spans needed after resizing the window.
// Adding event listener
window.addEventListener("resize", magic);
// Running the function once so you don't have to resize the window
magic();
function magic() {
// Clear the last elements
while(area.firstChild) area.removeChild(area.firstChild);
// Get the needed amout of spans needed
let count = Math.floor(area.clientHeight / 50);
// Adding a span for each 50px
for(let i = 0; i < count; i++) {
let span = document.createElement("span");
span.className = "spans";
span.innerText = "Span WOHOO :D";
area.appendChild(span);
}
}
*{margin:0;padding:0;}
body, html {
height: 100%;
width: 100%;
}
#area {
background-color: gray;
height: 100%;
width: 100%;
}
.spans {
display: block;
height: 50px;
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="area">
</div>
</body>
</html>
Have a nice day, Elias :)
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">
I am trying to create a checker board using pure JavaScript, not jQuery.
I have created the first row, but cannot seem to "stack" the rows to create a full board. If there is a better way to go about this than the road I'm going down, please enlighten me.
<!DOCTYPE html>
<html>
<head>
<title>Checkerboard</title>
<style>
.box {
height: 50px;
width: 50px;
border: 1px solid black;
display: inline-block;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
var row = function (node, count) {
for (var i = 1; i < count; i++) {
if (i % 2 === 0) {
copy = node.cloneNode(true);
node.parentNode.insertBefore(copy, node).style.backgroundColor = "white";
} else {
copy = node.cloneNode(true);
node.parentNode.insertBefore(copy, node).style.backgroundColor = "red";
}
}
}
row(document.querySelector('.box'), 8);
</script>
</html>
Your code works fine, you just need to actually run the function you've created:
row(document.getElementsByClassName("box")[0], 50);
JSFiddle: http://jsfiddle.net/63dcjsk4/
Edit
If you're talking about the gap that appears between rows, fix this by using float and removing the inline-block display:
.box {
border: 1px solid black;
height: 50px;
float: left;
width: 50px;
}
JSFiddle: http://jsfiddle.net/63dcjsk4/1/
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.