I have a div assigned to trigger some Javascipt which opens a 'PopUp' RSVP form on my site,I however also want to have a black background full screen overlay when the window pops up to hide the rest of the site.
The popup window works fine using this:
$(function() {
// contact form animations
$('#contact').click(function() {
$('#contactForm').fadeToggle();
});
$(document).mouseup(function (e) {
var container = $("#contactForm");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
So I want to attach the overlay action into this function so that it toggles on and off with the PopUpWindow. I already have a div assigned with the correct CSS,I just need to get it to also toggle:
.sidebar-overlay {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,1);
position: fixed;
z-index: 3;
display: none;
cursor: e-resize;
}
I am a little stuck so any help is very much appreciated. Thanks
I think in your script, you checked for the contact form being clicked or not, but then you hide only the form, and not the sidebar-overlay section. So it's really just a slight mix up in which selector is in use. (I can't be positive if that's what's going on, as you did not include the html markup in your question.)
Here's a quick example with your code and the matching html. Only, the sidebar-overlay is hid on click of the document area.
$('#contact').click(function() {
var container = $(".sidebar-overlay");
container.fadeToggle();
});
$(document).mouseup(function (e) {
var container = $(".sidebar-overlay");
var contactform = $("#contactForm");
if (!contactform.is(e.target) // if the target of the click isn't the container...
&& contactform.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
.sidebar-overlay {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,1);
position: fixed;
z-index: 3;
display: none;
cursor: e-resize;
}
#contactForm{
width:50%;
margin:20px auto;
padding:20px;
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="contact">click</button>
<div class="sidebar-overlay">
<form id="contactForm">
This is my form<br />
field 1 ______<br />
field 2 ______<br />
</form>
</div>
I have a div "wtb_wrapper_middle" in middle of my web page.
For that div only scroll able in web page. In left and right div are not movable, it fixed in my web page.
So I want to mouse always focus on that particular div wherever my mouse clicked or mouse hover. Means when i use keyboard up or down button at that time that particular div only should be scroll.
Is there possible in JQuery.
My code is like below.
<div id="wtb_wrapper_inner">
<div id="wrapper_left">
....
....
....
</div>
<div id="wtb_wrapper_middle">
....
....
....
....
</div>
<div id="wtb_wrapper_right">
....
....
....
</div>
</div>
In from above html code "wtb_wrapper_middle" area only scrolls in my web page.
I have tried the below
window.onload = function() {
document.getElementById("wtb_wrapper_middle_inner").focus();
};
In this code is focus only on page load, but if clicked mouse in somewhere else, at that time also that middle area should be scroll. That is not working.
My Ajax callback function like below
$.ajax({
type: "POST",
url: "search.php?ajaxrequest=yes",
data: query_string
}).done(function( data ) {
$(".wtb_p_loader").remove();
$("#wtb_wm_listing").append(data);
});
I'm appending return success data into the di wtb_wm_listing which is i have placed inside of main div wtb_wrapper_middle
Anyone help me to make it success..
You can do this using css position: fixed;
The two outer divs are fixed to the screen regardless of scroll position. Then the central div scrolls regardless of where the mouse pointer is. You can use top and bottom to fix the full height of the screen, then left and right to fix each on either side.
You can still interact with content in the fixed outer divs.
And the Html is
<div class='left'>
<a href='#'>Hover to check the mouse focus and scorll</a>
</div>
<div class='center'>
//some long content
</div>
<div class='right'>
</div>
Css for doing this action.
a {
color: #000;
display: block;
font-family: arial;
margin: 10px;
text-decoration: none;
}
a:hover {
background-color: #f03055;
color: #fafafa;
}
p {
color: #fafafa;
font-family: arial;
line-height: 24px;
margin: 0 0 25px 0;
padding: 0 2%;
}
.center {
background-color: #97c;
height: 2000px;
margin: 0 25%;
width: 50%%;
}
.left {
background-color: #7c9;
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 25%;
}
.right {
background-color: #7c9;
bottom: 0;
position: fixed;
right: 0;
top: 0;
width: 25%;
}
EDIT: to filter out input elements
document.body.onkeydown = function(event){
var e = event || window.event,
target = e.target || e.srcElement;
if (target.tagName.toUpperCase() == 'INPUT') return;
document.getElementById("wtb_wrapper_middle_inner").focus();
};
this will move focus to your middle div whenever keydown event occurs.
I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})
Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}
I've been trying to integrate a custom back to top button on a web page, but I can't move (slide) it with JQuery. What I want is to slide the button from the invisible part of the screen right to left when page scroll reaches a particular amount, and slide it from left to right (to the invisible part of the screen) when scroll amount is less than the specified.
Any advice or a fragment of code would be of great value!
Here is the code:
custom css:
a.custom-back-to-top {
width: 80px;
height: 40px;
color: white;
text-align: center;
vertical-align: middle;
font-weight: bold;
white-space: nowrap;
position: fixed;
z-index: 9999;
right: -100px;
bottom: 20px;
background: #444;
}
and this is the jquery
$('body').append('Back to Top');
var scrollAmount = 1000;
$(window).scroll(function() {
if ($(window).scrollTop() > scrollAmount)
{
$('a.custom-back-to-top').animate({'right':'20px'}, 'slow');
}
else
{
$('a.custom-back-to-top').animate({'right':'-100px'}, 'slow');
}
});
$('a.custom-back-to-top').click(function() {
$('body, html').animate({ scrollTop: 0 }, 1000);
return false;
});
$(window).scroll(function () {
var button_threshold = someNumber;
if ($(window). scrollTop > button_threshold) {
// Move button into view
} else {
// Move button out of view
}
});
I created a jQuery popup by following an online tutorial (http://uposonghar.com/popup.html).
Due to my low knowledge on jQuery I am not able to make it work as of my requirements.
My problem:
I want to disable scroll of webpage while popup is active.
Background fade color of popup while active is not working on full webpage.
CSS:
body {
background: #999;
}
#ac-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup{
width: 555px;
height: 375px;
background: #FFFFFF;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 150px; left: 375px;
}
JavaScript:
<script type="text/javascript">
function PopUp(){
document.getElementById('ac-wrapper').style.display="none";
}
</script>
HTML:
<div id="ac-wrapper">
<div id="popup">
<center>
<p>Popup Content Here</p>
<input type="submit" name="submit" value="Submit" onClick="PopUp()" />
</center>
</div>
</div>
<p>Page Content Here</p>
A simple answer, which you could use and would not require you to stop the scroll event would be to set the position of your #ac-wrapper fixed.
e.g.
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
this will keep the container of the popup always visible (aligned top - left) but would still allow scrolling.
But scrolling the page with a popup open is BAD!!! (almost always anyway)
Reason you would not want to allow scrolling though is because if your popup isn't fullscreen or is semi transparent, users will see the content scroll behind the popup. In addition to that, when they close the popup they will now be in a different position on the page.
A solution is that, when you bind a click event in javascript to display this popup, to also add a class to the body with essentially these rules:
.my-body-noscroll-class {
overflow: hidden;
}
Then, when closing the popup by triggering some action or dismissing it with a click, you simply remove the class again, allowing scroll after the popup has closed.
If the user then scrolls while the popup is open, the document will not scroll. When the user closes the popup, scrolling will become available again and the user can continue where they left off :)
To disable scrollbar:
$('body').css('overflow', 'hidden');
This will hide the scrollbar
Background-fade-thing:
I created my own popup-dialog-widget that has a background too. I used the following CSS:
div.modal{
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9998;
background-color: #000;
display: none;
filter: alpha(opacity=25); /* internet explorer */
-khtml-opacity: 0.25; /* khtml, old safari */
-moz-opacity: 0.25; /* mozilla, netscape */
opacity: 0.25; /* fx, safari, opera */
}
I had a similar problem; wanting to disable vertical scrolling while a "popup" div was displayed.
Changing the overflow property of the body does work, but also mess with the document's width.
I opted jquery to solve this using and used a placeholder for the scrollbar.
This was done without binding to the scroll event, ergo this doesn't change your scrollbar position or cause flickering :)
HTML:
<div id="scrollPlaceHolder"></div>
CSS:
body,html
{
height:100%; /*otherwise won't work*/
}
#scrollPlaceHolder
{
height:100%;
width:0px;
float:right;
display: inline;
top:0;
right: 0;
position: fixed;
background-color: #eee;
z-index: 100;
}
Jquery:
function DisableScrollbar()
{
// exit if page can't scroll
if($(document).height() == $('body').height()) return;
var old_width = $(document).width();
var new_width = old_width;
// ID's \ class to change
var items_to_change = "#Banner, #Footer, #Content";
$('body').css('overflow-y','hidden');
// get new width
new_width = $(document).width()
// update width of items to their old one(one with the scrollbar visible)
$(items_to_change).width(old_width);
// make the placeholder the same width the scrollbar was
$("#ScrollbarPlaceholder").show().width(new_width-old_width);
// and float the items to the other side.
$(items_to_change).css("float", "left");
}
function EnableScrollbar()
{
// exit if page can't scroll
if ($(document).height() == $('body').height()) return;
// remove the placeholder, then bring back the scrollbar
$("#ScrollbarPlaceholder").fadeOut(function(){
$('body').css('overflow-y','auto');
});
}
Hope this helps.
If simple switching of body's 'overflow-y' is breaking your page's scroll position, try to use these 2 functions (jQuery):
// Run this function when you open your popup:
var disableBodyScroll = function(){
window.body_scroll_pos = $(window).scrollTop(); // write page scroll position in a global variable
$('body').css('overflow-y','hidden');
}
// Run this function when you close your popup:
var enableBodyScroll = function(){
$('body').css('overflow-y','scroll');
$(window).scrollTop(window.body_scroll_pos); // restore page scroll position from the global variable
}
Use below code for disabling and enabling scroll bar.
Scroll = (
function(){
var x,y;
function hndlr(){
window.scrollTo(x,y);
//return;
}
return {
disable : function(x1,y1){
x = x1;
y = y1;
if(window.addEventListener){
window.addEventListener("scroll",hndlr);
}
else{
window.attachEvent("onscroll", hndlr);
}
},
enable: function(){
if(window.removeEventListener){
window.removeEventListener("scroll",hndlr);
}
else{
window.detachEvent("onscroll", hndlr);
}
}
}
})();
//for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();
https://jsfiddle.net/satishdodia/L9vfhdwq/1/
html:-
Open popup
Popup
pop open scroll stop now...when i will click on close automatically scroll running.
close
**css:-**
#popup{
position: fixed;
background: rgba(0,0,0,.8);
display: none;
top: 20px;
left: 50px;
width: 300px;
height: 200px;
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
color: #fff;
}
**jquery**:-
<script type="text/javascript">
$("#open_popup").click(function(){
$("#popup").css("display", "block");
$('body').css('overflow', 'hidden');
});
$("#close_popup").click(function(){
$("#popup").css("display", "none");
$('body').css('overflow', 'scroll');
});
</script>
I had the same problem and found a way to get rid of it, you just have to stop the propagation on touchmove on your element that pops up. For me, it was fullscreen menu that appeared on the screen and you couldn't scroll, now you can.
$(document).on("touchmove","#menu-left-toggle",function(e){
e.stopPropagation();
});
This solution works for me.
HTML:
<div id="payu-modal" class="modal-payu">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
CSS:
.modal-payu {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
JS:
<script>
var btn = document.getElementById("button_1");
btn.onclick = function() {
modal.style.display = "block";
$('html').css('overflow', 'hidden');
}
var span = document.getElementsByClassName("close")[0];
var modal = document.getElementById('payu-modal');
window.onclick = function(event) {
if (event.target != modal) {
}else{
modal.style.display = "none";
$('html').css('overflow', 'scroll');
}
}
span.onclick = function() {
modal.style.display = "none";
$('html').css('overflow', 'scroll');
}
</script>
I ran into the problem and tried several solutions,
here is the article that solved my problem (https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/) and it is quite simple!
It uses the 'fixed body' solution, which is quite common to find in lots of posts.
The problem with this solution is, when the popup is closed, the body will scroll back to the top.
But the article points out: by manipulating the CSS top and position attributes while using the solution, we can recover the scroll position.
Another issue of the solution is, you can't apply the solution with the multiple popup scenario.
So I added a variable to store the count of the popup, just to make sure the program won't trigger the initiating process nor the reset process at the wrong timing.
Here is the final solution I get:
// freeze or free the scrolling of the body:
const objectCountRef = { current: 0 }
function freezeBodyScroll () {
if (objectCountRef.current === 0) { // trigger the init process when there is no other popup exist
document.body.style.top = `-${window.scrollY}px`
document.body.style.position = 'fixed'
}
objectCountRef.current += 1
}
function freeBodyScroll () {
objectCountRef.current -= 1
if (objectCountRef.current === 0) { // trigger the reset process when all the popup are closed
const scrollY = document.body.style.top
document.body.style.position = ''
document.body.style.top = ''
window.scrollTo(0, parseInt(scrollY || '0') * -1)
}
}
You can also see the demo on my Codepen: https://codepen.io/tabsteveyang/pen/WNpbvyb
Edit
More about the 'fixed body' solution
The approach is mainly about setting the CSS position attribute of the body element into 'fixed' to make it unscrollable.
No matter how far it has been scrolled, when the body is fixed, it will scroll back to the top, which is the behavior that I don't expect to see. (Imagine the user is browsing a long content and almost scrolls to the bottom of the page, suddenly a popup shows up and make the page scroll right back to the top, that's a bad user experience)
The solution from the article
Base on the 'fixed body' approach, additionally, the solution sets the CSS top of the body as the value of '-window.scrollY px' to make the body looks like it stays in the current scrolling position while it is fixed.
Furthermore, the solution uses the CSS top of the body as a temporary reference, so that we can retrieve the scrolling position by the attribute when we want to make the body scrollable again. (Notice you have to multiple the position you get to -1 to make it positive)