Develop Reference

Clone contenteditable div without text

How can I clone a new row without also copying the text that has been inserted inside the contenteditable div? I want a new blank div to type into. Many thanks
<div id="wrapper">
<div id="row">
<div id="left">
<p><strong>Heading</strong></p>
<div contenteditable="true" data-placeholder="Type here...">
</div>
<div id="right">
<p><strong>Heading</strong></p>
<div contenteditable="true" data-placeholder="Type here...">
</div>
</div>
</div>
<button id="button" onlick="duplicate()">Add another row</button>
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('row');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "row" + ++i;
original.parentNode.appendChild(clone);
}

Recommendations
Do not assign #ids to anything that would be duplicated use .class and .querySelector(). It's actually a better practice not to use #id at all since it will become increasingly difficult to adapt your code in the future. There are exceptions when it is actually an advantage rather than a hinderance (ex. checkboxes/radiobuttons association with labels).
When handling events, do not use on event attributes -- instead, use on event properties or .addEventListener() to handle events such as "click". It appears that in the OP code on event attribute and property was used to handle the same click event.
<!-- Do not use this --> <button id="button" onlick="duplicate()">
<!-- Use this: listenerElement.onclick = duplicate
or this: listenerElement.addEventListener('click', duplicate)
-->
Add event handlers (ex. duplicate()) with on event property (ex. .onclick) or with .addEventListener() on a parent element of all elements that need an event handler. So instead of each button listening for a user to click it -- have div#wrapper (in example below it is main) listen for a user to click a button. It's strongly recommended that you familiarize yourself with event delegation.
Keeping what was previously mentioned in mind, the following example has:
all #ids replaced by .class.
the onclick="duplicate()" removed from button
the event handler (renamed addRow(e)) uses .insertAdjacentHTML() to render a template literal of section.row behind the section.row of the button.addRow that the user clicked. Details are commented in the example below
the event handler added to main in order to delegate click events for all buttons present when page has been loaded as well as any buttons added dynamically in the future
document.querySelector('main').onclick = addRow;
some CSS added and some minor changes to HTML for semantics and styling
Details are commented in the example below
Note: it wasn't clear whether it was one button or a button on every row. This example is designed for the latter. Please comment below if the former (a single button) is desired.
// Pass the Event Object
const addRow = event => {
// This is the tag user has clicked
const btn = event.target;
// This is the string that will be rendered
const tmp = `<section class="row"><div class="left part"><header>Heading</header><div contenteditable>Type here...</div></div><div class="right part"><header>Heading</header><div contenteditable>Type here...</div></div><button class="addRow">Add Row</button></section>`;
// This is the row of the tag user has clicked
let ref = btn.parentElement;
// if this tag has class .addRow...
if (btn.matches('.addRow')) {
/*
... render a string (tmp) after the
row of the clicked button (ref) into HTML
*/
ref.insertAdjacentHTML('afterEnd', tmp);
}
};
document.querySelector('main').onclick = addRow;
.row {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
}
.part {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
width: 42vw;
}
.right {
margin-left: 10px;
}
button {
display: block;
width: max-content;
margin-left: auto;
padding: 2px 4px;
}
<main>
<section class="row">
<div class="left part">
<header>Heading</header>
<div contenteditable>Type here...</div>
</div>
<div class="right part">
<header>Heading</header>
<div contenteditable>Type here...</div>
</div>
<button class='addRow'>Add Row</button>
</section>
</main>
The following example is designed with one button
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
main {
width: 100vw;
}
.box {
width: 80vw;
margin: 10px auto;
padding: 5px;
border: 2px solid black;
}
.row {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
}
.part {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
width: 36vw;
margin: 4px auto;
}
.right {
margin-left: 10px;
}
button {
display: block;
width: max-content;
margin: 4px 30px 4px auto;
padding: 2px 4px;
}
[data-ph]::before {
content: attr(data-ph)
}
</style>
</head>
<body>
<main>
<div class="box">
<section class="row">
<div class="left part">
<header>Heading</header>
<div data-ph='Type here...' contenteditable></div>
</div>
<div class="right part">
<header>Heading</header>
<div data-ph='Type here...' contenteditable></div>
</div>
</section>
</div>
<button class='addRow'>Add Row</button>
<div class="box">
<section class="row">
<div class="left part">
<header>Heading</header>
<div data-ph='Type here...' contenteditable></div>
</div>
<div class="right part">
<header>Heading</header>
<div data-ph='Type here...' contenteditable></div>
</div>
</section>
</div>
<button class='addRow'>Add Row</button>
</main>
<script>
const addRow = event => {
const btn = event.target;
const tmp = `<section class="row"><div class="left part"><header>Heading</header><div data-ph="Type here..." contenteditable></div></div><div class="right part"><header>Heading</header><div data-ph="Type here..." contenteditable></div></div></section>`;
let ref = btn.previousElementSibling;
if (btn.matches('.addRow')) {
ref.insertAdjacentHTML('beforeEnd', tmp);
}
};
document.querySelector('main').onclick = addRow;
</script>
</body>
</html>

