duplicating divs when reordering divs - javascript

Im trying to figure out the easiest way to re order some divs on a project im working on. I created this simple test: http://jsfiddle.net/Tt6uN/254/
$('.container > div').each(function() {
$(".green").insertBefore(".red");
});
div {
height: 100px;
width: 100px;
marign: 10px 0;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="red"></div>
<div class="green"></div>
<div class="green"></div>
</div>
As you can see there are 3 div elements in the code. Why is a fourth getting generated in the output? Also does anybody have a solution to my re ordering div problem. Regardless of where the red div is in the markup. it should always be after the green div

Related

Click on an element to let the elements after it slide forward

I'm practicing and trying to make an instagram page.
Now the layout is all done but i have some problems with javascript.
How do i make the effect like instagram as the gif below?
I make the css display: none, when the element is clicked.
But i'm not sure how to make the elements after it slide forward.
Please refer to the gif below.
I idea was:
When an element is clicked, wrap the elements after it, and then change the wrap css position.
I used jquery wrap(), but it didn't work as i wanted.
for example, the original code is like this
<div class="box">111</div>
<div class="box">222</div>
<div class="box">333</div>
<div class="box">444</div>
<div class="box">555</div>
I used
$(".box").click(function () {
$(this).nextAll().wrap('<div class="wrap"></div>');
});
if i click 222, the result would be
<div class="box">111</div>
<div class="box">222</div>
<div class="wrap">
<div class="box">333</div>
</div>
<div class="wrap">
<div class="box">444</div>
</div>
<div class="wrap">
<div class="box">555</div>
</div>
but i want it to be like this
<div class="box">111</div>
<div class="box">222</div>
<div class="wrap">
<div class="box">333</div>
<div class="box">444</div>
<div class="box">555</div>
</div>
How do i wrap all these element together, instead of giving a wrap to each?
Or is there any better way to make this effect?
I know that a part of your question has already been answered by #charlietfl, so this here is just about the animation. This here is just one way to do it and there are a lot of others to do so.
An example code is available below.
So how does it work?
Apply a wrapper to the box to get a simple element to animate (yes you could also just animate the box with margin and without the wrapper. The wrapper is just for making an easy padding animation.)
If the .close span is clicked, the wrapper is set to the following CSS:
width: 0;
opacity: 0;
padding-left: 0;
padding-right: 0;
Because the wrapper has
transition: 0.5s;
it will slide nicely to the left. (transition applies to width, opacity and padding in this case)
And maybe think about doing something with the z-index (opacity animation is a bit ugly in the front of other elements).
I hope i could help anyone - Have a nice day!
$(".close").click(function(){
var el = $(this).closest(".box_wrapper");
el.css("width", 0);
el.css("opacity", 0);
el.css("padding-left", 0);
el.css("padding-right", 0);
setTimeout(function() {
el.remove();
}, 500);
});
.box_wrapper {
float: left;
transition: 0.5s;
width: 100px;
height: 200px;
padding: 15px;
}
.box {
background-color: lightgrey;
width: 100px;
height: 100%;
padding: 10px;
}
.close {
float: right;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box_wrapper">
<div class="box"><span class="close">X</span>1</div>
</div>
<div class="box_wrapper">
<div class="box"><span class="close">X</span>2</div>
</div>
<div class="box_wrapper">
<div class="box"><span class="close">X</span>3</div>
</div>
<div class="box_wrapper">
<div class="box"><span class="close">X</span>4</div>
</div>
And yes, this code is not perfect. There are some things to improve like the padding on .box_wrapper & .box, the opacity animation and the js. (can be simplified by a lot)

Hover on two elements using jQuery

I have two <div> elements attached to each other, I mean there is no space between them.
<div id="box1">1</div>
<div id="box2">2</div>
And I have this jQuery code:
$('#box1 , #box2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
My problem is when I move the mouse between box1 and box2, I still get on console log "Not".
I want those divs to be considered as one element so when I move the mouse between them I don't get on console log "Not".
Thanks in advance!
I want those divs to be considered as one element
Well, quite simply, they aren't. And they can't be. That's not how HTML and CSS works.
The hover event is triggered one for each individual element bound to the event handler. And every time you leave one of those elements it will print the "not" output as per your instructions.
There is no "fix" for this in the exact way you described, but there are alternative approaches. An obvious solution is to wrap them both in an outer div and bind the hover event to that instead. Then the whole area will be considered as one element (because it literally is). Demo:
$('#boxcontainer').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
#boxcontainer {
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxcontainer">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
friend check the code below. I think it will work for you. As you have dai you have an absolute position div you must need a parent div and the parent div position must be relative. For doing that you have to add just a simple CSS code position: relative;. You also need to do some changes to your jquery code. You can just hover on the parent div and it will do your work. Hope this code will help you.
//Box 1 Demo
$('#boxParrent1').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
//Box 2 Demo
$('#boxParrent2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
/*Main Code that are needed*/
#boxParrent1, #boxParrent2 {
position: relative;
}
/*Codes Just used to give you a demo*/
#boxParrent1, #boxParrent2{
display: flex;
margin-bottom: 50px;
border: 1px solid #000;
}
#boxParrent1{
width: 200px;
}
#boxParrent2{
width: 210px;
}
#box1, #box2, #box3, #box4{
background: tomato;
width: 100px;
height: 100px;
display: grid;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: 50px;
color: #fff;
cursor: pointer;
}
#box2, #box4{
position:absolute;
top: 0;
left:100px;
background: #02dce6;
}
#box4{
left:110px;
background: #02dce6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxParrent1">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
<div id="boxParrent2">
<div id="box3">3</div>
<div id="box4">4</div>
</div>
Try to place your 2 div's in one super div
<div id="super">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
$('#super').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});

