We Keep Coding

Center div inside window scroll event

How can I center the div using the window scroll event? I am searching for this answer for a long time. Any help would be appreciated.
$(window).scroll(function() {
var offSetTop = $("#ifOne").offset().top;
var positionTop = $("#ifOne").position().top;
var windowHeight = $(window).height();
var scrollTop = $(window).scrollTop();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">Some Content</div>

A simple demo shows how to center the div:
$(window).scroll(function() {
var offSetTop = $("#div1").offset().top;
var positionTop = $("#div1").position().top;
var windowHeight = $(window).height();
var scrollTop = $(window).scrollTop();
var top = scrollTop + (windowHeight - $("#div").height())/2
$('#div1').css('top', top)
});
#container{
position: relative;
height: 200vh;
width: 100%;
}
#div1{
position: relative;
margin: 0 auto;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="div1">
Some Content
</div>
</div>

how to create a sliding menu which will fill the window width except by puller button width?

I am trying to create a sliding menu which will fill the window width minus the puller button width. I want the menu out of the window when web page load and there is a button which will go left when the page loads. When user clicks on the button the menu should come to window and button goes right.
I have created an animation video here which will show you what I want.
In the jsfiddle the menu just fades out, But I want the menu to slide from left to right when clicked on button with .puller class.
See the code at jsfiddle
Demo on jsfiddle
$(document).ready(function() {
var stickyNavTop = ($('.container')).offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.container').addClass('fixed');
} else {
$('.container').removeClass('fixed');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
}).resize(function() {
stickyNav();
}).load(function() {
stickyNav();
});
$(".dropdown").click(function() {
$(".dpitem").slideToggle(300);
});
var calcWidth = function() {
var pullerDimensions = $('.puller').width();
$('#cpcc,.dpitem').width($(window).width() - pullerDimensions);
}
$(document).ready(function() {
calcWidth();
});
$(window).resize(function() {
calcWidth();
}).load(function() {
calcWidth();
});
var cPcc = document.getElementById ("cpcc");
var cpHeight = function() {
var cpBtnHolder = $(cPcc).height();
$('.content').css("padding-top",cpBtnHolder);
}
setInterval(function() {
cpHeight();
calcPHeight();
pp();
}, 0)
var calcPHeight = function() {
var toolsDimensions = $('#cpcc').height();
$('.puller').height(toolsDimensions);
$('.puller').css("line-height",toolsDimensions +"px");
}
$(document).ready(function() {
calcPHeight();
});
$(window).resize(function() {
calcPHeight();
}).load(function() {
calcPHeight();
});
var Pwidth = $('#cpcc').width();
var PSpce = $(window).width()-Pwidth;
$(".puller").click(function() {
$(".container").toggle( function() {
$(".container").css({
transform: "translate3d("+"-"+Pwidth+"px, 0, 0)"
});
}, function () {
$(".container").css({
transform: "translate3d(-0, 0, 0)"
});
});
});
});

Calc is your friend. You can use that along with 'transition' to achieve the intended effect. Check out this simplified example.
http://codepen.io/anon/pen/gPBQOb
Good practice is to toggle a class which will override the position property in this case left. It should also toggle your chevron image to point left and right.
Your example is using a lot of js calculations and has to recalculate with window size changes. This example uses js only to toggle a css class on click and the rest in managed purely with css. Much simpler in my opinion.
HTML
<div class="maincontent"></div>
<div class="menu">
<div class="button"></div>
</div>
CSS
.maincontent{
background-color: green;
height: 2000px;
width: 100%;
}
.menu{
background-color: red;
width: 100%;
height: 200px;
position: fixed;
top: 0px;
left: 0px;
transition: left 1s;
}
.menu.collapse{
left: calc(-100% + 30px)
}
.button{
background-color: yellow;
height: 100%;
width: 30px;
position: absolute;
right: 0px;
}
JS
$('.button').click(
function(){
$('.menu').toggleClass('collapse')
})

div position fixed re-size behaviour