You need to select the contenteditable elment and replace the html
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "row" + ++i;
clone.querySelector('div[contenteditable="true"]').innerHTML = '';
original.parentNode.appendChild(clone);
}
because you now said it is more than one, you need querySelectorAll
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "row" + ++i;
clone.querySelectorAll('div[contenteditable="true"]').forEach(function(elem) {
elem.innerHTML = '';
});
original.parentNode.appendChild(clone);
}

How do I toggle the background colors within a list of divs?

From a list of items, each in separate divs, the user can select and click only one. The background color should change on the selected one. If the user changes their mind, they can select another one, and the background color should change to the selected color and all the other divs on the list should change back to the default background color.
It's basically the same logic as a radio button on a form. Only one can be selected at a time.
How do I achieve this?
I have attempted to use the element.classList.toggle property. But it only handles each individually. Are there a javascript command(s) to handle this?
<style>
.teamSelected{
background-color: red;
border-radius: 4px;
}
</style>
<div onclick="toggleBackground(team1)">
<div id="team1">
</div>
</div>
<div onclick="toggleBackground(team2)">
<div id="team2">
</div>
</div>
<div onclick="toggleBackground(team3)">
<div id="team3">
</div>
</div>
<script>
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
element.classList.toggle("teamSelected");
}
}
</script>
Thanks!

You are passing variables to the function, which don't exist. You need to put them in quotes, because the function is expecting strings.
const allDivs = document.querySelectorAll('.div');
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
allDivs.forEach(function(el){
el.classList.remove('teamSelected');
});
element.classList.add("teamSelected");
}
}
.toggle > div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
.teamSelected {
background-color: red;
border-radius: 4px;
}
<div onclick="toggleBackground('team1')" class="toggle">
<div id="team1" class="div">
</div>
</div>
<div onclick="toggleBackground('team2')" class="toggle">
<div id="team2" class="div">
</div>
</div>
<div onclick="toggleBackground('team3')" class="toggle">
<div id="team3" class="div">
</div>
</div>

