We Keep Coding

Responsive popup once per day

This code is to display a pop up once per day. But I'm having trouble making it responsive, and it seems that it shows once a lifetime...
I put it in 3 different pages, and if it displays on one of them, it doesn't display in the other pages.
let localStorage = {};
if (localStorage.last) {
if ((localStorage.last - Date.now() ) / (1000*60*60*24) >= 1) {
// Date.now() is in milliseconds, so convert it all to days, and if
// it's more than 1 day, show the div
$(document).ready(function() {
var id = '#dialog';
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(2000);
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
localStorage.last = Date.now(); //Reset your timer
}
} else {
localStorage.last = Date.now();
$(document).ready(function() {
var id = '#dialog';
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(2000);
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#26262c;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:850px;
display:none;
z-index:9999;
padding:20px;
border-radius: 5px;
text-align: center;
}
#boxes #dialog {
width:450px;
height:auto;
padding: 10px 10px 10px 10px;
background-color:#ffffff;
font-size: 15pt;
}
.agree:hover{
background-color: #D1D1D1;
}
.popupoption:hover{
background-color:#D1D1D1;
color: green;
}
.popupoption2:hover{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
<div style="top: 50%; left: 50%; display: none;" id="dialog" class="window">
<div id="san">
<a href="#" class="close agree">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-512.png" width="25" style="float:right; margin-right: -10px; margin-top: -10px;" alt="" />
</a>
<br><br>
Visit our new website: <a style="color:blue" target="_blank" href="www.example.come">Example.com</a>.
<br><br><br> 
</div>
</div>
<div style="width: 2478px; font-size: 32pt; color:white; height: 1202px; display: none; opacity: 0.4;" id="mask"> </div>
</div>
EDIT:
I tried replacing my JS by this one, but still didn't work:
$(document).ready(function() {
if( $.cookie('showOnlyOne') ){
console.log("do nothing");
} else {
$.cookie('showOnlyOne', 'showOnlyOne', { expires: 1 });
var id = '#dialog';
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(2000);
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
}
});

One solution would be to set a browser cookie.
Somewhere in the execution of your popup, you create the cookie with an expiry date of 24 hours from when it has been set.
Setting the cookie with expiry:
const tomorrow = new Date();
tomorrow.setDate( tomorrow.getDate() + 1 )
document.cookie = `popupShown=true; expires=${ tomorrow }`;
You will need to add some logic around checking the cookie status before displaying the popup.
As for being responsive you may want to swap out fixed-widths for percentages, or at least use responsive breakpoints with media queries.

Scroll viewport height until end continously

I have this code to scroll the viewport height section-by-section when clicked on a fixed button until the end is reached. Then I want to fadeOut the button.
The HTML
<a class="cd-go">
<img class="scroll-swipe" src="<?php bloginfo('template_directory'); ?>/img/scroll_down_arrow.svg">
</a><!-- scroll btn -->
The js:
$(document).on('click', '.cd-go', function(event){
event.preventDefault();
var viewportHeight = $(window).height();
$('html, body').animate({
scrollTop: viewportHeight,
complete: function () {
$('.cd-go').fadeOut(300);
}
}, 500);
});
The problem is it is only scrollin from first to second section. How could this be section by section until the bottom?
EDIT:
Here's a fiddle: http://jsfiddle.net/cyt57dsj/7/

simply place $(document).height() instead of $(window).height() :)

You can keep track of the current section, and multiply viewportHeight by the current section. That way you can scroll section by section.
var currentSection = 0;
var totalSections = document.querySelectorAll("section").length;
$(document).on('click', '.cd-go', function(event){
event.preventDefault();
var viewportHeight = $(window).height();
currentSection++;
if (currentSection > totalSections - 1) currentSection = totalSections - 1;
$('html, body').animate({
scrollTop: viewportHeight * currentSection,
complete: function () {
$('.cd-swipe').slideDown(300);
}
}, 500);
});
.cd-go {
width: 209px;
background: rgba(0,0,0, 0.17);
height: 212px;
border-radius: 212px;
color: #fff;
position: fixed;
bottom: -106px;
text-align: center;
left: 0;
right: 0;
margin: 0 auto;
}
.w-sec {
height:100vh;
}
.w-sec:first-of-type {
background:#fff;
}
.w-sec:nth-of-type(2) {
background:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cd-go">
DOWN
</a><!-- scroll btn -->
<section id="section1" class="w-sec cd-section">
content
</section><!-- section 2 -->
<section id="section2" class="w-sec cd-section">
content
</section><!-- section 2 -->
<section id="section3" class="w-sec cd-section">
content
</section><!-- section 2 -->

Try this,
$(document).on('click', '.cd-go', function(event){
event.preventDefault();
var viewportHeight = $(document).height();
$("html, body").animate({
scrollTop: viewportHeight,
}, {
duration: 500,
complete: function () {
$('.cd-swipe').slideDown(300);
}
});
});
you are scrolling window instead of document

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 check if the element in on screen on webpage and I also want a trigger when someone scrolls to that

I want to check if the element is on the screen. It MUST NOT involve any kind of scrolling. I just want to check if the element is on the screen. I have tried different codes out there. They work perfectly fine on Desktops but not on mobile phones.
This is my current code:
var wScroll = $(this).scrollTop();
if(wScroll > $('.services').offset().top - ($(window).height() / 1.2)) {
$('.jstransitiononservices').each(function(i){
setTimeout(function(){
$('.jstransitiononservices').eq(i).addClass('is-showing');
}, 150 * (i+1));
});
}

You can use Element.getBoundingClientRect() method on window scroll and you can look for top property of the returned object:
$(document).ready(function() {
var target = $('.services')[0].getBoundingClientRect();
console.log(target, $(window).scrollTop());
if (target.top <= $(window).scrollTop()) {
$('pre').html('Element is in view.');
}
});
body {
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='services'>services div</div>
<pre></pre>
This one with scroll:
$(window).scroll(function() {
var target = $('.services')[0].getBoundingClientRect();
console.log(target, window.innerHeight);
if (target.top <= $(window).scrollTop() && target.bottom <= window.innerHeight) {
$('pre').html('Element is in view.');
}
}).scroll(); // <----this triggers scroll on page load.
body {
margin: 0;
padding: 0;
height:800px;
}
.services{margin:500px 0 0 0; border:solid 1px red;}
pre{position:fixed; left:0; top:0; width:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='services'>services div</div>
<pre></pre>

Responsive and Sticky Nav Bar

I have a nav bar that is fixed to the top of the page when the width is under 768px.
When it is over 768px it starts at the bottom and when the user scroll past it it become stuck to the top.
Both of these instance work fine on their own, but when the browser is resized there are some issues when going from under 768px to above. (Going from 768 to below works fine.)
When I load the page in a browser size under 768px and then resize the window above that is where I run in to problems.
I would like for the nav bar to smoothly transition between states. (It works beautifuly when loading above 768px then reszing to under and reszing above - Ideally this is how I would like it to work when loaded below 768px.) Or as an alternative just have the nav bar be fixed to the top when moving from under 768px to above.
This is the link to the site.
This is my CSS
.header{
width: 100%;
min-width: 300px;
height: 100px;
padding: 0px;
background: black;
position: absolute;
bottom: 0px;
z-index: 99999;
-webkit-font-smoothing: subpixel-antialiased;
}
.header.fixed{
width: 100%;
position: fixed;
top: 0px;
height: 100px;
-webkit-font-smoothing: subpixel-antialiased;
}
#media only screen and (max-width: 768px){
.header{
width: 100%;
background: black;
position: fixed;
top: 0px;
height: 100px;
-webkit-font-smoothing: subpixel-antialiased;
}
}
and this is the Javascript
<script>
jQuery(document).ready(function() {
var s = jQuery(".header");
var pos = s.position();
jQuery(window).scroll(function() {
var windowpos = jQuery(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixed");
} else {
s.removeClass("fixed");
}
});
});
</script>
I have also tried below to no luck.
<script>
if ( jQuery(window).width() > 768) {
jQuery(document).ready(function() {
var s = jQuery(".header");
var pos = s.position();
jQuery(window).scroll(function() {
var windowpos = jQuery(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixed");
} else {
s.removeClass("fixed");
}
});
});
}</script>
<script>
jQuery(window).resize(function(){
if ( jQuery(window).width() > 768) {
jQuery(document).ready(function() {
var s = jQuery(".header");
var pos = s.position();
jQuery(window).scroll(function() {
var windowpos = jQuery(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixed");
} else {
s.removeClass("fixed");
}
});
});
}})</script>

try this:
function sticky_navigation() {
var browserWidth = $(window).width();
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the page, change its position to fixed to stick to top,
// otherwise change it back to relative
if ((scroll_top > $('.header').height()) && (browserWidth > 720)) {
$('.header').css({ 'position': 'fixed', 'top':0, 'z-index':999999, 'opacity': 0.9, 'box-shadow': '0px 3px 5px #393939' });
} else {
$('.header').css({ 'position': 'relative', 'opacity': 1, 'box-shadow': 'none' });
}
};
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
// and run every time you resize to boot
$(window).resize(function() {
sticky_navigation();
});