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.
Related
How can I detect if the user scrolls to end of an <embed> element?
<embed src="contract.pdf" type="application/pdf" width="800" height="800" id="contractPDF">
I used this code but it doesn't work:
$('#contractPDF').bind('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert("end reched");
}
});
First, you need to know where your element begins and where it ends, so that when you scroll down, you know if you already pass that point.
$(window).scroll(function() {
// Fetch the embed container.
var container = $('#contractPDF');
// Height of our window.
var windowHeight = $(window).height();
// Container information.
var containerHeight = $(container).height();
var containerBottom = container.offset().top + containerHeight;
// Location of our window in our page.
var windowLocation = $(this).scrollTop();
// Check if we are past it.
if (windowLocation + windowHeight > containerBottom) {
alert('reached');
}
});
#contractPDF {
height: 900px;
width: 200px;
background-color: blue;
position:relative;
display:block;
}
#contractPDF2 {
height: 900px;
width: 200px;
background-color: red;
position:relative;
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contractPDF"></div>
<div id="contractPDF2"></div>
I have sidebar that following by scrolling.
If the sidebar reach down to footer, how to stop to follow?
This is what I tried so far here.
$(function() {
var floatPosition = parseInt($("#left_menu").css('top'));
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var newPosition = scrollTop + floatPosition + "px";
var newPosition2 = scrollTop;
$("#left_menu").stop().animate({
"top" : newPosition2
}, 400);
}).scroll();
});
.left_menu{position:absolute;top:0;left:0;width:100px; height:330px; margin-top: 30px; background:green}
#footer { background:gray; height:100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<div id="left_menu" class="left_menu">menu</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="footer">foot</div>
Please help
You should check if bottom position of #left_menu is greater than top position of #footer, prevent increasing it. Note that you should remove CSS margin-top of #left_menu
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var height = $("#left_menu").height();
var top = $("#footer").offset().top;
if (scrollTop+height > top)
scrollTop = top-height;
$("#left_menu").stop().animate({
"top": scrollTop
}, 400);
}).scroll();
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var height = $("#left_menu").height();
var top = $("#footer").offset().top;
if (scrollTop+height > top)
scrollTop = top-height;
$("#left_menu").stop().animate({
"top": scrollTop
}, 400);
}).scroll();
.left_menu{
position:absolute;
top:0;
left:0;
width:100px;
height:330px;
background:green
}
#footer {
background:gray;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left_menu" class="left_menu">menu</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="footer">foot</div>
<br><br><br><br><br><br><br><br>
Find below image reference:
What I want exactly is when only one section (section4) comes in window view around 40% - 80%. On scroll stop the section4 should auto scroll to fit on window.
Here, The basic fiddle without any script.
body,
html {
height: 100%;
margin: 0;
}
.sections {
height: 100%;
background: #000;
opacity: 0.7;
}
#section2 {
background: #ccc;
}
#section3 {
background: #9c0;
}
#section4 {
background: #999;
}
#section4 {
background: #ddd;
}
<div class="sections" id="section1"></div>
<div class="sections" id="section2"></div>
<div class="sections" id="section3"></div>
<div class="sections" id="section4"></div>
<div class="sections" id="section5"></div>
I have tried jquery visible plugin but it didn't help. So I have put commented one.
/*
var ww = $(window).width();
$(window).scroll(function(){
if ($('#section3').visible(true)) {
$('body, html').animate({scrollTop: $('#section4').offset().top});
}else if($('#section5').visible(true)) {
$('body, html').animate({scrollTop: $('#section4').offset().top});
}
});
*/
Use script to compare the scrollTop of the screen with the offset().top and the height of the section.
Note that ratio determines how much the element is seen on the screen (greater that 0.6 is used to determine if more than 60% of the section is visible on screen).
See demo below with comments inline:
/*debouce (courtesy:underscore.js)*/
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// scroll listener
$(window).scroll(debounce(function() {
var $window = $(window);
// change this to '.sections' if you want the effect for all sections
$('#section4').each(function() {
var top_of_element = $(this).offset().top;
var bottom_of_element = $(this).offset().top + $(this).outerHeight();
var bottom_of_screen = $window.scrollTop() + $window.height();
var top_of_screen = $window.scrollTop();
var height_of_element = $(this).outerHeight();
// if element below top of screen
if (top_of_element > top_of_screen && bottom_of_screen < bottom_of_element) {
var ratio = (bottom_of_screen - top_of_element) / height_of_element;
if (ratio > 0.6) {
// animate by scrolling up
$('body, html').animate({
scrollTop: $(this).offset().top
});
}
}
// if element above top of screen
else if (bottom_of_element > top_of_screen && bottom_of_screen > bottom_of_element) {
var ratio = (bottom_of_element - top_of_screen) / height_of_element;
if (ratio > 0.6) {
// animate by scrolling down
$('body, html').animate({
scrollTop: $(this).offset().top
});
}
}
});
}, 250));
body,
html {
height: 100%;
margin: 0;
}
.sections {
height: 100%;
background: #000;
opacity: 0.7;
}
#section2 {
background: #ccc;
}
#section3 {
background: #9c0;
}
#section4 {
background: #999;
}
#section4 {
background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sections" id="section1"></div>
<div class="sections" id="section2"></div>
<div class="sections" id="section3"></div>
<div class="sections" id="section4"></div>
<div class="sections" id="section5"></div>
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();
});
I want to fix model box height width according to i frame height and width. i frame URL is my local domain means modal box and i frame URL is on same domain. I have tried but not get any relevant result. Here is fiddle URL.
http://jsfiddle.net/shagun_jsfiddle/KY49P/1/
HTML
<a id="howdy" href="#">Howdy</a>
<div id="overlay" style="display: none;"></div>
<div id="modal" style="display: none;">
<a id="close" href="#">close</a>
<div>
<div id="content">
<iframe src="http://fiddle.jshell.net/shagun_jsfiddle/XxuLb/show/" frameborder="0" height="100%" width="100%"></iframe>
</div>
</div>
</div>
Css
* {
margin:0;
padding:0;
}
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
}
#modal {
position:absolute;
background:url(tint20.png) 0 0 repeat;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
}
#content {
border-radius:8px;
background:#fff;
padding:20px;
width:550px;
}
#close {
position:absolute;
background:url(close.png) 0 0 no-repeat;
width:24px;
height:27px;
display:block;
text-indent:-9999px;
top:-7px;
right:-7px;
}
jQuery
var modal = (function(){
var method = {},
$overlay,
$modal,
$content,
$close;
$modal = $('#modal');
// Center the modal in the viewport
method.center = function () {
var top, left;
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
$modal.css({
top:top + $(window).scrollTop(),
left:left + $(window).scrollLeft()
});
};
// Open the modal
method.open = function (settings) {
//$content.empty().append(settings.content);
$modal = $('#modal');
$modal.css({
width: settings.width || 'auto',
height: settings.height || 'auto'
});
$contentWd = $('#content').width(); //main content div width
//$('#iframe-box').css({
//height : $("iframe[id='iframe-box']").contents().find("html").height()
//});
$content_inWidth = $('#content').width();
$content_inHeight = $('#content').height();
$iframeWidth = $('.iframe').width();
$iframeHeight = $('.iframe').height();
//alert($content_inHeight);
if($content_inWidth > $iframeWidth){
//alert($content_inWidth);
}else{
//alert($iframeWidth);
}
method.center();
$(window).bind('resize.modal', method.center);
$modal.show();
$('#overlay').show();
};
return method;
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('a#howdy').click(function(e){
modal.open({});
e.preventDefault();
});
$('#close').click(function(e){
e.preventDefault();
$('#modal').hide();
$('#overlay').hide();
});
});
Maybe this will help. In the css for the modal window, set the top, left, bottom and right to 0. This will stretch the model to fill the box it is in (as long as it remains absolute, and its container set to something where it will remain relative to it - absolute, or relative.)
#modal {
position:absolute;
background:url(tint20.png) 0 0 repeat;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
top: 0;
bottom: 0;
left: 0;
right: 0;
}