I got 2 divs with the same class and I am trying to move each of the 2 divs into a different div.
setTimeout(function() {
$(".pac-container").prependTo("#gp-content");
}, 500);
.pac-container {
width: 50px;
height: 100px;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
#wrapper1,
#wrapper2 {
width: 25px;
height: 75px;
border: 1px dotted red;
padding: 5px;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pac-container"></div>
<div class="pac-container"></div>
<div id="wrapper1"></div>
<div id="wrapper2"></div>
My goal is now to move the first pac-container into #wrapper1 and the second pac-container into #wrapper2. The pac-container are sitting next to each other at the html-markup and each #wrapper sits on different positions at the html-markup.
Goal
<div id="wrapper1">
<div class="pac-container"></div>
</div>
<div id="wrapper2">
<div class="pac-container"></div>
</div>
You could do it by referencing the .pac-container elements explicitly by index using eq():
var $pac = $('.pac-container');
$pac.eq(0).prependTo('#wrapper1');
$pac.eq(1).prependTo('#wrapper2');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pac-container">PAC container 1</div>
<div class="pac-container">PAC container 2</div>
<div id="wrapper1">wrapper1 </div>
<div id="wrapper2">wrapper2</div>
However, this is not very DRY. You could instead use a common class on the wrapper elements, then relate them to the containers by index, something like this:
$('.pac-container').each(function(i) {
$(this).prependTo($('.wrapper').eq(i));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pac-container">PAC container 1</div>
<div class="pac-container">PAC container 2</div>
<div class="wrapper">wrapper1 </div>
<div class="wrapper">wrapper2</div>
You can iterate .pac-container and move then individually.
Here in example, I have added wrapper class to use common selector and use .eq() to target the element.
$('.pac-container').each(function(i){
$(this).appendTo($('.wrapper').eq(i))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pac-container">1</div>
<div class="pac-container">2</div>
<div class="wrapper" id="wrapper1"></div>
<div class="wrapper" id="wrapper2"></div>
To move an element use detach() and appendTo() Try this:
$(".pac-container").each(function(i){
$(this).detach().appendTo($(".wrapper").eq(i))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pac-container">pac-container1</div>
<div class="pac-container">pac-container2</div>
<div class="wrapper">wrapper1</div>
<div class="wrapper">wrapper2</div>
Related
I am trying to create UI where on click tiles [sub-divs] move from one parent div to another parent div. I have created a pen to explain the question.The pen is working fine but now I need to know how to show them moving, animation. I want them to fly one by one on click. I used greensock.js before but I don't have any idea how to use it in this case, or can I use it here?
$(".mybox").on('click', function() {
$(this).css('background', 'red');
$(this).detach();
$(this).appendTo("#two");
var p = $("#two");
var position = p.position();
TweenLite.to(this, 0.5, {x:position.left, y:position.right});
});
#one {
width: 200px;
height: 200px;
float: left;
background: rgba(255,40,100,0.5);;
}
#two {
margin-left: 300px;
width: 200px;
height: 200px;
background: rgba(0,240,10,0.5);
}
.mybox {
float:left;
width: 50px;
height: 50px;
background: rgb(255,0,0);
margin: auto auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<div id="content" class="mybox">
1
</div>
<div id="content" class="mybox">
2
</div>
<div id="content" class="mybox">
3
</div>
<div id="content" class="mybox">
4
</div>
<div id="content" class="mybox">
5
</div>
</div>
<div id="two">
</div>
I have 5 div elements, all with class='item'.
Im catching them with: var x = document.getElementsByClassName("item");
Now I want to make disappear that div, which was mouseovered.
https://jsfiddle.net/LqsLbrco/1/
But it doesn't work as it supposed to do. Because all elements are disappearing, not only this which was hovered.
Edit: My point is that the modal div appear (the pink box) when the item div is hovered. Check out the new jsfiddle: https://jsfiddle.net/LqsLbrco/10/
There's a div behind the blue boxes, I want him to appear when the user hovers the blue box.
If you do it in jQuery, you could just do this.
Modified the markup to accommodate the requirements.
$(function() {
$(".container .item").bind("mouseover", function(event) {
$(event.target).find(".modal").show();
});
$(".container .modal").bind("mouseleave", function(event) {
$(event.target).hide();
})
});
.item {
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
margin: 5px;
}
.container {
display: inline-block;
}
.modal {
height: 100px;
width: 100px;
background-color: pink;
display: inline-block;
margin: 0px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
I know it's not possible with css, but I was trying to find some jQuery solution, so far no luck with answers on stack.
Anyway, the HTML order looks like this, and it needs to stay like this:
<div class="wrapper">
<div style="position:relative;">
<div style="position:relative;">
<div class="dont-want-parents" style="position:absolute;">
</div>
</div>
</div>
</div>
So the question is how to position div with class "dont-want-parents" to the right-bottom of the wrapper div, ignoring all the relative positioned parents.
Thanks to everyone who tried to help, eventually I figured out a solution:
$(window).on("load resize",function(e){
var parentoffset = $('.dont-want-parents').parent();
var elwidth = $('.dont-want-parents').width();
var offset = parentoffset.offset();
$('.dont-want-parents').css('right', -offset.left + elwidth);
});
here's a working fiddle
You can set them all back to static so that the one with absolute ignores them. Also, top and left are needed, as position:absolute only removes the element from the layout but not from its original position.
$('.wrapper > div, .wrapper > div > div').css('position', 'static');
div{
padding: 50px;
background: rgba(255, 0, 0, 0.5);
}
.wrapper{
position: relative;
background: green;
}
.dont-want-parents{
background: blue;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div style="position:relative;">
<div style="position:relative;">
<div class="dont-want-parents" style="position:absolute;">
</div>
</div>
</div>
</div>
Another way is to just yank out the element from wherever it is and put it somewhere that is safe to be absolute.
$('.dont-want-parents').appendTo('.wrapper');
div{
padding: 50px;
background: rgba(255, 0, 0, 0.5);
}
.wrapper{
position: relative;
background: green;
}
.dont-want-parents{
background: blue;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div style="position:relative;">
<div style="position:relative;">
<div class="dont-want-parents" style="position:absolute;">
</div>
</div>
</div>
</div>
Note: I am unable to edit the HTML, so I have to find a workaround.
HTML:
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">...</div>
<div id="rightColWrapper" class="rightColumn663Wrapper">...</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
The issue is that all of the divs inside #container, EXCEPT for #leftColWrapper and #rightColWrapper, need to be 100% width of #container, but #leftColWrapper and #rightColWrapper need to be stacked next to each other and centered (together) within the 100% #container, with a max-width of 1224px.
I tried utilizing the following jQuery to add a wrapper div around #left... and #right..., but it ended up grabbing the ads in those containers and placing them in the component where the JS for the page is stored.
(function($) {
$("#leftColWrapper, #rightColWrapper").wrapAll("<div class=\"colWrapper\" />");
})(jQuery);
I either need another solution to wrap those two divs together, so that I can set a max-width of 1224px and center them, or I need to know why this jQuery is picking up those ads and duplicating them within the JS component.
#container{
text-align: center;
font-size: 0;
}
#container > div{
outline: 1px solid #333;
display: inline-block;
min-height: 10px;
text-align: left;
width: 100%;
font-size: 14px;
}
#container #leftColWrapper, #container #rightColWrapper{
width: 50%;
max-width: 612px;
}
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">width: 50%;<br>
max-width: 612px;</div><div id="rightColWrapper" class="rightColumn663Wrapper">width: 50%;<br>
max-width: 612px;</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
I want click on each button to view information in each posts but it view all when I click on it.
Here is my example. I have HTML like:
<div class='list post'>
<div class='post'>
<div class='btn'>btn</div>
<div class='hidden'>Hidden Info 1</div>
</div>
<div class='post'>
<div class='btn'>btn</div>
<div class='hidden'>Hidden Info 2</div>
</div>
<div class='post'>
<div class='btn'>btn</div>
<div class='hidden'>Hidden Info 3</div>
</div>
</div>
and I use onclick like:
$('.btn').click(function(){
$('.hidden').css({"visibility":"visible"});
});
But it is not working. I want to use toggle or something like that but I donot know how to do.
Please check jsfiddle here
You can use $(this) to target current clicked .btn button along with .next() to target next immediate sibling of clicked button which is .hidden div:
$('.btn').click(function(){
$('.hidden').css({"visibility":"hidden"});
$(this).next().css({"visibility":"visible"});
});
Updated Fiddle
Try this
$('.btn').click(function(){
$(this).next('.hidden').css({"visibility":"visible"});
});
Try this:
$('.btn').click(function(){
$('.hidden').css({"visibility":"hidden"});
$(this).next().css({"visibility":"visible"});
});
You can also check it here: http://jsfiddle.net/X2kW4/7/
I prefer not to change the the visibility property. Instead add/remove visibility class (Fiddle):
CSS
.post {
height: 100px;
width: 100px;
background: #cd4900;
margin-bottom: 6px;
color: #fff;
text-align: center;
}
.post .btn {
margin-top: 5px !important;
width: 80%;
padding: 5px;
background: green;
margin: 0 auto;
text-align: center;
border-radius: 4px;
cursor: pointer
}
.visible {
visibility: visible !important;
}
.info {
visibility: hidden;
}
JavaScript:
$('.btn').click(function(){
if($(this).next('.info').hasClass('visible') === false)
{
$('.visible').removeClass('visible');
$(this).next('.info').addClass('visible');
}
});
HTML:
<div class='list post'>
<div class='post'>
<div class='btn'>btn</div>
<div class='info'>Hidden Info 1</div>
</div>
<div class='post'>
<div class='btn'>btn</div>
<div class='info'>Hidden Info 2</div>
</div>
<div class='post'>
<div class='btn'>btn</div>
<div class='info'>Hidden Info 3</div>
</div>
</div>