seems like this is something you want?
let x = ('.something');
$(x).on('click', function(){
$(x).css('background','blue');
$(this).css('background', 'green');
});
.something{
width: 100px;
height: 100px;
background: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="something">
<div id="team1">
</div>
</div>
<div class="something">
<div id="team2">
</div>
</div>
<div class="something">
<div id="team3">
</div>
</div>

Javascript - show a button inside of a DIV when clicked (and hide all others)

I have a list of DIVS that have buttons inside. By default, all buttons are hidden. When I click within a DIV area, the current button inside of this clicked DIV are should show (class='.db') AND all previously clicked/shown buttons should be hidden (class='.dn'). In other words, at any time there should be only one button (currently clicked) shown and all other should be hidden.
I want to use vanilla Javascript and tried this below, but it won't work. I feel there is some small error but don't know where.. Note - the DIVS and buttons don't have their own unique IDs (they only have the same CSS (.posted) classes.
PS - maybe it'd be better not to add this onClick="t();" to each DIV and use an 'addEventListener' function, but this is way too much for me ; )
CSS:
.dn {display:none}
.db {display:block}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
HTML:
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
JAVASCRIPT:
function t()
{
var x=document.getElementsByClassName("posted"),i,y=document.getElementsByTagName("button");
for(i=0;i<x.length;i++)
{
x[i].y[0].className="dn";
};
x.y[0].className='db';//make sure the currently clicked DIV shows this button (?)
}

You might want to read more about selector, how to select class, block level etc.
some link might be helpful:
CSS selector:
https://www.w3schools.com/cssref/css_selectors.asp
jQuery selector:
https://api.jquery.com/category/selectors/
Solution - Using jQuery:
$('.posted').on('click', function() {
//find all class called posted with child called dn, then hide them all
$('.posted .dn').hide();
//find this clicked div, find a child called dn and show it
$(this).find('.dn').show();
});
.dn {
display: none
}
.db {
display: block
}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="posted">
<button class="dn">Reply1</button>
</div>
<div class="posted">
<button class="dn">Reply2</button>
</div>
<div class="posted">
<button class="dn">Reply3</button>
</div>
Solution - Pure js version:
//get list of div block with class="posted"
var divlist = Array.prototype.slice.call(document.getElementsByClassName('posted'));
//for each div
divlist.forEach(function(item) {
//add click event for this div
item.addEventListener("click", function() {
//hide all button first
divlist.forEach(function(el) {
el.getElementsByTagName('button')[0].classList.add('dn');
});
//show button of the div clicked
this.getElementsByTagName('button')[0].classList.remove('dn');
}, false);
});
.dn {
display: none
}
.db {
display: block
}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="posted">
<button class="dn">Reply1</button>
</div>
<div class="posted">
<button class="dn">Reply2</button>
</div>
<div class="posted">
<button class="dn">Reply3</button>
</div>

You can do this with with plain JavaScript using Event Bubbling, querySelector and the element classList attribute like this.
Change your HTML to look like this:
<div class="posts">
<div class="posted">
<button class="dn">Reply</button>
</div>
<div class="posted" >
<button class="dn">Reply</button>
</div>
<div class="posted" >
<button class="dn">Reply</button>
</div>
</div>
Then use JavaScript like this:
var posts = document.querySelector('.posts');
var allPosted = document.querySelectorAll('.posted');
//clicks bubble up into the posts DIV
posts.addEventListener('click', function(evt){
var divClickedIn = evt.target;
//hide all the buttons
allPosted.forEach(function(posted){
var postedBtn = posted.querySelector('button');
postedBtn.classList.remove('db');
});
// show the button in the clicked DIV
divClickedIn.querySelector('button').classList.add('db')
});
You can find a working example here: http://output.jsbin.com/saroyit

Here is very simple example using jQuery .siblings method:
$(function () {
$('.posted').click(function () {
$('button', this).show();
$(this).siblings().find('button').hide();
});
});
https://jsfiddle.net/3tg6o1q7/

Dynamic alignment of div with array containing checkbox

First, I would apologize for my grammar I'm french (and like I already said frenchy su** in grammar, but I'm trying to improve myself)
So, I've an table with array who is automatically generated with the upload of an excel list. The table who is generated contain checkboxes. When you click on a checkboxes you've an Div who appears. In this div you can wrote a text who is reported in the excel document and you've to submit for validation. Summary this is for a guest check-list.
The length of the table is variable and I would align the Div with the checkbox who is clicked. (You click and just to the right there is the div who appears).
I've try with a fixed position but this is not enought precise. Somebody can tell me how I can do this or where I've to search ?
<? header('Content-Type: text/html; charset=utf-8'); ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="test.css" media="all"/>
<title>Ceci est une page HTML de test</title>
</head>
<script type="text/javascript" language="JavaScript" src="find5.js">
<form action = "check.php" method="GET">
<div class="slidingDiv" style="text-align:center; float:right; width : auto;">
<input type="checkbox" name="vestiaire[]" /><label>Vestiaire</label> <input type="text" name="commentaire" /> <input type="submit" value="VALIDER" />
Cacher</div>
<ul>
<?php
error_reporting(0);
include("script.php");
$i = 1;
foreach ($invites as $invite)
{
if($invite[0] != '' && $invite[1] == '')
{
echo ' <li>
<div class="circle" style="float:left;"></div>
<h4>'.$invite[0].'</h4>
<input class="show_hide" name="checkbox[]" id="'.$i.'" value="'.$i.'" type="checkbox" style="visibility:hidden" />
<label for="'.$i.'"><i class="fa fa-check"></i></label>
</li>';
}
$i++;
}
Hum I don't know if this is more clear with the code, but the Div wich I want dynamically align is "SlidingDiv"
Thanks !