I have fixed menu on my site which works without any issue. I have a container(not bootstrap) which will be fixed when makes contact with the static menu. Everything is work as expected except when I re-size the window the container goes to sort of absolute position with 0 top. The style or anything does not mention this explicitly, as it still has position:fixed but what I see is this. I tried most of the questions related to this problem in stackoverflow and other resources but nothing gave me a satisfying answer. Any help? Thanks.
$.fn.extend({
scrollTabs: function() {
var pageTop = parseFloat($(window).scrollTop());
if (elementTop < pageTop + 66) {
$(this).css({
'position': 'fixed',
'top': '66px',
'left': '0',
'right': '0',
'z-index': '9999',
'background': '#ffffff',
'width': '100%',
'padding': '20px 0',
'margin-top': '0'
});
$(this).find('#product-tabs').css({
'max-width': '1300px',
'margin-left': 'auto',
'margin-right': 'auto'
});
} else {
$(this).css({
'position': 'initial',
'margin-top': '-' + elementHeight + 'px'
});
}
}
});
$(window).load(function() {
var scrollElement = $('.box-additional.box-tabs.grid12-12');
elementTop = parseFloat($(scrollElement).offset().top);
var overflowHeight = parseFloat($(window).height()) - 200;
$('.box-additional.box-tabs.grid12-12').attr('id', 'firstElement');
var scrollElement = $('#firstElement');
elementHeight = parseFloat($(scrollElement).outerHeight());
var newEle = $(scrollElement).after($(scrollElement).clone().attr('id', 'newElement'));
var newElement = $('#newElement');
$(scrollElement).css('visibility', 'hidden');
$(newElement).css('margin-top', '-' + elementHeight + 'px');
$(scrollElement).after(newElement);
$(window).scroll(function() {
$(newElement).scrollTabs();
});
});
$(window).resize(function() {
var scrollElement = $('#firstElement');
elementTop = parseFloat($(scrollElement).offset().top);
elementHeight = parseFloat($(scrollElement).outerHeight());
var newElement = $('#newElement');
$(newElement).css('margin-top', '-' + elementHeight + 'px');
$(window).scroll(function() {
$(newElement).scrollTabs();
});
});
.header-container {
background-color: #000;
position: fixed;
width: 100%;
z-index: 99999;
color: #fff;
}
.grid12-12 {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
font-size: 50px;
}
.page-content {
min-height: 1000px;
float: left;
font-size: 72px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container" id="top">
this is my menu
</div>
<div class="page-content">
this is my page content
<div>
<div class="box-additional box-tabs grid12-12">
this is my container
</div>

jQuery(newElement).css('margin-top', '-' + elementHeight + 'px');
to
jQuery(newElement).css('top', '-' + elementHeight + 'px');

Get the div position and add some pixel to some div - Jquery

I want to get the current top position of .top class div, then i have to add some 20px+.top into the .bottom inline style.
Ex: if .top has top:200px; the .bottom must be changed to top:220px;
funtion(){
var position = $('.top').offset();
$('.bottom').css(position)+20px;
}
.parent
{
position: relative;
}
.child
{
position: absolute;
}
.top
{
top: 100px;
right: 0px;
}
.bottom
{
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parent">
<div class="child top">Top</div>
<div class="child bottom">Bottom</div>
</div>

funtion(){
var position= $('.top').offset();
var top= position.top;
var left = position.left;
var newtop = top + 20 + "px";
var newleft = left + 20+ "px";
$('.bottom').css( {
'position': 'absolute', // if require
'left': newleft,
'top': newtop
});
}

This might do the work:
var topPosition = $('.top').offset().top;
$('.bottom').css('top',(topPosition+20)+'px');

You can use the following code snippet for this,
$( '.bottom' ).css( 'top', $('.top').css('top'));
$( '.bottom' ).css( 'top', '+=20px' );

jQuery to regular Javascript - overlay

I've used the following jQuery code to create somewhat of an overlay for my website..
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div><div id='my_popup'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
});
I'd like to produce the same results, with regular javascript, no jquery, how would I start/go about this?
Also the code I'm currently using results in the overlay being re-loaded on every page, where as it should only load on the main page or landing page. Can anyone suggest a fix for that?

Translating directly from jQuery to Vanilla:
(function() {
if (window.location.href.split('/').pop() == "yourlandingpage") {
var body = document.body,
html = document.documentElement,
docHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
body.innerHTML += "<div id='overlay'></div><div id='my_popup'></div>";
document.getElementById("overlay").style.height = docHeight + "px";
document.getElementById("overlay").className = "NewClass";
}
}());
And then declare CSS:
.NewClass {
opacity: 0.4;
position: absolute;
top: 0;
left: 0;
background-color: black;
width: 100%;
z-index: 5000;
}
JSFiddle Example

Here is pure javascript/CSS analog of your jQuery overlay:
var overlay = "<div id='overlay'></div><div id='my_popup'></div>";
document.body.insertAdjacentHTML('beforeend', overlay);
and CSS
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5000;
background-color: #000;
opacity: .4;
}
Note, that I cheated a little by using position: fixed instead of absolute, so that I don't need to set overlay height with document height, and can go with simple CSS.
Exmaple: http://jsfiddle.net/ajwmcbww/