We Keep Coding

Slide up div from another divs top when page loads

So I have 2 div as shown in below code.
What I just want is to slide up the second div (box-2) from the top of the first div.
The real problem is
First div will remain as it is and second div will slide from it's back side.
I want to keep the second div hidden and let it slide and revel it self as it slides i.e. only the portion that slides up should be visible.
Not sure how to do it, tried multiple options but no luck.
Really appreciate if anyone can guide.
$('.box-2').animate({'margin-bottom': '83px'}, 3000);
.box-1 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
.box-2 {
height: 30px;
width: 500px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-1">div 1</div>
<div class="box-2">div 2 - the one that will slide up from box-1's Top.</div>

The easiest way, considering your starting point, is to simply use the callback function exposed inside of the animate() method, which will be executed once the initial animation is completed:
// your initial jQuery, which selects the '.box-2' element(s) and
// passes that collection to the animate() method:
$('.box-2').animate({
// here rather than quote (just to show the example), we camel case
// the CSS 'margin-bottom' property to the (unquoted) 'marginBottom',
// and pass in the new dimension to which the method will animate:
marginBottom: '83px'
// we then take advantage of the completion callback, which is called
// when the first animation is complete:
}, 1500, function() {
// here we take the 'this' from the collection passed to the outer
// animate() call in which this callback function is wrapped:
$(this).animate({
// here we then animate the 'width' to its new dimension of
// '500px':
width: '500px'
}, 1500);
});
.box-1 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
.box-2 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-2">Div that will slide up from box-1's Top.</div>
<div class="box-1">Static div</div>
Note that, because of the two animations running sequentially I divided your initial time of 3000ms to have each animation take 1500ms, so that the overall time taken is the same but allowing the animation to run in stages.
References:
animate().

I'm not quite sure I understand your question completely.
But if you want to reveal the box-2 from behind box-1, don't you just have to switch their positions in the html? So that box-1 is always in front of box-2
$('.box-2').animate({'margin-bottom': '83px'}, 3000);
.box-1 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
.box-2 {
height: 30px;
width: 500px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-2">Div that will slide up from box-1's Top.</div>
<div class="box-1">Static div</div>

Use z-index:1; on css of .box-1
$('.box-2').animate({'margin-bottom': '83px'}, 3000);
.box-1 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
z-index:1;
}
.box-2 {
height: 30px;
width: 500px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-1">div 1</div>
<div class="box-2">div 2 - the one that will slide up from box-1's Top.</div>

The $( ".box-2" ).hide(0); method is used to hide the second container after the animation. z-index: -1; style applied to make the box-2 container appear at the bottom during animation.
$(document).ready(function() {
/* The animation moves the second container from the bottom to a height of 83px. */
$('.box-2').animate({'margin-bottom': '83px'}, 3000, function(){
/* The first container appears when the animation is finished. */
$( ".box-1" ).css("display", "inline");
/* The second container is stored after the animation. */
$( ".box-2" ).hide(0);
});
});
.box-1 {
height: 30px;
width: 100px;
background-color: red;
color: white;
position: fixed;
bottom: 0px;
/* The first container is initially hidden. */
display: none;
}
.box-2 {
height: 30px;
width: 500px;
background-color: blue;
color: white;
position: absolute;
bottom: 0px;
/* Implemented to make the container appear at the bottom during animation. */
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-1">Static div</div>
<div class="box-2">Div that will slide up from box-1's Top.</div>
References
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Is there a way to apply CSS-transform to an element which is inside an element that is being CSS-transformed on mousemove?

Basically I have a parallax scene using parallax.js library.
Inside the scene I have a couple of divs with unique parallax settings data tags.
And inside one of these divs I have an element which I want apply tilt effect to(when its getting mouseover'ed). But it doesnt work, the transformations from tilt lib arent being applied if an element is inside the scene however it works if I move it out of the parallax scene.
I think the problem lies somewhere around the management of OnMouseMove events or maybe it cannot work that way(when transform is being applied to an already transformed element's child).
Chrome EventListeners tab shows that both parallax and tilt mousemove listeners exist.
I would appreciate any help. If you need any code snippets I can provide it, since right now I actually don't know what particular parts to show and dont want to copy paste the whole libs.
UPD.
here's a snippet of what im trying to do:
$(document).ready(function() {
var scene = $('.prlx-scene').get(0);
var parallaxInstance = new Parallax(scene, {
relativeInput: true,
invertX: false,
invertY: false
});
});
.fulld,
.prlx-scene {
position: relative;
height: 100%
}
.prlx-scene {
width: 80%;
margin-right: auto;
margin-left: auto
}
.fulld {
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 12;
display: block;
width: 100%;
background-color: #000fff;
background-position: 50% 50%;
background-size: cover
}
.platonic-left-front-img {
position: absolute;
display: block;
}
.platonic-left-front {
z-index: 40;
}
.platonic-left-front-img {
left: 20%;
max-width: 100%;
max-height: 100%;
width: 50%;
top: 40%
}
.pc-text1 {
top: 50%;
left: 10%;
display: block;
position: fixed;
width: 15%;
height: 15%;
background-color: #00ffff;
}
.pc-text {
top: 50%;
left: 30%;
display: block;
position: fixed;
width: 15%;
height: 15%;
background-color: #00ffff;
}
img {
max-width: 100%;
vertical-align: middle
}
.scene-block {
width: 100%;
top: 0;
left: 0;
right: 0;
height: 100%;
bottom: 0;
margin-top: 0
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
</head>
<body style="height:100%;position:absolute;width:100%;">
<div class="pc-text1" data-tilt data-tilt-max="40" data-tilt-speed="200" data-tilt-perspective="500" data-tilt-reverse="true" style="z-index:9999;transform-style: preserve-3d;">
<p style="transform: translateZ(50px);">TEXT</p>
</div>
<div class="fulld">
<div class="prlx-scene">
<div class="scene-block" data-depth="0.8"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="platonic-left-front-img"></div>
<div class="scene-block" data-depth="0.85">
<div class="pc-text" data-tilt data-tilt-max="90" data-tilt-speed="400" data-tilt-perspective="500" data-tilt-reverse="true" style="transform-style: preserve-3d;">
<p style="transform: translateZ(50px);">TEXT</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt#1.6.1/lib/vanilla-tilt.min.js"></script>
</body>

Found out that parallax scene disables pointer events.
So in order for that to work I needed to add style="pointer-events: all;" to an element that is being tilted.

hidden footer gradually appears on scroll

I am trying to make this effect on a project
http://www.cera-groupecera.com/en/
like this page the footer is hidden and appears as you scroll.
The page is wrapped in a page-content element and the footer is fixed to the bottom z-indexed 0
what happens is as you reach the end of the window the page -content margin rises as you scroll.
I can't really find a way to do it with j query

Here is an example,you just position it on the bottom of the page or in any other place you want it to stay,to hide it you can use z-index=-1;
//<br><br><br><br><br><br><br><br><br>
<h2><code>fixed</code></h2>
<div class="fixed"><div class="expand"></div></div>
<br><br><br><br><br><br><br><br>
CSS
#import "compass/css3";
h2 {
text-align: center;
margin-top: 48px;
}
div {
height: 200px;
width: 50%;
max-width: 600px;
margin: 32px auto;
overflow-x: hidden;
// overflow-y: scroll;
}
.fixed {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: fixed;
overflow: hidden;
}
.expand {
height: 400px;
width: 100%;
}
https://jsfiddle.net/cu01m218/

I did one example for you.
$(function(){
calcFooter();
function calcFooter () {
var footer = $('.footer').height();
var mainContent = $('.main-content');
mainContent.css('margin-bottom', footer);
}
$(window).resize(calcFooter);
});
body {
margin: 0;
}
.main-content {
position: relative;
z-index: 100;
height: 100vh;
background-color: grey;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
height: 200px;
width: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<div class="main-content" style="margin-bottom: 200px;">
<h1>This is main content.</h1>
<p>Scroll down to reveal footer!</p>
</div>
<div class="footer">
<p>This footer.</p>
</div>
</div>

Let's say that this element which appears at the bottom is footer tag.
In this case it will be something like this:
html:
<footer></footer>
in your css:
footer {
position: fixed;
bottom: 0;
display: none;
}
Then you have to add a class which will make footer appear
.active {
display: block;
}
and your jquery will be something like this:
$(window).on('scroll', function () {
if ($(this).scrollTop() > 50) {
if (!$(footer).hasClass('active')) {
$(footer).addClass('active');
}
} else {
if ($(footer).hasClass('active')) {
$(footer).removeClass('active');
}
}
});

Body Background Image Clickable

I searched for hours trying to find a solution for creating a body background image clickable.
I managed to find some similar questions/answers here on stackoverflow but I don't know how to apply them.
So far I think that the code below might help but I cannot seem to understand how to use it on my website.
$('body').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
Can someone please explain how can I have this working on 007soccerpicks.com? I need the body background image clickable except for the <div id="container"> which is the content area of the website.
Thank you very much!

The script you have setup will click the entire document if wrapped inside the body element. One way to get around this is to use a fixed element in the background with the body logic in another wrapper.
<body>
<div class="body-clickable"></div>
<div class="main-content">
</div>
</body>
<style>
.body-clickable
{
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
background-image: url('image.png');
}
.main-content {
margin: 0 auto;
width: 1000px;
top: 0;
left: 0;
position: relative;
z-index: 2;
}
</style>
<script>
$('.body-clickable').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
</script>
You could also avoid using a script and actually just make the 'body-clickable' a link.

#box-link {
position: absolute;
top: 8px;
left: 20px;
width: 83px;
height: 83px;
background-color: transparent;
border: 1px solid yellow; }
.box1 {
position: relative;
margin: 20px 0 20px 40px;
padding: 5px 0; width: 300px;
height: 300px;
background-image: url('https://lh3.googleusercontent.com/-Y8Qx-xfqufE/VOIccUtbhpI/AAAAAAAABDI/x5lTXX_Zlrs/s2048/cool-and-stylish-girls-wallpapers-for-fb-cool-and-stylish-girls-with-guitar-6413-sadredheartlovequotesforfacebooktimelinecoverx.jpg');
background-repeat: no-repeat;
}
<body>
<div class="box1">
<a id="box-link" href="https://www.facebook.com/"></a>
<p>The background of this box is an image.</p>
</div>
</body>

Getting inline HTML/JavaScript popup to appear in the middle of screen regardless of resolution

I am using the following Javascript and CSS to create popups:
<script type="text/javascript">
Sys.debug = true;
var popup;
Sys.require(Sys.components.popup, function () {
popup = Sys.create.popup("#popup", {
parentElementID: "target",
});
});
var popup2;
Sys.require(Sys.components.popup, function () {
popup2 = Sys.create.popup("#popup2", {
parentElementID: "target",
});
});
</script>
#popup
{
width: 400px;
height: 250px;
overflow: scroll;
background-color: #EAFDB3;
border: solid 2px black;
}
#popup2
{
width: 400px;
height: 250px;
background-color: #EAFDB3;
border: solid 2px black;
}
The location these popups appear is done with:
<span id="target" style="position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;"></span>
The content of the popup goes between:
<div id="popup" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px">CONTENT </div>
How can I get this popup to popup in the middle of the screen regardless of resolution?

Set top to 50%, left to 50%. Then have a negative left margin that is half of the width of the popup, and a negative top margin that is half of the height of the popup. What you have seems to be close...
But margin-top should be -125px and margin-left should be -200px, given a popup that is 400x250 in size.

For dynamically-sized popups, consider wrapping your content in div.vc-outer and div.vc-inner.
CSS
.vc-outer {
display: table;
position: fixed;
width: 100%;
height: 100%; }
.vc-inner {
display: table-cell;
text-align: center;
vertical-align: middle; }
.popup {
display: inline-block; }
HTML
<div class="vc-outer"><div class="vc-inner">
<div class="popup">Hey!</div>
</div></div>

You are giving inline style(even same property) as well as using ID. I will suggest to do this only once and that to using ID.