First of all, the HTML structure with some useful classes.
<form action = "check.php" method="GET">
<!-- This div will never be used directly but rather cloned-->
<div id="originalSlidingDiv" class="slidingDiv" style="text-align:center; float:right; width : auto;">
<input type="checkbox" name="vestiaire[]" />
<label>Vestiaire</label>
<input type="text" name="commentaire" /> <input type="submit" value="VALIDER" />
<!-- We add different classes to the "Cacher" button and to the checkbox as they must behave a bit differently-->
Cacher
</div>
<ul>
<li class="item">
<div class="circle"></div>
<h4 class="item-name">bla</h4>
<input class="show_hide_cb" name="checkbox[]" id="a" value="a" type="checkbox" />
<label for="a"><i class="fa fa-check"></i></label>
</li>
<li class="item">
<div class="circle"></div>
<h4 class="item-name">blo</h4>
<input class="show_hide_cb" name="checkbox[]" id="b" value="b" type="checkbox" />
<label for="b"><i class="fa fa-check"></i></label>
</li>
</ul>
</form>
Then, the jQuery to make it work properly:
$(document).ready(function(){
var originalSlidingDiv = $('#originalSlidingDiv'),
slidingDiv;
$(".slidingDiv").hide();
$(".show_hide").show();
// When clicking each item's checkbox.
$('.show_hide_cb').on('click', function() {
// Check if we appended the slidingDiv already.
slidingDiv = $(this).parent().find('.slidingDiv');
// If not, we clone it, remove its id then append it to the parent (.item).
if (slidingDiv.length === 0) {
slidingDiv = originalSlidingDiv.clone(true, true)
.attr('id', '')
.appendTo($(this).parent());
}
// Finally we toggle display.
slidingDiv.slideToggle();
});
// When clicking the hide button (Cacher).
$('.show_hide_btn').on('click', function(e) {
e.preventDefault();
// $(this).parent() is the .slidingDiv element, we toggle display.
$(this).parent().slideToggle();
// $(this).parent().siblings('.show_hide_cb') is the checkbox, we want it to be unchecked.
$(this).parent().siblings('.show_hide_cb').attr('checked', false);
});
});
You can find enough explanations in the comments. Basically this will clone the .slidingDiv when necessary, append it to the clicked item, and toggle its display, but also will hide the slidingDiv when we click the button "Cacher". It will also uncheck the checkbox to get back to the initial state.
Finally, the little CSS to make it look as you wanted:
.slidingDiv {
text-align: center;
float: left;
}
.item {
margin-top: 1em; /* add some margin as it's removed from the h4 */
}
.circle {
float: left;
}
.item-name {
display: inline-block;
margin-top: 0; /* remove the margin to allow alignment */
}
JSFiddle: https://jsfiddle.net/superbiche/fhqcvbpe/
And yeah, I'm french too :)

There's going to be a lot of different answers to this question! Here's another simple way of doing this.
The reason fixed positioning doesn't work is because fixed always aligns to the window. Meaning, adding position: relative; to its parent element doesn't bind a fixed element. So you have to work with absolutely positioned elements or with pseudo elements.
$('.radio-list a').click(function() {
$('#popup').css({top: $(this).parent().offset().top, left: $(this).parent().position().left + $(this).parent().outerWidth()});
console.log($(this).position(), $('#popup').position());
});
.radio-list {
position: relative;
height: 500px;
width: 25%;
overflow-y: scroll;
}
.radio {
height: 50px;
line-height: 50px;
border: 1px solid #1e1e1e;
}
#popup {
position: absolute;
border: 1px solid red;
width: 300px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="radio-list">
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
</div>
<div id="popup">
Hi I'm the popup
</div>

