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!
Related
I have a list of divs with unique numeric id and data-position in order as they are (1 for the first in the list, 2 for the second ...).
After doing a ajax call through jquery, the result is a JSON call that changes the order of those id's.
each div have a button where you can mark and unmark the div on the top of this list.
if the mark button is called, the ajax calls that id with a new position (generally 1, but if there are more messages marked as important, this may be 2 or 3 but always following the position order) from his unmarked position
if the unmark button is fired, the ajax calls his new position.
so more or less the result is this one:
before ajax call:
<div class="card-wrapper" style="display:block;" id="1563" data-position="1">
message text
</div>
<div class="card-wrapper" style="display:block;" id="1561" data-position="2">
message text
</div>
<div class="card-wrapper" style="display:block;" id="1567" data-position="3">
message text
</div>
<div class="card-wrapper" style="display:block;" id="1568" data-position="4">
message text
</div>
button is fired, ajax called:
if (res.response === 'ok') {
res.order.forEach(function (value) {
$('#' + value.id + '.card-wrapper').attr('data-position', value.position);
});
...
}
after ajax call:
<div class="card-wrapper" style="display:block;" id="1563" data-position="3">
message text
</div>
<div class="card-wrapper" style="display:block;" id="1561" data-position="1">
message text
</div>
<div class="card-wrapper" style="display:block;" id="1567" data-position="2">
message text
</div>
<div class="card-wrapper" style="display:block;" id="1568" data-position="4">
message text
</div>
now i would like to sort the divs with the new data position in order using some sort of animation (swapping them) just after the ajax has been called.
please consider that all .card-wrapper may have different height and inside of it there are different bootstrap cards.
i tried using .animate with jquery and more or less i got how it works (get the height of every div and use .animate({top: '+=x'}) or .animate({top: '-=x'}) but i can't figure out how to do it all together,
any help is appreciated.
sorry for any mispelling or typo.
if it's unclear just ask me.
thank you
This is what I understood as your requirement. You want to rearrange the divs by data-position after ajax call completion. I could not get a great animation but could get them to order properly using jquery. I put all the divs in another div with id called 'parent'.
Hope this helps.
<div class="container">
<h1>Div Rearrangement</h1>
<div class="row" id="parent">
<div class="card-wrapper" style="display:block; height:100px; border: 1px solid yellow;" id="1568" data-position="5">
5 message text
</div>
<div class="card-wrapper" style="display:block; height:100px; border: 1px solid blue;" id="1563" data-position="3">
3 message text
</div>
<div class="card-wrapper" style="display:block; height:100px; border: 1px solid violet;" id="1561" data-position="1">
1 message text
</div>
<div class="card-wrapper" style="display:block; height:100px; border: 1px solid orange;" id="1568" data-position="6">
6 message text
</div>
<div class="card-wrapper" style="display:block; height:100px; border: 1px solid indigo;" id="1567" data-position="2">
2 message text
</div>
<div class="card-wrapper" style="display:block; height:100px; border: 1px solid green;" id="1568" data-position="4">
4 message text
</div>
<div class="card-wrapper" style="display:block; height:100px; border: 1px solid red;" id="1568" data-position="7">
7 message text
</div>
</div>
</div>
<script>
if (res.response === 'ok') {
var count = $("#parent > div").length;
console.log(count);
for(var i=1; i<count+1; i++) {
var thisDiv = $(' #parent > div[data-position=' + i + ']');
console.log(thisDiv);
thisDiv.appendTo($("#parent")).hide().fadeIn(1000);
}
}
</script>
I'm a newbie with Javascript and having a hard time figuring out the correct code for this function.
I have multiple divs. Each div has 2 child divs that swap when clicked.
For instance, the first div is a styled image with a rollover effect. When the image is clicked, it swaps with a <video>.
However, I'm trying to add some functionality to the this... If I click on another image to play the <video>, I want the other videos to stop and swap back to the original image divs.
Here's the code I'm testing with.
function SwapDivsWithClick(div1, div2) {
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
if (d2.style.display == "none") {
d1.style.display = "none";
d2.style.display = "block";
} else {
d1.style.display = "block";
d2.style.display = "none";
}
}
<div id="project1Img" class="showDiv" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
Img1
</p>
</div>
<div id="project1Vid" class="hideDiv" style="display:none; border:2px dotted blue; padding:25px;">
<video>video content</video>
</div>
<div id="project2Img" class="showDiv" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
Img2
</p>
</div>
<div id="project2Vid" class="hideDiv" style="display:none; border:2px dotted blue; padding:25px;">
<video>video content</video>
</div>
<div id="project3Img" class="showDiv" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
Img3
</p>
</div>
<div id="project3Vid" class="hideDiv" style="display:none; border:2px dotted blue; padding:25px;">
<video>video content</video>
</div>
The problem I'm trying to solve is that when you click a second link, then the other two revert back to the original div1.
Are you open to using jQuery or another DOM manipulation library? You can write something to solve this problem relatively easily if the weight of the file isn't a problem. In any case, if you use native JS, you might want to focus your energy on the ability to loop thru DOM elements.
Here is an easy version in jQuery
$('.toggler').on('click', function(e) {
e.preventDefault();
var thisProjectVideo = $(this).parents('.projectImg').siblings('.projectVid');
var thisProjectImg = $(this).parents('.projectImg');
var allProjectVids = $('.projectVid');
var allprojectImgs = $('.projectImg');
allprojectImgs.removeClass('displayNone');
thisProjectImg.addClass('displayNone');
allProjectVids.addClass('displayNone');
thisProjectVideo.removeClass('displayNone');
})
.displayNone {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="videoContainer">
<div id="project1Img" class="projectImg showDiv" style="border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
<a class="toggler">Img1</a>
</p>
</div>
<div id="project1Vid" class="projectVid hideDiv displayNone" style="border:2px dotted blue; padding:25px;">
<video>video content</video>
</div>
</div>
<div class="videoContainer">
<div id="project2Img" class="projectImg showDiv" style="border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
<a class="toggler">Img2</a>
</p>
</div>
<div id="project2Vid" class="projectVid hideDiv displayNone" style="border:2px dotted blue; padding:25px;">
<video>video content</video>
</div>
</div>
<div class="videoContainer">
<div id="project3Img" class="projectImg showDiv" style="border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
<a class="toggler">Img3</a>
</p>
</div>
<div id="project3Vid" class="projectVid hideDiv displayNone" style="border:2px dotted blue; padding:25px;">
<video>video content</video>
</div>
</div>
How about using document.getElementsByClassName('showDiv') and loop through them (skipping to the next iteration of the loop if the element id matches the div1 argument), and set style.display='block' on all of them. This will show all the images except the one with the id of div1.
Then use document.getElementsByClassName('hideDiv') and loop through them (again, skipping to the next one if the element id matches div2), and set style.display='none'. This will hide all the videos except the id of div2.
This will reset all the divs in your list (regardless of how many there are) to their default state, and then you can hide div1 and show div2, and you're done.
This replacement function will do exactly what you want:
function SwapDivsWithClick(div1, div2) {
var d = document.getElementsByClassName('showDiv');
for (i = 0; i < d.length; ++i) {
d[i].style.display = (d[i].id == div1) ? 'none' : 'block';
}
d = document.getElementsByClassName('hideDiv');
for (i = 0; i < d.length; ++i) {
d[i].style.display = (d[i].id == div2) ? 'block' : 'none';
}
}
I have a parent div and 2 child divs (child-left and child-right). child-right div will contain 1 or 2 icons depending on dynamic page requirement. The child-left div contains the title and also used as a handle to drag operation. I do not want to set a width px or % (like the 90% I have below). How do I set the child-left div to take the rest of available space after what is occupied by child-right.
<div id="parent">
<div id="child-left" style="width:90%">
This is my title
</div>
<div id="child-right">
<i class="fa fa-cog"></i>
</div>
</div>
Thanks!
The following should help you:
HTML:
<div id="parent">
<div id="child-right">Hey</div>
<div id="child-left">This is my title</div>
</div>
CSS:
#child-left {
border: 3px solid gray;
background-color:blue;
margin-left:0px;
overflow:hidden;
}
#child-right {
float:right;
border-style:solid;
}
#parent {
overflow:hidden;
}
DEMO JSFiddle
I've been looking around for a while but I'm afraid I'm too begginer for this easy jquery.
I´ve tried show/hide and toggle functions but I don´t find the way to show toggle elements in a page hidding the others. The toggle works, but when I click one I'd like the others to be hidden and I don't find the way. Maybe It's too easy, but I can't find the answer.
This is my jquery
function toggleDiv(divId) { $("#"+divId).toggle();}
And this is the html sample
Toggle Button 1
<div id="div1">
<p>paragraph 1</p>
</div>
Toggle Button 1
<div id="div2">
<p>paragraph 2</p>
</div>
I´ve just created a fiddle that explains better what I mean: http://jsfiddle.net/vKLNe/
Thanks in advance for your help and sorry about my english.
You need to add class="toggle" to all the divs that toggle and then
http://jsfiddle.net/vKLNe/5/
function toggleDiv(divId) {
$("#"+divId).toggle();
$('.toggle').not($("#"+divId)).hide();
}
Shoot someone beat me to it... but yeah you can use toggle or show because you are manipulating multiple divs before you show the current clicked div...
function toggleDiv(divId) {
$('div').hide();
$("#"+divId).toggle();
}
The only downfall is that if you decide to have different divs doing different things, it could cause issues with them.
Although there are ways to do that on your own like Freddy's and Adam's, you can always rely on some kind of pre-defined accordion like jquery ui's
http://jqueryui.com/accordion/
Or bootstrap's collapse
http://getbootstrap.com/javascript/#collapse
And you wouldn't have to worry about handling the events yourself
You can do this by css classes.
Demo : http://jsfiddle.net/vKLNe/4/
Use hide and show classes
and only one div at a time will have show class.
html:
Toggle Button 1
<div class="hide" id="div1" style="background-color: #aaa; padding: 5px 10px; width:200px;">
<p>paragraph 1</p>
</div>
<br /><br />
Toggle Button 2
<div class="hide" id="div2" style="background-color: #aaa; padding: 5px 10px; width:200px;">
<p>paragraph 2</p>
</div>
<br /><br />
Toggle Button 3
<div class="hide" id="div3" style="background-color: #aaa; padding: 5px 10px; width:200px;">
<p>paragraph 3</p>
</div>
Jquery:
function toggleDiv(divId) {
$(".show").addClass('hide').removeClass('show');
$("#"+divId).addClass('show').removeClass('hide');
}
css:
.hide {
display: none;
}
.show {
display: block;
}
It is MUCH more practical to use event listeners compared to inline JS:
jQuery in
$(document).ready(function(){
// listen for clicking of the <a>
$('a').on('click', function(e){
// don't let the <a> perform it's default action
e.preventDefault();
// hide all divs
$('div').hide();
// show the <div> which is after the <a> which you clicked
$(this).next('div').show();
});
});
HTML
<!-- notice the <a> tags have an href="#", no more inline JS! -->
Toggle Button 1
<div id="div1" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;">
<p>paragraph 1</p>
</div>
<br />
<br />
Toggle Button 2
<div id="div2" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;">
<p>paragraph 2</p>
</div>
<br />
<br />
Toggle Button 3
<div id="div3" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;">
<p>paragraph 3</p>
</div>
Please not that this code ONLY works because you are not doing any animations such as fading or sliding. .hide() and .show() merely change the CSS the moment they are called upon where as .fadeIn() will alter the CSS potentially thousands of times over a specified period of milliseconds.
http://jsfiddle.net/vKLNe/8/
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