I have a webpage that runs a JavaScript modal popup box with a message in it informing the visitor that they will be redirected to our new site in XX seconds. It also has two links saying "Agree" (then they are redirected) and "Disagree" (to stay on the old/current website).
This all seems to work fine but what I want it to do is stop the redirect when the user either clicks the Disagree link and/or when they click the darkened area outside the popup box (called #mask).
How can I get this to work? - the JS code is below.
Here is the popup box JS code:
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if Disagree word is clicked
$('#disagree').click(function () {
$(this).hide();
$('.window').hide();
$('#mask').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
And here is the countdown timer code (which is not external like the above popup.js but in the page itself):
<script src="popup.js"></script>
var time_left = 12;
var cinterval;
function time_dec(){
time_left--;
document.getElementById('countdown').innerHTML = time_left;
if(time_left == 1){
var originalstring = document.getElementById('countdown2').innerHTML;
var newstring = originalstring.replace('seconds','second');
document.getElementById('countdown2').innerHTML = newstring;
window.location.replace("http://cadfemukandireland.com/");
clearInterval(cinterval);
}
}
cinterval = setInterval('time_dec()', 1000);
The HTML code is:
<div id="boxes">
<div id="dialog" class="window">
<p>We are currently in the process of upgrading our current website to a new and improved version.</p>
<p>You will automatically be directed to the new website <span id="countdown2">in <span id="countdown">12</span> seconds</span>.</p>
<div id="popupfoot"> I disagree </div>
</div>
<div id="mask"></div>
</div>
Try the code below - It basically zeros the time left when disagree is clicked
I've also assigned the time_dec function to a variable for easier scoping
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if Disagree word is clicked
$('#disagree').click(function () {
$(this).hide();
$('.window').hide();
$('#mask').hide();
time_left = 0;
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
var time_left = 3;
var cinterval;
document.getElementById('countdown').innerHTML = time_left;
var time_dec = function(){
time_left--;
document.getElementById('countdown').innerHTML = time_left;
if(time_left == 1){
var originalstring = document.getElementById('countdown2').innerHTML;
var newstring = originalstring.replace('seconds','second');
document.getElementById('countdown2').innerHTML = newstring;
window.location.replace("http://cadfemukandireland.com/");
clearInterval(cinterval);
}
}
cinterval = setInterval(time_dec, 1000);
#dialog {
position: absolute;
width: 300px;
height: 220px;
border: 1px solid #ccc;
padding: 16px;
top: 100px;
left: 100px;
z-index: 999;
background: #fff;
}
#mask {
z-index: 9;
background: rgba(0,0,0,0.6)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
<div id="dialog" class="window">
<p>We are currently in the process of upgrading our current website to a new and improved version.</p>
<p>You will automatically be directed to the new website <span id="countdown2">in <span id="countdown">12</span> seconds</span>.</p>
<div id="popupfoot"> I agree | <a id="disagree" style="color:red;">I disagree</a>
</div>
</div>
<div id="mask"></div>
</div>
Related
I want to create a modal box that prompts visitors to choose between A or B. If user chooses A, they will be redirected to another page, and if B, then they stay on the current website, but the modal box dissapears giving them access to the contents.
I also need an option to "remember me", and if checked, this will remember their profile and if not, they will be prompted again to make a selection betweeen A and B. Here is what I have so far.
The redirection part works, but I cannot get the modal to work.
<div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window"> Please identity yourself
<div id="lorem" style="text-align:center">
<FORM NAME="form1">
<select onchange="formChanged(this);" NAME="user" SIZE="1">
<OPTION VALUE="non-value">Please make a selection
<OPTION VALUE="https://redirection.com">PI
<OPTION VALUE="fa">FA
</select>
<br>
<input type="checkbox" id="remember" checked />Remember me
</FORM>
</div>
</div>
<div style="width: 1478px; font-size: 32pt; color:white; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
setStatus = document.getElementById('remember');
setStatus.onclick = function() {
if (document.getElementById('remember').checked) {
localStorage.setItem('remember', "true");
} else {
localStorage.setItem('remember', "false");
}
}
getStstus = localStorage.getItem('remember');
if (getStstus == 'true') {
document.getElementById('remember').checked = true;
}
// localStorage.clear();
if (localStorage && localStorage.user && remember.checked) {
location = localStorage.user;
}
function formChanged(form) {
var val = form.options[form.selectedIndex].value;
if (val !== 'non-value' && val !== 'fa') {
if (localStorage) {
localStorage.user = val;
}
location = val;
}
var val = form.options[form.selectedIndex].value;
if (val == 'fa') {
if (localStorage) {
localStorage.user = val;
}
$('.window').hide();
$('#mask').hide();
}
}
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
//$('#mask').click(function () {
// $(this).hide();
// $('.window').hide();
//});
});
I have a problem in animation in onscroll event.
The if condition works very well when I scroll down and div shows without any problem, but when I scroll up, the else condition does not work, so the div doesn't hide and it is still shown.
This is the code:
$(function () {
'use strict';
var myDiv1 = $('div'),
div1Top = (myDiv1.offset().top) / 2;
$(window).on('scroll', function () {
var docScrollTop = document.documentElement.scrollTop;
if (docScrollTop >= div1Top) {
$('div').animate({opacity: '1'}, 800);
} else {
$('div').css('opacity', '0');
}
});
});
This might not be exactly what you're trying to do, but I think it's in the right ballpark:
<html>
<style>
div {
width: 500px;
height: 500px;
}
.animated_div {
background-color: green;
position: absolute;
top: 2000px;
opacity: 0;
}
.placeholder {
position: absolute;
top:4000px;
}
</style>
<body>
<div class="animated_div"></div> <!--The div that will actually be animated-->
<div class="placeholder"></div> <!--This is just something below the animated DIV, so that you can scroll below the animated DIV -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
'use strict';
var myDiv1 = $('.animated_div');
// Start animating the div relative to its middle
var div1Middle = myDiv1.offset().top + myDiv1.height() / 2;
// Keep track of whether the animated_div is displayed or not
var myDiv1Shown = false;
$(window).on('scroll', function () {
var docScrollTop = $(window).scrollTop(); // Top of the window in page coordinates
var docScrollBottom = docScrollTop+$(window).height(); // Bottom of the window in page coordinates
if (div1Middle > docScrollTop && div1Middle < docScrollBottom && !myDiv1Shown) {
// The div middle is within view and it's not already shown, so we need to show it
myDiv1Shown = true;
myDiv1.animate({opacity: '1'}, 800);
} else if ((div1Middle > docScrollBottom || div1Middle < docScrollTop) && myDiv1Shown) {
// The div middle is out of view and it's shown, so we need to hide it
myDiv1Shown = false;
myDiv1.animate({opacity: '0'}, 800);
}
});
});
</script>
</html>
This changes the div opacity to 1 when it's in view and changes it to 0 when it's out of view. It's considered in-view if its vertical middle is in view.
If what you want to do is essentially fade-in the div when the user scrolls it into view and then fade-out the div when the user scrolls it out of view, you might consider this as an alternative:
<html>
<style>
div {
width: 500px;
height: 500px;
}
.animated_div {
background-color: green;
position: absolute;
top: 2000px;
opacity: 0;
}
.placeholder {
position: absolute;
top:4000px;
}
</style>
<body>
<div class="animated_div"></div> <!--The div that will actually be animated-->
<div class="placeholder"></div> <!--This is just something below the animated DIV, so that you can scroll below the animated DIV -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
'use strict';
var myDiv1 = $('.animated_div');
var div1Top = myDiv1.offset().top;
var div1Height = myDiv1.height();
var div1Bottom = div1Top + div1Height;
$(window).on('scroll', function () {
var docScrollTop = $(window).scrollTop(); // Top of the window in page coordinates
var docScrollBottom = docScrollTop+$(window).height(); // Bottom of the window in page coordinates
// Calculate fraction of div on page
var topOffPage = Math.max(0, docScrollTop - div1Top);
var bottomOffPage = Math.max(0, div1Bottom - docScrollBottom);
var fractionOnPage = Math.max(0, div1Height - topOffPage - bottomOffPage)/div1Height;
myDiv1.css('opacity', fractionOnPage);
});
});
</script>
</html>
The snippet immediately above sets the opacity of the div to be the fraction of it that is in view (considering only the vertical dimension). So if the entire DIV is on-screen, it's fully opaque. If only half of it is onscreen (with half of it either above the scroll top or below the scroll bottom), then the opacity is 0.5, and so on. If the div is large relative to the screen, then this could cause problems. For instance, if you have a 1000px div, and people are viewing the page with a viewport of height 500px, then the div will only ever be 50% opaque at most. But you can adapt it as necessary to fit your circumstances.
I'm using interact.js to allow users to resize a modal dialog that I produce using Bootstrap 3.3.7. There's a problem that when the user initiates the resize and moves the mouse pointer so that the dialog is resized past its maximum size, the modal is closed as soon as the user releases the mouse button. This does not happen if the user is shrinking the modal. The following code snippet shows the issue.
var makeModalButton = document.getElementById("makeModal");
var modalTemplate =
'\
<div class="modal" style="position: absolute" tabindex="1">\
<div class="modal-dialog">\
<div class="modal-content">\
<div class="modal-header">\
<button type="button" class="close" data-dismiss="modal" \
aria-hidden="true">×</button>\
<h3 class="modal-title">Foo</h3>\
</div>\
<div class="modal-body">\
<p>Foo foo.</p>\
</div>\
<div class="modal-footer">\
</div>\
</div>\
</div>\
</div>';
function updateRect(el, dx, dy) {
var rect = el.getBoundingClientRect();
var width = rect.width + dx;
var height = rect.height + dy;
el.style.width = width + 'px';
el.style.height = height + 'px';
}
$(makeModalButton).on("click", function() {
var $modal = $(modalTemplate);
document.body.appendChild($modal[0]);
var body = $modal[0].getElementsByClassName("modal-body")[0];
var content = $modal[0].getElementsByClassName("modal-content")[0];
$modal.modal();
interact(content)
.resizable({})
.on('resizemove', function(event) {
var target = event.target;
updateRect(target, event.dx, event.dy);
updateRect(body, event.dx, event.dy);
});
});
.modal-content {
overflow: auto;
max-height: 200px;
}
.modal-dialog {
max-height: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
<p>
Click the button "Make a modal". Click on the bottom footer of the modal to resize it, and move the pointer down until the modal stop resizing. Release the mouse button. The modal will close.
</p>
<button id="makeModal">Make a modal</button>
The problem is that when the mouse pointer moves outside the content of the modal, the mouse release is registered on a backdrop that Bootstrap creates to catch clicks outside the modal. Such clicks close the modal.
The following is a proof of concept. The key is the addition of these two event listeners:
.on('resizestart', function() {
var modal = $modal.data('bs.modal');
modal.ignoreBackdropClick = true;
})
.on('resizeend', function() {
setTimeout(function() {
var modal = $modal.data('bs.modal');
modal.ignoreBackdropClick = false;
}, 0);
})
We use var modal = $modal.data('bs.modal') to get the JavaScript object that Bootstrap creates to store the modal's state. In the resizestart handler we set the .ignoreBackdropClick property, which tells Bootstrap to ignore the next click on the backdrop. In the resizeend handler we want to reset that property. However due to the way events are happening, we cannot reset it right away. Instead we schedule the reset for the next iteration of the event loop, which allows Bootstrap to perform its housekeeping first. (If we clear the property too soon it is as if we never set it in the first place.)
The principle works but I'm not particularly happy with relying on a part of Bootstrap that is not documented. I'll sure be curious about alternative solutions that don't require relying on undocumented parts of Bootstrap.
A code snippet illustrating this solution follows. The "Make a faulty modal" replicates the issue in the question. The "Make a good modal" button shows the fix.
var makeFaultyModalButton = document.getElementById("makeFaultyModal");
var makeGoodModalButton = document.getElementById("makeGoodModal");
var modalTemplate = '\
<div class="modal" style="position: absolute" tabindex="1">\
<div class="modal-dialog">\
<div class="modal-content">\
<div class="modal-header">\
<button type="button" class="close" data-dismiss="modal" \
aria-hidden="true">×</button>\
<h3 class="modal-title">Foo</h3>\
</div>\
<div class="modal-body"><p>Foo foo.</p></div>\
<div class="modal-footer"></div>\
</div>\
</div>\
</div>';
function updateRect(el, dx, dy) {
var rect = el.getBoundingClientRect();
var width = rect.width + dx;
var height = rect.height + dy;
el.style.width = width + 'px';
el.style.height = height + 'px';
}
$(makeFaultyModalButton).on("click", function() {
var $modal = $(modalTemplate);
document.body.appendChild($modal[0]);
var body = $modal[0].getElementsByClassName("modal-body")[0];
var content = $modal[0].getElementsByClassName("modal-content")[0];
$modal.modal();
interact(content)
.resizable({})
.on('resizemove', function(event) {
var target = event.target;
updateRect(target, event.dx, event.dy);
updateRect(body, event.dx, event.dy);
});
});
$(makeGoodModalButton).on("click", function() {
var $modal = $(modalTemplate);
document.body.appendChild($modal[0]);
var body = $modal[0].getElementsByClassName("modal-body")[0];
var content = $modal[0].getElementsByClassName("modal-content")[0];
$modal.modal();
interact(content)
.resizable({})
.on('resizestart', function() {
var modal = $modal.data('bs.modal');
modal.ignoreBackdropClick = true;
})
.on('resizeend', function() {
setTimeout(function() {
var modal = $modal.data('bs.modal');
modal.ignoreBackdropClick = false;
}, 0);
})
.on('resizemove', function(event) {
var target = event.target;
updateRect(target, event.dx, event.dy);
updateRect(body, event.dx, event.dy);
});
});
.modal-content {
overflow: auto;
max-height: 200px;
}
.modal-dialog {
max-height: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
<button id="makeFaultyModal">Make a faulty modal</button>
<button id="makeGoodModal">Make a good modal</button>
I have page that I want to scroll vertically on event mouse down, and I already have found the answer on this question link. In my case i have a div that contain image that user put on it and sometimes it have bigger size than my div size, with overflow:auto; i get horizontal scroll inside that div. So i need to apply drag scroll horizontally on that div.
HTML
<html>
<body>
<div id="container">
<div class="detail-title"> TITLE </div>
<div class="detail-content">
<img src="...." />
!-- long content --!
</div>
</div>
</body>
</html>
CSS
.detail-main-content-box {
background: none;
display: block;
left: 0;
min-height: 350px;
overflow: auto;
padding: 5px 5px 5px 5px;
width: auto;
}
jQuery from answer link
$(document).on({
'mousemove': function (e) {
clicked && updateScrollPos(e);
},
'mousedown': function (e) {
clicked = true;
clickY = e.pageY;
$('html').addClass('block-selection').css({ 'cursor': 'url(../img/closedhand.cur), default' });
},
'mouseup': function () {
clicked = false;
$('html').removeClass('block-selection').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
};
how can i apply this on div? i have try to change $(document) to $('.detail-content') also change function scrollTop to scrollLeft but nothing happen. Here is the fiddle for current condition.
this has been left here unanswered for two long years, not even a useful comment. OK, here is my try. hope it can help ( le roi est mort vive le roi)
<script type="text/javascript">
var clicked = true;
var clickY = e.pageY;
$('.detail-content').on({
'mousemove': function (e) {
clicked && updateScrollPos(this,e);
},
'mousedown': function (e) {
clicked = true;
clickY = e.pageY;
$('html').addClass('block-selection').css({ 'cursor': 'grabbing' });
},
'mouseup': function () {
clicked = false;
$('html').removeClass('block-selection').css('cursor', 'auto');
}
});
var updateScrollPos = function(obj,e) {
$(obj).scrollTop($(obj).scrollTop() + (clickY - e.pageY));
clickY = e.pageY;
};
</script>
how can I give an alert when one div hovers over another div upon scroll? here is a working example,
http://jsfiddle.net/uprosoft/Ek5Gy/267/
I cant find a jQuery code to go after though in-order to give an alert.
Code:
HTML
<div id="container">
<div id="div1">test</div>
<br>
<div id="div2"> another test</div>
</div>
CSS
#div1{
background: green;
position: fixed;
width: 100%;
}
#div2{
background: yellow;
position: relative;
width: 100%;
margin-top: 100px;
}
#container{
height: 1000px;
}
JQUERY ???
/* what jquery code goes here? to alert when the yellow div touches the green div upon scroll? */
Something like that should work:
$(window).scroll(function() {
var div1 = $("#div1");
var div2 = $("#div2");
var div1_top = div1.offset().top;
var div2_top = div2.offset().top;
var div1_bottom = div1_top + div1.height();
var div2_bottom = div2_top + div2.height();
if (div1_bottom >= div2_top && div1_top < div2_bottom) {
// overlapped
}
});
DEMO: http://jsfiddle.net/Ek5Gy/280/
I know the question is for Jquery but either way, the same done with vanilla JS
function didDiv1TouchedDiv2() {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
// Guard
if (div1 === undefined || div2 === undefined) return;
var div1Rect = div1.getBoundingClientRect();
var div2Rect = div2.getBoundingClientRect();
// We need to add the offsetHeight in order to include padding and border of element and get excact position
return div1Rect.top >= div2Rect.top + div2.offsetHeight;
}
window.addEventListener("scroll", didDiv1TouchedDiv2);