minimize maximize the div ? javascript or jquery which works for all the div

i want to give minimize and maximize facility to my div..for that i have written following code in my jsp page
<div id="widnow" style="width: auto;">
<div id="title_bar">
<button type="button" class="max" id="button">
<img id="max" src="<%=request.getContextPath()%>/img/Minimize.png" />
</button>
</div>
<div id="box" style="height:auto; width: auto;">
<span id="info3" style="display: none;"></span>
<div id="chart3" style="width:80%; height:300px;"></div>
</div>
</div>
following is my css
#widnow{
width:400px;
border: 1px solid #DCDCDC;
}
#button{
width: 25px;
height: 24px;
float:right;
cursor:pointer;
position:relative;
margin: 0px 0px 0px 0px;
}
#title_bar{
background-image: url("<%=request.getContextPath()%>/img/Header Background.png");
height: 25px;
width: auto;
border-bottom: 1px solid #DCDCDC;
}
following is my js
$("#button").click(function(){
var isclass = $(this).attr('class');
if (isclass == "max")
{
$("#max").attr("src","<%=request.getContextPath()%>/img/Minimize.png");
$(this).removeClass('max');
}
else{
$(this).addClass('max');
$("#max").attr("src","<%=request.getContextPath()%>/img/Maximize.png");
}
$("#box").slideToggle();
});
Its Working Well When there is one div i want to give this facility..but with one single java script function or with j-query how can i achieve this?i have many div in single page and all should have there individual maximize and minimize facility.so can anyone tell me how can change my java script that works with all div?

Reconstructing your code a bit:
function activateMaxMin(elemButton,elemMax,elemBox)
{
var isclass = elemButton.attr('class');
if (isclass == "max")
{
elemMax.attr("src","<%=request.getContextPath()%>/img/Minimize.png");
elemButton.removeClass('max');
}
else{
elemButton.addClass('max');
elemMax.attr("src","<%=request.getContextPath()%>/img/Maximize.png");
}
elemBox.slideToggle();
}
$("#button").click(function(){
activateMaxMin($(this),$("#max"),$("#box"));
});
In case there is another button like this, use:
$("#button1").click(function(){
activateMaxMin($(this),$("#max1"),$("#box1"));
});
Of course, it could have been done in more efficient way, but that would need rewriting your code entirely.

<div id="widnow" class='window' style="width: auto;">
<div id="title_bar" class='title_bar'>
<button type="button" class="maxMinButton" id="button">
<img id="max" src="<%=request.getContextPath()%>/img/Minimize.png" class='max'/>
</button>
</div>
<div id="box" style="height:auto; width: auto;" class='box'>
<span id="info3" style="display: none;"></span>
<div id="chart3" style="width:80%; height:300px;"></div>
</div>
</div>
//javascript function
function activateMaxMin(elemButton,elemMax,elemBox)
{
var isclass = elemButton.attr('class');
if (isclass == "max")
{
elemMax.attr("src","<%=request.getContextPath()%>/img/Minimize.png");
elemButton.removeClass('max');
}
else{
elemButton.addClass('max');
elemMax.attr("src","<%=request.getContextPath()%>/img/Maximize.png");
}
elemBox.slideToggle();
}
$(document).ready(function(){
$(".maxMinButton").click(function(){
var elemButton=$(this);
var maxMinWidnow=button.closes('.window');
var elemMax=$(".max:firs",maxMinWidnow);
var elemBox=$(".box:first",maxMinWidnow);
activateMaxMin(elemButton,elemMax,elemBox)
});
});
This is the best I could get without doing lots of modifications to your code. Notice the added classes in each div in html, that are necessary. Be careful during modification.

Just change id notation "#" to class selector "." like #max to .max
What browser does it would work only for first occurrence of the id and try to change the img id to class
Well in your case that is different i have created a fiddle see at that if that helps you:
http://jsfiddle.net/32e2V/
$(".button").click(function () {
$(this).closest('div').siblings(".box").slideToggle();
if ($(this).text() == "max") {
$(this).text('min');
} else {
$(this).text('max');
}
});