I'm using a Bootstrap popover for a dynamic list that can be several pages long. I simply added a overflow: scroll to it and it works, however if the page is longer than the list, it continues scrolling past the popover.
Is it possible to disable scrolling of the background content while the popover is open?
In other words can you have an absolute positioned div scroll while disabling scrolling of the background content?
UPDATE: Fixed the issue based on both answers
$('#message-preview-trigger').on('show.bs.popover', function () {
$('body').css('overflow', 'hidden');
});
$('#message-preview-trigger').on('hide.bs.popover', function () {
$('body').css('overflow', 'visible');
})
Set both overflow: hidden; to body element and overflow: auto; to the modal dialog when the modal is open.
To be more clear we'd need to see your code.
I've made a pretty simple example ;
Scroll
Your popup should be in another div:
<div id="shadow">
<div id="popup">
<a id='close' href="#">Close</a>
</div>
Then trying adding these CSS codes on the root div:
#shadow{
display: none;
position: fixed;
top:0;
bottom: 0;
width: 100%;
height:100%;
background-color: rgba(0,0,0,0.6);
}
**Then there's the little JS trick : **
$('#open').click(function(e){
e.preventDefault()
$('body').width($('body').width());
$('body').css('overflow', 'hidden');
$('#shadow').css('display', 'block');
})
$('#close').click(function(e){
e.preventDefault()
$('body, #shadow').removeAttr('style')
})
Hope it Helps..... :)
Related
I am pretty new to coding and javascript and I have been trying to create a navigation block that slides in from the left when I click the logo in the top left-hand corner.
I seem to have got the sliding in and out element of the navigation working fine however, if I scroll further down the page and try to open the nav again, the browser window jumps back up to the top of the page rather than staying where it is. Weirdly it doesn't do it when I close the nav, just open it.
This is the script I am using at the top of my HTML to control the nav opening and closing:
<script>
function openNav() {
document.getElementById("expanded-menu").style.display = "block";
}
function closeNav() {
document.getElementById("expanded-menu").style.display = "none";
}
</script>
and this is the CSS styling the expanding nav:
.expanded-menu {
background-color: #f3f3f3;
height: 100vh;
position: fixed;
display: none;
width: 230px;
text-align: center;
z-index: 100;
overflow-x: hidden;
animation: animateleft 0.4s;
top: 0;
left: 0;
}
The animation effect I have on there doesn't seem to be working either. It just jumps out rather than sliding. But I imagine I need to open another question for that.
Thanks in advance!
EDIT: Here is the associated HTML too.
<div class="expanded-menu" id="expanded-menu">
<!-- MENU -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
<img src="images/Backarrow.png">
</a>
and...
<div class="contracted-menu">
<a href="#" onclick="openNav()">
<img src="images/nav icons/Cuttsy.png" class="cuttsy-small" alt="Cuttsy logo">
</a>
you need to disable the default action, you can use the preventDefault method demonstrated below or using javascript:void(0), like you use in your example.
You just used working link to "#". Normally if used with some existing ID it would scroll to it, but if empty it will just scroll to top.
function foo(e) {
e.preventDefault()
console.log('foo');
}
xxx
Your code works. Make sure you are triggering the functions correctly.
For example with a link a with the href attribute linking to a javascript function.
Open<br>
Close<br>
<div id="expanded-menu" class="expanded-menu">
My menu.
</div>
Some Content.
See this codepen for a working version.
Animation
Consider using css3 transitions as a way of displaying animations.
transition: left 1s;
Now, transition between display:none and display:block won't achieve anything, because there are no inbetween states. Instead I would suggest sliding the menu in with the use of the left offset.
You can hide a menu with the width of 200px with a left offset of -200px. (Left, top, right, bottom may be negative.) Transitioning the left offset to 0px will look like a transition.
See a working example in this codepen.
CSS
width: 230px;
left: -230px;
transition: left 1s;
JS
function openNav() {
document.getElementById("expanded-menu").style.left = "0px";
}
function closeNav() {
document.getElementById("expanded-menu").style.left = "-230px";
}
On the website in the link below, the Logo stays on the bottom of the page when the window ist resized and the content beneath isn't visable till you scroll the site up or down. This works on mobile devices too.
How can I manage it to position a DIV to the bottom of the browserwindow so that the following DIV is hidden until you begin to scroll?
Here is a Link of a Site that shows exactly what I would like to reprogramm.
Please visit this Site as an example
Thanks in advance
CSS:
#element {
display: none;
/* and other CSS */
}
jQuery:
$(document).on("scroll", function () {
if ($(this).scrollTop() > 100) { /* change the integer to whatever you need */
$("#element").fadeIn("slow");
} else {
$("#element").fadeOut("slow");
}
});
First, the element has fixed positioning and is hidden:
#dynamic-to-top {
display: none;
overflow: hidden;
width: auto;
z-index: 90;
position: fixed;
bottom: 20px;
right: 20px;
top: auto;
left: auto;
...
Then, a jQuery function listens for the scroll event. It appears that a calculation is done to see whether the page has scrolled downward past a certain point. Many examples of this behavior exist on SO and the web.
I am using Twitter Bootstrap's modal window, and I noticed when you scroll, the modal popup stays fixed while the background page moves. For demo, you can click on "Launch demo modal" button in the following page:
http://getbootstrap.com/2.3.2/javascript.html#modals
How do I avoid that and let scroll event controls the modal window instead? The options Bootstrap offers does not seem to include that.
The modal pop up is a <div> with position: fixed, and that is why it stays fixed when I scroll. However I can't set it to other values since it needs to stay popped up. Also i figured that if I set <body>'s style to overflow:hidden, the scroll bar will be hidden. But that is not what I want.
$('.modal')
.on('shown', function(){
console.log('show');
$('body').css({overflow: 'hidden'});
})
.on('hidden', function(){
$('body').css({overflow: ''});
});
You can add overflow: hidden on body.modal-open as per this answer
I solve the shift with
body{
position: fixed;
left: 0px;
right: 0px;
/*margin: auto;*/
}
I did something like this to initially hide the body scrollbar, and then show it when a link is clicked:
$('body').css('overflow', 'hidden');
$('#site').click(function(e) {
$('#wrapper').remove();
$('body').css('overflow', 'scroll');
return false;
});
At first, it does hide the scrollbar and just shows a scrollbar for the overlay (absolutely positioned div (#wrapper)) but when I click on the link (#site) to show the scrollbar again (and remove the overlay), it now shows two scrollbars: one is working, the other is disabled.
HTML:
<div id="wrapper">
--- some content ----
</div>
<div>
--- rest of the website ---
</div>
CSS:
#wrapper {
background-color: #CCC;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
height: 800px;
}
What has gone wrong?
Found a solution to my problem. I just needed to add:
$('html').css('overflow', 'hidden');
You also can use this, in case something from a theme or style is causing the second bar
html {
overflow-x: initial !important;
}
In my case I tried
$('html').css('overflow', 'hidden');
which was removing the two sidebar but I was unable to scroll down to footer.
I used:
$('html').css('overflow-x', 'initial');
Which is working perfectly, shows only one scrollbar vertically and it is scrollable to all content at the bottom
None of the solutions above worked for me. I tried adding overflow-y: hidden; in html and body. Finally, it worked when I added it to what I identified to be a problematic <div>. I found the problem by using Inspect Elements: I highlighted the additional scrollbar by using the "select" tool, and it showed me to which element it belonged - in my case it was a <div> called .main. Reference the screenshot below.
By two scrollbars do you mean a vertical and horizontal scrollbar? If it is, use overflow:auto instead of scroll
http://jsfiddle.net/DmqbU/2/
This will effectively only show scrollbar when needed (if horizontal content is wider than width or vertical content is taller than height)
This solved the problem for me:
body{overflow-y:auto}
Use overflow-x and overflow-y to manage horisontal and vertical scrollbars. Just set overflow-x: none; to stop showing horisontal bar.
add these lines to your style.css code:
html {
height:100%;
width:100%;
margin:0%;
padding:0%;
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
So, I have a particularly unique goal I wish to achieve with CSS, HTML and jQuery. Basically, I have a page element that when I mouse over it, I want scrolling to be disabled. I am currently achieving this by setting the body's overflow property to "hidden." However, the disappearing scrollbars means that content is shifting to the right to fill the void created by the disappearing vertical scroll bar. Is there away to make the page behave as overflow:hidden but still display scrollbar placeholders?
You could do it by having a div within a div, such that the outer div is scrollable (auto) and then resize the inner div on mouseover to be exactly the right size.
So by example...
HTML:
<div id="outerTest" >
<div id="innerTest" >
...content goes here...
</div>
</div>
CSS:
#outerTest {
width: 100px;
height: 100px;
overflow: scroll;
}
#innerTest {
overflow: hidden;
}
jQuery:
$("#outerTest").hover(function() {
$("#innerTest").css({width: "100%", height: "100%"});
}, function() {
$("#innerTest").css({width: "auto", height: "auto"});
});
Alternatively, you could also implement a jQuery-based scroll bar. jScrollPane