Moving <div> from one <div> to another back and forth

Moving <div> from one <div> to another back and forth - javascript

I found lots of information on the web about how to remove, attach, prepend, etc. Element from and to DIV. Unfortunately I have a hard time making it work.
In my project, I will have to attach element to div and move them around on a grid (each grid cell being a div of it's own) Bellow is a small script which mimics what I'm trying to do.
Here's the example (here's a link to JSFiddle : http://jsfiddle.net/mgR5b/25/):
HTML:
<div id="LeftAndRightRow1" style="display:inline-block; height:100%;width:100%;border:1px solid black; background-color: red;">
<div id="Left" style="display:inline-block; height:100%;width:45%; border:1px solid black; background-color: blue;">
<button id="B1">B1</button>
</div>
<div id="Right" style="display:inline-block; height:100%;width:45%;border:1px solid black; background-color: pink;">
<button id="B2">B2</button>
</div>
</div>
<div id="LeftAndRightRow2" style="display:inline-block; height:100%;width:100%;border:1px solid black; background-color: red;">
<div id="Left2" style="display:inline-block; height:100%;width:45%; border:1px solid black; background-color: yellow;">
<button id="B3">B3</button>
</div>
<div id="Right2" style="display:inline-block; height:100%;width:45%;border:1px solid black; background-color: purple;">
<button id="B4">B4</button>
</div>
</div>
<br>
<button id="SwapButton">Swap Button</button>
JQuery / JavaScript
Now, imagine I want to swap the container "Left" (I want to move the Div, not the button) to the second row (LeftAndRightRwo2).
I tried various things but not of them worked... My last attempt:
$(document).ready(function () {
$("#SwapButton").click(function () {
alert('trying to swap');
$("#Left").remove();
$("#LeftAndRightRow2").append($("#Left"));
});
});
etc.
None of what I tried worked.
Can someone help understand how to move div from one place to another.
Thank you

When you remove an element, it is no longer on the DOM. If you want to move a DOM element like that you need to store it in a variable. Also you should use detach instead of remove as it is more efficient in this case.
$(document).ready(function () {
$("#SwapButton").click(function () {
var left = $('#Left');
left.detach();
$("#LeftAndRightRow2").append(left);
});
});

When you use $("#Left").remove() you are actually removing it from the DOM, so you can't recall it later with $("#LeftAndRightRow2").append($("#Left"));.
Try to save it, like this, in a variable:
JS
$("#SwapButton").click(function () {
alert('trying to swap');
var left = $("#Left");
$(left).remove();
$("#LeftAndRightRow2").append($(left));
});
Now the entire div moves from the right to the left.
fiddle
http://jsfiddle.net/mgR5b/26/

I think your problem is more of CSS and less in JS I have changed your mark up and CSS to get the result you are looking for
Markup
<div id="LeftAndRightRow1" class="rows">
<div id="Left">
<button id="B1">B1</button>
</div>
<div id="Right">
<button id="B2">B2</button>
</div>
</div>
<div id="LeftAndRightRow2" class="rows">
<div id="Left2">
<button id="B3">B3</button>
</div>
<div id="Right2">
<button id="B4">B4</button>
</div>
</div>
<br style="clear:both;" />
<button id="SwapButton">Swap Button</button>
JS
$(document).ready(function () {
$("#SwapButton").click(function () {
//alert('trying to swap');
// $("#Left").remove();
$("#LeftAndRightRow2").append($("#Left"));
});
});
CSS
.rows{
display:block;
clear:left;
}
.rows div{
float:left;
}
JSFIDDLE

Related

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>

move element to top when click each buttons

I have list and each list has "move top" button.
when click "move top" button, div element shoul be move to top(in DOM).
But I am getting little trouble to make it.
Also when using keyboard tabbing to the button and press enter key, the focus has to be keep to the button, after press the keyboard enter.
This is what I tried so far here
Please help.
$('.btnTop').on('click', function() {
$(this).parent().prepend(this).focus();
});
.box {
border: 1px solid #000;
margin: 0 0 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div id="aa" class="box">
aa <button class="btnTop">Top</button>
</div>
<div id="bb" class="box">
bb <button class="btnTop">Top</button>
</div>
<div id="cc" class="box">
cc <button class="btnTop">Top</button>
</div>
</div>

You are prepending the wrong item. You need to prepend the parent div of the button, not the button itself. Also, you need to prepend to the .wrap div, which is the button's parent parent rather than to the button's parent which is just the div wrapping the button.
Lastly, you need to focus() on this (which is the button you clicked) to get the tab button working. At the moment you are not focusing on the button you clicked on.
See working example below:
$('.btnTop').on('click', function() {
let this_div = $(this).parent();
this_div.parent().prepend(this_div);
$(this).focus();
});
.box {
border: 1px solid #000;
margin: 0 0 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div id="aa" class="box">
aa <button class="btnTop">Top</button>
</div>
<div id="bb" class="box">
bb <button class="btnTop">Top</button>
</div>
<div id="cc" class="box">
cc <button class="btnTop">Top</button>
</div>
</div>

How to swap two div respectively on button click using jquery?

I want to swap div on each click. But it swaps on only first click.
function SwapDivsWithClick() {
$('#swapper-other').each(function() {
if (!$(this).text().match(/^\s*$/)) {
$(this).insertBefore($(this).prev("#swapper-first"));
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
This div displayed when the web page first loaded.
</p>
</div>
<div id="swapper-other" style="display:block; border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
This div displayed when the link was clicked.
</p>
</div>
<p style="text-align:center; font-weight:bold; font-style:italic;">
(Swap Divs)
</p>

You doesn't need to use .each() because your selector contain one element. So use bottom code.
Select #swapper-first and #swapper-other in one selector and get which one that is first using .first() and use .before() to inserting selected element before another.
function SwapDivsWithClick() {
$('#swapper-first, #swapper-other').first().before(function(){
return $(this).next();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="swapper-first" class="" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
This div displayed when the web page first loaded.
</p>
</div>
<div id="swapper-other" style="display:block; border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
This div displayed when the link was clicked.
</p>
</div>
<p style="text-align:center; font-weight:bold; font-style:italic;">
(Swap Divs)
</p>

Here is a working example: the last div with the class swapIt is set before the first div with the class swapIt.
What I've done:
I gave every div the class swapIt. In the function the last element (:last) with this class is getting pushed over the first element with the class (swapIt).
function SwapDivsWithClick() {
$('.swapIt:last').insertBefore($('.swapIt:first'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="swapper-first" class="swapIt" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
This div displayed when the web page first loaded.
</p>
</div>
<div id="swapper-other" class="swapIt" style="display:block; border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
This div displayed when the link was clicked.
</p>
</div>
<p style="text-align:center; font-weight:bold; font-style:italic;">
(Swap Divs)
</p>
The approach with classes has the advantage that you can have more than two divs and every time the button is clicked the last div gets pushed over the first. Even with 5, 7 or 10 this would still work!

DIV with BORDER Hover problem

HTML:
<div class="container" style="width:200px; height: 200px; border: 10px solid #ccc">
contents..
</div>
JQUERY:
$('.container').hover(function() {
console.log('in');
},
function() {
console.log('out');
});
It makes console.log when hover occurs both on border and div.
Objectives:
1> Want to make a `hover` event only for `div`, but not for `border`.
2> Fire another `hover` event on `border`, but not for `div`
Are the possible? if, then I want your cordial help..

A pragmatic solution would be to:
<div class="container" style="width:200px; height: 200px; border: 10px solid #ccc">
<div class="inner" style="height: 200px;">
contents..
</div>
</div>
and
$('.container .inner').hover(function() {
console.log('in');
},
function() {
console.log('out');
});
Cleanest option imo. a javascript solution would be more complex and simply not worth it.

The border IS the div, at least in part.
There's no event for specifically hovering over a border that I know of.
What you can do is have a nested div (within another div) and have a 10px padding on the internal one. This will give you 2 divs to work with and apply hover events to as well as looking the way you require.
Working example: http://jsfiddle.net/jssSA/
HTML
<div id="outer">
<div id="inner">Some content</div>
</div>
CSS
#outer,#inner{width:300px; height:300px;}
#outer{
background-color:#000;
padding:10px;
}
#inner{
background-color:#ccc;
}
jQuery
$('#outer').hover(function(){
console.log("outer in")},
function(){console.log("outer out")});
$('#inner').hover(function(){
console.log("inner in")},
function(){console.log("inner out")});

how to determine the element ID of div that is positioned x pixels to the right of visible screen?

Hitting a wall with this one, hope someone can lend a hand. I have a wrapper div containing many fixed-width "content" divs. It's like a table, except that the number of items "per row" aren't fixed, so that whenever the screen size is wide, more items fit onto the screen. Pretty basic.
Also, each of these "content" divs has an adjacent "details" div that is hidden by default ("style=display:none"), and an adjacent "separator" div that is empty, containing only the style "clear:both;".
Each content/details/separator div has a unique number in its ID, so that I can tell they are related (e.g., content123, details1234, separator1234)
Now, when one of these content divs is clicked, I want to reveal its "details" div below it. That part, I've got working partially, by wrapping an anchor tag around the content div, which fires an onClick javascript event, which in turns runs a jQuery statement to make visible the details and separator divs jQuery(".details1234").css("display","block");"
But you can imagine my problem. Once that "separator" div is reveled, it pushes down (clears) any "content" divs that appears to the right of it, ugly. My thought, what I have been wrestling with for hours, is to reveal the "separator" div of the content div, that is the last one appearing in the "row" that was clicked. That way, a new "row" will be opened up by the separator, so that when the "content" div is revealed it appears below the clicked item in the new row. To do that, I need to figure out the elementID of the last content div in the "row", and I was thinking about using the Y-coord of the mouse click event, plus the X-coord = to the right-most edge of the wrapper div minus half the width of the fixed-width content div. Something like that. But I am smashed into a wall and can't figure it out.
Can anyone help me do that? Or offer a different solution?
If sample code would help let me know, I could whip up an example, but it may take some screen space in this post.
Thanks everyone.. going nuts with this.
EDIT: the sample code below is based on my site. When a cell is clicked, you can see its "details" div appear below it, but unfortunately the other divs in the "row" get pushed down. that is the effect I'm trying to avoid. When a cell is clicked, I want the "details" to appear below it, but also the other divs to stay in their positions above the other cell's details, basically I want to keep the "row" intact. In the code, you can see my fruitless experiments using a "separator" div, because my assumption is that if I can insert that after the last div in the row, then the "details" div will become the next row, followed then by the next row of cells. Hope I explained it OK. Thanksgiving feast causing blood to divert from brain ;)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#overallwrapper{
background: #CCCCCC;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
margin-top: 5px;
}
.contentcell{
border: 2px solid blue;
padding: 4px;
float: left;
width: 200px;
}
.separator{
clear:both;
display: none;
}
.details{
background:lightgreen;
border: 2px solid green;
width:450px;
display:none;
float:left;
clear:both;
}
</style>
<script type="text/javascript">
function showDetails(contentid){
//first, reset all highlights and close any open content divs
$("#overallwrapper .contentcell").css("border","2px solid blue");
$(".details").css("display","none");
$(".separator").css("display","none");
//now highlight the clicked div and reveal its content div
var contentHI = "#content"+contentid;
var detailsON = "#details"+contentid;
var separatorON = "#separator"+contentid;
$(contentHI).css("border","2px solid green");
//$(separatorON).css("display","block");
$(detailsON).css("display","block");
}
</script>
</head>
<body>
<div id="overallwrapper">
<div id="contentwrapper01">
<div id="content01" class="contentcell">cell01</div>
<div id="details01" class="details">here are details about cell01</div>
<div id="separator01" class="separator"> </div>
</div>
<div id="contentwrapper02">
<div id="content02" class="contentcell">cell02</div>
<div id="details02" class="details">here are details about cell02</div>
<div id="separator02" class="separator"></div>
</div>
<div id="contentwrapper03">
<div id="content03" class="contentcell">cell03</div>
<div id="details03" class="details">here are details about cell03</div>
<div id="separator03" class="separator"></div>
</div>
<div id="contentwrapper04">
<div id="content04" class="contentcell">cell04</div>
<div id="details04" class="details">here are details about cell04</div>
<div id="separator04" class="separator"></div>
</div>
<div id="contentwrapper05">
<div id="content05" class="contentcell">cell05</div>
<div id="details05" class="details">here are details about cell05</div>
<div id="separator05" class="separator"></div>
</div>
<div id="contentwrapper06">
<div id="content06" class="contentcell">cell06</div>
<div id="details06" class="details">here are details about cell06</div>
<div id="separator06" class="separator"></div>
</div>
<div style="clear:both;"></div><!-- to prevent parent collapse -->
</div>
</body>
</html>

User ,
if you give as regular position be default , it pushes the other contents definetly down as they come in squence.
Change the hidden divs position to absolute so that it will go out of sequence and you can position at anywhere on the page by top and left property.
get the offset of the div you want next to...
http://api.jquery.com/offset/
it will have top and left property , use those property's and position next to them.
let me know if you need anything else.
give a bigger z-index for the hidden divs.

What about showing the details div with position: absolute, on top of everything else? (See here, the code's a little messy but you get the idea).

I partially figured it out, but the logic may be very clunky. I basically walk left by 100px from the width of the container div until I find a content div. Plus it doesn't work in IE8, because IE is not getting the same results from jQuery's offset() or position() as firefox, it always reports "19". So in IE, I can never get a Y-coordinate value. I'm too sleepy now to work on this anymore today. If someone can lend a hand or tell me how to improve the javascript that would be cool.
Here is the working code for Firefox (I changed javascript and css of the detail divs, compared to original question):
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#overallwrapper{
background: #CCCCCC;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
margin-top: 5px;
}
.contentcell{
border: 2px solid blue;
padding: 4px;
float: left;
width: 200px;
}
.separator{
clear:both;
display: none;
}
.details{
background:lightgreen;
border: 2px solid green;
display:none;
clear:both;
}
</style>
<script type="text/javascript">
function showDetails(contentid){
//first, reset all highlights and close any open content divs
$("#overallwrapper .contentcell").css("border","2px solid blue");
$(".details").css("display","none");
$(".separator").css("display","none");
//now highlight the clicked div and reveal its content div
//first, figure out which separator to display.
//1.get the y-pos from the clicked element, this gives y-coord of the row
contentClicked = "#content"+contentid;
var clickedoffset = $(contentClicked).offset();
var ypos = clickedoffset.top;
var wrapperwidth = $("#overallwrapper").width();
for (var xpos=wrapperwidth; xpos>0; xpos-=100){
var elematpos = document.elementFromPoint(xpos, ypos);
var elematposid = elematpos.id;
if (elematposid.substring(0,7) == "content") {
var lastcontentdivID = elematposid.substring(7);
break;
}
}
$(contentClicked).css("border","2px solid green");
var detailsON = "#details"+contentid;
$(detailsON).css("display","block");
var lastidonscreen = "#content"+lastcontentdivID;
$(detailsON).insertAfter(lastidonscreen);
}
</script>
</head>
<body>
<div id="overallwrapper">
<div id="contentwrapper01">
<div id="content01" class="contentcell">cell01</div>
<div id="separator01" class="separator"> </div>
<div id="details01" class="details">here are details about cell01</div>
</div>
<div id="contentwrapper02">
<div id="content02" class="contentcell">cell02</div>
<div id="separator02" class="separator"></div>
<div id="details02" class="details">here are details about cell02</div>
</div>
<div id="contentwrapper03">
<div id="content03" class="contentcell">cell03</div>
<div id="separator03" class="separator"></div>
<div id="details03" class="details">here are details about cell03</div>
</div>
<div id="contentwrapper04">
<div id="content04" class="contentcell">cell04</div>
<div id="separator04" class="separator"></div>
<div id="details04" class="details">here are details about cell04</div>
</div>
<div id="contentwrapper05">
<div id="content05" class="contentcell">cell05</div>
<div id="separator05" class="separator"></div>
<div id="details05" class="details">here are details about cell05</div>
</div>
<div id="contentwrapper06">
<div id="content06" class="contentcell">cell06</div>
<div id="separator06" class="separator"></div>
<div id="details06" class="details">here are details about cell06</div>
</div>
<div style="clear:both;"></div><!-- to prevent parent collapse -->
</div>
</body>
</html>
EDIT:
Blasted IE. I just can't trust it to determine screen coordinates. I got it working though, but only for Firefox. again IE is trying to drive me insane by not handling insertAfter properly. arrgh! here is the final code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#overallwrapper{
background: #CCCCCC;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
margin-top: 5px;
}
.contentwrapper{
}
.contentcell{
padding: 4px;
float: left;
width: 200px;
height: 100px;
border: 2px solid blue;
}
.separator{
clear:both;
display: none;
}
.details{
background:lightgreen;
border: 2px solid green;
display:none;
clear:both;
}
</style>
<script type="text/javascript">
function showDetails(contentid){
//first, reset all highlights and close any open content divs
$("#overallwrapper .contentcell").css("border","2px solid blue");
$(".details").css("display","none");
$(".separator").css("display","none");
var contentClicked = "#content"+contentid;
var thisypos = $(contentClicked).offset().top;
var nextdivid = contentClicked;
var countid = contentid;
do
{
var prevdivid = nextdivid;
var nextcontentid = (countid * 1) + 1;
var nextcontentid = '' + nextcontentid;
if ( nextcontentid.length < 2)
{ nextcontentid = "0" + nextcontentid; }
nextdivid = "#content" + nextcontentid;
if ( $(nextdivid).length ) {
var nextypos = $(nextdivid).offset().top;
countid++;
} else {
break;
}
}
while (thisypos == nextypos);
$(contentClicked).css("border","2px solid green");
var detailsON = "#details"+contentid;
$(detailsON).css("display","block");
$(detailsON).insertAfter(prevdivid);
}
</script>
</head>
<body>
<div id="overallwrapper">
<div id="contentwrapper01" class="contentwrapper">
<div id="content01" class="contentcell">cell01</div>
<div id="separator01" class="separator"> </div>
<div id="details01" class="details">here are details about cell01</div>
</div>
<div id="contentwrapper02" class="contentwrapper">
<div id="content02" class="contentcell">cell02</div>
<div id="separator02" class="separator"></div>
<div id="details02" class="details">here are details about cell02</div>
</div>
<div id="contentwrapper03" class="contentwrapper">
<div id="content03" class="contentcell">cell03</div>
<div id="separator03" class="separator"></div>
<div id="details03" class="details">here are details about cell03</div>
</div>
<div id="contentwrapper04" class="contentwrapper">
<div id="content04" class="contentcell">cell04</div>
<div id="separator04" class="separator"></div>
<div id="details04" class="details">here are details about cell04</div>
</div>
<div id="contentwrapper05" class="contentwrapper">
<div id="content05" class="contentcell">cell05</div>
<div id="separator05" class="separator"></div>
<div id="details05" class="details">here are details about cell05</div>
</div>
<div id="contentwrapper06" class="contentwrapper">
<div id="content06" class="contentcell">cell06</div>
<div id="separator06" class="separator"></div>
<div id="details06" class="details">here are details about cell06</div>
</div>
<div style="clear:both;"></div><!-- to prevent parent collapse -->
</div>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Moving <div> from one <div> to another back and forth - javascript

Related

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

move element to top when click each buttons

How to swap two div respectively on button click using jquery?

DIV with BORDER Hover problem

how to determine the element ID of div that is positioned x pixels to the right of visible screen?

Categories

Resources