Scroll Down div when click on element

I've seen some custom Scrollbard but don't work for what I need...
I have a div element with dynamic text, sometimes there is lots of text so scroll bars shows up, I wonder if is possible to overflow: hidden; and have an image (arrow pointing down) that when clicked, the div will scroll down normally like when using the browsers scrollbar.
I have seen lots of this: https://grsmto.github.io/simplebar, all have scroll bars on the side, none has what I want.
Here it is (only the basics):
function scrollDown() {
var cuttentOffsetTop = $('#inner').offset().top
$('#inner').offset({top: (cuttentOffsetTop - 10)})
}
#container {
width: 100%;
height: 300px;
background-color: gray;
overflow-y: hidden;
position: relative;
}
.item {
width: 100%;
height: 100px;
background-color: violet;
}
.item + .item {
margin-top: 10px;
}
#scroll-down {
background-color: forestgreen;
color: white;
margin-bottom: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll-down" onclick="scrollDown()">Click here to scroll down</div>
<div id="container">
<div id="inner">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
If you need an explanation - just ask.
Have you actually attempted to create this? Provide code that you have attempted so that we may edit that, as opposed to writing the whole thing for you. You didn't make it entirely clear if you wanted to jump down to a position, slowly scroll down while the button is held down, or what exactly so I'll provide a few different types.
window.scrollTo(0, 100);
If you know how far down you want to jump, you could use this. Alternately, using HTML you can do the following to jump to a specific part of a page.
Jump to element with id jumpLocation
You just have to google it better. Look at element.scrollTop method, more here. And a thread from stackoverflow..

Trying to make container div change height on click

I am trying to make a container div change set height on click, but am having trouble getting it to work. I am not sure where I messed up and would love input as I am pretty new to Javascript.
$(function() {
$('#menu').click(function() {
$(".outer").css('height','600px ');
});
});
Here is a JS fiddle: https://jsfiddle.net/r92cc51d/2/
If you are just looking to increase the height on click then you don't need to do it in JS. You can do it in html also.
<div id="outer">
<div id="menu" onClick = "document.getElementById('outer').style.height = '600px';">
</div>
</div>
You're missing closing parenthesis for your click function:
$('#menu').on('click', function() {
$('.outer').css('height', '400px');
});
.outer {
width: 200px;
height: 200px;
background-color: #111111;
}
#menu {
height: 20px;
width: 20px;
background-color: #666666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div id="menu">
</div>
</div>

How would I implement stacking properties to draggable objects in jquery ui

How would I implement stacking properties to draggable divs in JQuery UI?
I you do not understand what exactly I am talking about, check this out: http://qtip2.com/demos#section-stacking
As you can see, in the link above, as you hover over the "tips", the respective tip will go to the top(which looks much like incresing the z-index).
How would I do this if I had 3 divs which are draggable?
Dumie example:
$(function() {
$(".draggable").draggable();
});
.draggable {
width: 150px;
height:100px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: yellow;
}
#div3 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="div1" class="draggable">I am draggable</div>
<div id="div2" class="draggable">I am draggable too!</div>
<div id="div3" class="draggable">Don't forget about me!</div>
When I click any of the divs, I want them to come to the front(or do something like increasing the z-index).
Now I do not have any idea of how to do this, please do help and comment! :)
JQuery UI draggable has an option called stack that can do what you need. Simply set the selector against which the elements need to stack (it doesn't have to be only other draggables), and it'll manage the z-index for you. Like this:
$(function() {
$(".draggable").draggable({
stack: '.draggable'
});
});
.draggable {
width: 150px;
height:100px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: yellow;
}
#div3 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="div1" class="draggable">I am draggable</div>
<div id="div2" class="draggable">I am draggable too!</div>
<div id="div3" class="draggable">Don't forget about me!</div>
http://api.jqueryui.com/draggable/#option-stack

Categories

Resources