Develop Reference

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")
});

Correct approach for duplicating html elements for zoom to full-screen

I have a page that looks like this...
<body>
<div id="detailDiv1" style="height 100px; overflow:auto">
</div>
<div id="detailDiv2" style="height 100px; overflow:auto">
</div>
<div id="detailDiv3" style="height 100px; overflow:auto">
</div>
<div id="detailDiv4" style="height 100px; overflow:auto">
</div>
</body>
Each of the detailDivs are loaded dynamically with rows of content (often lots of rows, causing a vertical scroll bar to appear inside the detailDivs). Each row inside each detailDiv contains a small image, some text, and a couple of buttons that increment counts in the DB that are then dynamically updated (ajax) on the row itself.
Since each of these detailDivs is so small, I'm trying to implement a "view as full screen" option but am struggling to come up with an elegant plan...
I know that I'm going to use a bootstrap modal to present the full-screen version of each detailDiv, and I'm guessing I need to duplicate the html from each detailDiv - something like...
$('#myFullScreenModal').html($('#detailDiv1').html());
That will load the content correctly, but of course the elements will have the exact same names (and therefore the interaction with the DB will be interfered with unless I empty the original container first, and reload it when the modal is closed).
But those options sound pretty hacky to me, and so I'm wondering whether there's a more standard way of achieving this effect without having to duplicate large chunks of html.
Thanks for any thoughts.

You could use position: fixed on the div in question then expand it out. That way you don't have to copy anything at all, you're just displaying that exact element as "fullscreen".
$('.go-fullscreen').click(function() {
var $parent = $(this).parent();
if ($parent.hasClass('fullscreen')) {
$parent.removeClass('fullscreen');
} else {
$parent.addClass('fullscreen');
}
});
html, body {
width: 100%;
height: 100%;
}
div {
height: 100px;
overflow: auto;
}
.red { background-color: #F00; }
.green { background-color: #0F0; }
.blue { background-color: #00F; }
div.fullscreen {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<button class="go-fullscreen">Fullscreen</button>
</div>
<div class="blue">
<p>10</p>
<p>20</p>
<p>30</p>
<p>40</p>
<p>50</p>
<p>60</p>
<p>70</p>
<p>80</p>
<button class="go-fullscreen">Fullscreen</button>
</div>
<div class="green">
<p>100</p>
<p>200</p>
<p>300</p>
<p>400</p>
<p>500</p>
<p>600</p>
<p>700</p>
<p>800</p>
<button class="go-fullscreen">Fullscreen</button>
</div>

You can do this which will make it enlarge to a size you can configure :)
There is a css part and a jquery part. You could do this for them all. Of course change the scale to the desired size. Maybe not a full page takeover though will do a similar job. Hope you find it useful.
CSS
.transition {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
Jquery
$(function(){
$('.detailDiv1')
.on('mouseover', function() {
$('.detailDiv1').addClass('transition')
})
.on('mouseout', function() {
$('.detailDiv1').removeClass('transition');
});
});

Stack of slides continuously growing

Let us say I want to design a website with four slides. I would like each slide to cover the previous one while the visitor is scrolling. Following is an attempt with stellar.js (a jquery plugin): http://jsfiddle.net/8mxugjqe/. You can see that it works for the first slide, which gets covered by the second one, but I could not have it work for the others.
HTML:
<body>
<div id="one" data-stellar-ratio=".2">
<p>This is the first div.</p>
</div>
<div id="two" data-stellar-ratio="1">
<p>This is the second one.</p>
</div>
<div id="three">
<p>Third one!</p>
</div>
<div id="four">
<p>Fourth and last.</p>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
#one, #two, #three, #four {
position: absolute;
height: 100%;
width: 100%;
font-size: 5em;
}
p {
margin: 1em;
width: 60%;
}
#one {
background: red;
}
#two {
background: blue;
top: 100%;
}
#three {
background: green;
top: 200%;
}
#four {
background: yellow;
top: 300%;
}

I was able to throw something together using just jQuery and no other libraries. It relies on relative positioning. Basically, everything scrolls normally until one of the slides reaches the top of the browser window. Once it tries to scroll past the top of the browser window, I add an offset to the slide's vertical position to keep it from moving up any further. When scrolling back the other way, I simply subtract from this offset until it hits 0 at which point it begins to scroll normally again.
I'm sure the code can be cleaned up but I added a ton of comments so hopefully it's readable. If you have any questions or you would like me to modify it to better suit your needs, let me know. Here's a fiddle with the solution I came up with:
http://jsfiddle.net/jwnace/jhxfe2gg/
You can also see a full page demo of the same code here:
http://joenace.com/slides/

Toggle display:none with div in front of another div?

I'm trying to make a div that I have on top of another div show up when you click on something.
This is the code for the two divs, without all the stuff that's within each:
<div id="randomarticle_enlarge">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
<div class="bodybag">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
Then I have css for each, of course:
.bodybag {
width:960px;
}
#randomarticle_englarge {
height:750px;
width:960px;
position:absolute;
z-index:2;
margin-top:1px;
padding-left:20px;
padding-right:20px;
display: none;
}
Am I supposed to have the bodybag class have a z-index and a position:relative? Because even though I don't it's working (at this point).
Anyway, I have this script written that's doing exactly what I want it to do:
$(document).ready(function() {
$('.popular').click(function() {
$('#textmask').fadeTo( 'fast', 0.1);
$('#backgroundmask').css('background-color', 'white');
});
});
And all I want to happen next is that as the textmask and the backgroundmask fade in/change as they should and do, is for the randomarticle_enlarge div to show up.
I've tried using .toggle and .toggleClass and .slideToggle and .show but nothing is working.

Absolute positioning must be relative to a container. In order to absolutely position something you need to indicate what it's absolutely positioned to. Something along these lines.
<div id="randomarticle_englargeContainer">
<div id="randomarticle_englarge">
</div>
<div class="bodybag">
</div>
</div>
#randomarticle_englargeContainer {
position: relative;
}
.bodybag {
position: absolute;
left: 0;
top: 0;
}

When copying everything from above I have no issues using $('#randomarticle_englarge').toggle();. Check your browser's console for errors; you might find the answers there.

I'm not exactly sure about what would you like to do with the divs, but I created an example for you, maybe this is what you want:
LIVE DEMO
So there is two divs. The 2nd div covers the 1st one. Clicking on a 'button' hides the 2nd div, so the 1st one reveals. Clicking again the 'button', the 2nd div appears and covers the 1st one again.
HTML:
<div class="popular">Click me!</div>
<div class="container">
<div id="randomarticle_enlarge">
<h1>A</h1>
<h4>B</h4>
<p>C</p>
<p>D</p>
</div>
<div class="bodybag">
<h1>E</h1>
<h4>F</h4>
<p>G</p>
<p>H</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.bodybag {
width: 100px;
height: 200px;
background-color: red;
}
#randomarticle_enlarge {
width: 100px;
height: 200px;
background-color: green;
position: absolute;
top: 0;
left: 0;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.popular').click(function() {
$('#randomarticle_enlarge').toggleClass('hide');
});
});