When modal is shown I add a class with overflow: hodden to body tag. So content behind the modal is not scrolling. Everything is good.
BUT
If the original page is big enough to have a scrollbar, then I can see ugly shift of the page to the right, when I open the modal. I find out the reason of such behavior. Overflow: hidden causes scrollbar to dissapear, so that's why it is ~10px shift to the right.
My question is how to fix this. In fact, I need to apply overflow:hidden but still have scrollbar shown.
(function() {
let _scrollPosition;
function preventScroll(e) {
e.preventDefault();
window.scroll(..._scrollPosition);
}
function lock() {
_scrollPosition = [window.pageXOffset, window.pageYOffset];
$(window).on('scroll touchmove', preventScroll);
}
function unlock() {
$(window).off('scroll touchmove', preventScroll);
}
return {
lock,
unlock
};
})();
You can just lock the scrolling position as soon as you open the modal with this code.
Related
I am using a fixed navbar with bootstrap 4. When using fixed-top navbar, content below it is hidden by the navbar because its position is fixed. I had to give padding-top: 65px; on the body, to make the content appear below the navbar.
I have internal links so clicking on a navbar anchor positions the page on the section relative to it. However, because I used the padding-top trick, the position is 65px below the top of the section. Is there a way to solve it so that position returns to the top of the section?
You should not add from the first " fixed-nav" class. you can add this in scroll event of jquery.
$(window).on('scroll', function () {
var scrollTop = 20;
if ($(window).scrollTop() >= scrollTop) {
$('nav').addClass("fixed-nav");
}
if ($(window).scrollTop() < scrollTop) {
$('nav').removeClass('fixed-nav');
}
});
this add fixed-nav in user scroll down in your site.
On click of a link, I set the padding top of the body to 0, and on hash change event after the page positions on the section relative to the inline link, I set back the padding to 65.
$('.nav-link').click(function () {
$('body').css('padding-top', '0');
});
window.onhashchange = function () {
$('body').css('padding-top', '65px');
};
$(document).ready(function() {
var top_pad = $('.your_headerelem').height();
$('.first-emem-after-header').css({'padding-top':+top_pad+'px'});
$(window).resize(function(){
var top_pad = $('.your_headerelem').height();
$('.first-emem-after-header').css({'padding-top':top_pad+'px'});
}) ;
}) ;
This will make your first element after header, lie below header.
I am trying to add animation to my dropdown-menu ... It is working perfectly on large screens but on small phones and tablets (when toggle navigation appears) there is a problem: when it should slide up the drop-down list disappears without sliding up properly as you can see in my
DEMO . Please try to open in it in small browser size and click on "services" to slide down and up .
I have tried another solution using jquery:
$(function () {
$('.dropdown').on('show.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function (e) {
e.preventDefault();
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function () {
$('.dropdown').removeClass('open');
$('.dropdown').find('.dropdown-toggle').attr('aria-expanded', 'false');
});
});
});
But as you can see in this Bootply DEMO (resize your browser to a phone screen size), when sliding down, at the end there is a gray space that appears then disappears directly.
What I really need is a normal working slide animation down and up. Any suggestions of how can I adjust at least one of both methods?
I find the solution , you should remove the scrollbar from the navbar.
so add this simple code to your css file :
.navbar-collapse {
overflow: hidden;
}
you can take a look at the Demo here : https://jsfiddle.net/u9pvtLpw/2/
I have the following css:
html, body {background:#ebeced;min-height:100%;font-family:Helvetica}
body {overflow-y:scroll; cursor:default;}
And I add the .fixed class dynamically to the body when I open a modal window so that scrolling can't take place.
.fixed #container-wrapper {position:fixed;left:0;width:100%;}
I also have a fixed nav bar and then the content. The content is inside container-wrapper:
<body>
<nav></nav>
<div id="container-wrapper">
<!-- all website content -->
</div>
</body>
Problem
If I have scrolled down through the content at all and then open the modal, the content jumps right back to the top. I thought this may be an issue with event.preventDefault but I know now that it isn't to do with this. It's connected to the adding of the .fixed class that causes the issue.
JSFIDDLE
https://jsfiddle.net/w9w9hthy/1/ - scroll down to the button and click the button. This will add a .fixed class and the content will "reset" to the top. How can I stop this "reset" effect?
Instead of making container-wrapper fixed you can stop scrolling from happening by making the body overflow: hidden and removing it when you want scrolling to continue.
Fiddle: https://jsfiddle.net/w9w9hthy/2/
.fixed {
overflow: hidden;
}
Demo: https://jsfiddle.net/w9w9hthy/5/
From my jQuery popup project: https://github.com/seahorsepip/jPopup
//Freeze page content scrolling
function freeze() {
if($("html").css("position") != "fixed") {
var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
if(window.innerWidth > $("html").width()) {
$("html").css("overflow-y", "scroll");
}
$("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
}
}
//Unfreeze page content scrolling
function unfreeze() {
if($("html").css("position") == "fixed") {
$("html").css("position", "static");
$("html, body").scrollTop(-parseInt($("html").css("top")));
$("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
}
}
This code takes, width, height, scrollbar and pagejump issues into consideration.
Possible issues resolved with above code:
width, when setting position fixed the html element width can be smaller then 100%
height, same as above
scrollbar, when setting position fixed the page content no longer has a scrollbar even when it had a scrollbar before resulting in a horizontal pagejump
pagejump, when setting position fixed the page scrollTop is no longer effective resulting in a vertical pagejump
If anyone has any improvements to above page freeze/unfreeze code let me know so I can add those improvements to my project.
Edit:
Just tested above code on some random pages and found some issues on some sites due to the use of body or html as main scroll content, I resolved those issues in above code and will push them to the github project.
I have a main div (parent) with a input (child) and 2 other child div (clickable).
I want to capture focus out event for the main div - not when input or other 2 clickable div are clicked or focused. I have set up an event handler using jQuery to capture focusin focusout events on all the elements.
What I see is when I click on the input:
first input is focused
then the main div.
If I click on any other clickable divs
event fires first focusout for input
then main div and then other div gets focus in and main div get focusin.
I don't want main div to loose focus when clicked on other clickable divs.
How can I achieve this? I want to validate the input on lose focus but not when clicked other divs.
So far this is what I have : Fiddle
HTML :
<div id="main">
<input id="i" type="text" />
<div id="Div2" class="icons" style="background-color:blue; right: 25px;" onclick="log('Clear Clicked');"></div>
<div id="Div1" class="icons" style="background-color:red;" onclick="log('DD Clicked');"></div>
</div>
CSS :
* {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
#main {
top: 50px;
left: 200px;
position: absolute;
border: 1px solid #00bfff;
width: 250px;
height: 27px;
}
input {
border: none;
width: 248px;
height: 25px;
position: absolute;
z-index: 200;
}
.icons {
text-align:center;
border:1px solid blue;
height: 23px;
width: 23px;
position: absolute;
top: 2px;
right: 2px;
z-index: 99999999999999999999999;
background-position: center;
background-repeat: no-repeat;
}
jQuery :
$("#main").focusin(function () {
log("Main div got focused");
});
$("#i").focusin(function () {
log("input got focused");
});
$("#Div2").focusin(function () {
log("dropdown div got focused");
});
$("#Div1").focusin(function () {
log("clear div got focused");
});
$("#main").focusout(function () {
log("Main div lost focused");
});
$("#i").focusout(function () {
log("input lost focused");
});
$("#Div2").focusout(function () {
log("dropdown div lost focused");
});
$("#Div1").focusout(function () {
log("clear div lost focused");
});
function log(msg) {
//window.console.log(msg);
$("body").append("<p>" + msg + "</p>");
}
Any help or guidance appreciated
Here is a best way to solve, because I had the same problem too ^_^
There is a attr of event: "relatedTarget"
relatedTarget will provide the next element of this event
So, if next element is not your box OR anything inside your box, trigger focus out.
But FIRST you have to let your <div> element focusable, you have to add tabindex='-1' on div like this
<div id="main" tabindex='-1'>
the script is short:
$("#main, #main *").blur(function(e){
if(!$(e.relatedTarget).is("#main, #main *")){
//focus out.
}
});
The focus will lost and get inside #main, but you can do anything when the focus is lost from #main area.
This is a little different to your request, but I guess this may be what you want.
If this is, the code would be very clean.
Based on this accepted answer Is there a way to use event.preventDefault with focusOut? If not, why?
$(document).on('mousedown', function (event) {
target = event.target;
main = document.getElementById("main");
input = document.getElementById("i");
if (target == input) return true;
parent = event.target.parentNode;
if (parent == main) {
event.preventDefault(); //prevent default DOM action
event.stopPropagation(); //stop bubbling
return false; // return
}
});
OK, so it looks like you are constructing some sort of input widget. I see that the #main div is the outer container of the widget, the input is for entering text, and then you have two other divs serving as buttons or something. You want to validate the value of the input when the user tries to exit the widget, and you are trying to capture this event by listening for focusout on #main. This won't work because a div isn't an element that can receive focus. See the answer here for more.
I can prove to you that your div isn't focusable with a little experiment:
If you put e.stopPropagation() in both your focusin and focusout listeners for your input, you'll see that your main div is never actually focused or unfocused itself; it was just receiving the focusin and focusup events as they bubbled up the DOM tree from your input.
So, this means we have to tackle your problem from another angle.
Let's describe what it means for your widget to lose focus with a short user story:
User clicks on the input/#main/#Div1/#Div2 -- widget gains focus
User clicks on input (if he/she hasn't already) and types some text -- widget focus is not lost
User clicks somewhere on #main -- widget focus is not lost
User clicks #Div1 and then #Div2 -- widget focus is not lost
User clicks somewhere else on the page -- widget focus is lost -> validation runs
We now know exactly which events during which states should cause validation to run.
First, let's keep track of the 'focus' state of the widget with a boolean variable:
var isFocused = false;
The widget starts out in the unfocused state and becomes focused when there is a click anywhere in #main or its children OR when the input is somehow focused (could be via tabbed-into with the keyboard):
$("#main").on('click',function(){
isFocused = true;
});
$("#i").on('focus',function(){
isFocused = true;
});
The only time the widget becomes unfocused is when a) it's focused and b) the user clicks somewhere else on the page:
$(document).on('click',function(){
if(isFocused){
isFocused = false;
//kick-off the validation check!
}
});
But since all events bubble-up the DOM tree by default, multiple clicks within #main will bubble up to document.body and trigger a validation check. To prevent this, we call stopPropagation on the click event in the #main's click handler:
$("#main").on('click',function(e){
isFocused = true;
e.stopPropagation();
});
That's it!
I hope I was correct about what you're after.
Here's a working fiddle with above code.
Here is simple way to do it (As far as i understood)
$('#Div1').click(function(){
log('Clear Clicked');
//$('#main').focusin();
$('#i').focus();
});
$('#Div2').click(function(){
log('DD Clicked');
//$('#main').focusin();
$('#i').focus();
});
here is fiddle
The other way to workaround is to add a small setTimeout before running focusout handler.
You can easily whitelist a list of elements to exclude with and clearTimeout when they get focusin.
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}