As soon as you open my website, you are greeted with a T&C's and GDPR modal box see here. However, the background still scrolls when this is open, I have tried code to stop the scrolling, but that prevents scrolling across the whole website. Any help is greatly appreciated.
OUR WEBSITE
html,body.modal-open {
overflow: hidden;
}
.allowScroll {
overflow: scroll !important;
}
jQuery(function($) {
$(".termsagree").on("click", function() {
$("html, body.model-open").addClass("allowScroll");
});
});
EDIT Once you click agree the pop up won't show again unless you reload the website in another incognito page!
I couldn't find the css selector "modal-open" on your website but maybe something like this would work?
Replace your example code with this.
jQuery:
jQuery(document).ready(function ($) {
if($('#tlight').length){
$('body').css('overflow', 'hidden');
}
});
From the looks of it, once you click the agree button the page reloads and removes the '#tlight' element from the DOM. So what this will do is check if it exists on page load, and if it does set body overflow to hidden. You may need to add "important" to it depending on your current CSS.
Related
Whenever I hover over my social links on my website, they shift to the left. This started happening after I got the scrollToggle function in jQuery to work, so I feel like it might have something to do with that. Does anyone know how I can make it so they can stay still when hovered over? Thanks in advance.
jQuery code:
$(document).ready(function(){
$("#slide").hide();
$("#contact").click(function() {
$(".socials").show();
$("#slide").slideToggle("slow");
});
});
Rest of the code/website example (Click Contact, and then hover over any of the social links. You should notice that it shifts over to the left.)
https://jsfiddle.net/Lc2ob45x/
Remove the following statement from your CSS:
div:hover {
width: 300px;
}
Working version.
On our mobile site, when clicking the hamburger icon in the top right I want the drop-down menu to appear and be scrollable, without the background scrolling. I have written javascript to set the body to fixed when you click the menu icon, however, this results in the website jumping to the top of the page. This is not what I want, I would like for it so that when the user clicks on the menu button, the background page stays where it is and does not jump to the top.
Below is the code that I have already tried for this.
Javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("body").toggleClass("noScroll");
});
});
CSS
.noScroll {
position: fixed;
}
EDIT Here is the website: http://s2br5s5r3.gb-02.live-paas.net
href="#" makes page going top, give correctly url ex: href="https://www.google.com/" then the problem of going top will be solved.
css
.noScroll {
overflow: hidden;
/* position: fixed */
}
javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
then the <body> will be unscrollable.
first of all remove the css position fixed from the class no-scroll. That's what is causing the page to jump on top when you click the menu button. After you open the menu it is scrollable as it should, i assume what you want is to prevent the page behind the open menu to be scrolled when the menu is open. Ypu can achieve this with javascript event listeners like so:
EventTarget.addEventListener('scroll', noscroll);
instead of EventTarget give the body an id and use the event listener to that when the user clicks on the element, but then when they close the menu you should remove the event listener with:
EventTarget.removeEventListener()
I hope this helps you
Keep in mind though that you have to separate the content of the page from the menu, because if you add the no scroll to the body that will apply also to the menu as long as it is a child of the body
I have a fixed box at the footer of a product page, which is working fine now with this fix applied:
html, body {
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100%;
}
As it fixed the problem on iPhone where you focused in the QTY input field and it pulled it down to the bottom of the page; that fix above now sorted that and works perfect!
However, the accordion tabs on the page dont work a expected, if I remove that fix for the other issue they work but with they don't.
I think it might be easier to do a fix for the scrollto tab as I have searched and read about the fix focus issue; what it does when you click a tab now is just goes to the top of the page and does not scroll to the active tab. Here is the function:
function scrollToTab(x) {
$("html, body").animate({
scrollTop: $(x).offset().top - 10
}, scrollSpeed);
}
I am sure it is the html, body its trying to animate and scroll so anyone know what I can maybe change to this to get both working?
Maybe only set those styles / fix on html, body when input focused and remove when not? that might work.
I've got some javascript which handles opening modal popups on my website, and it also sets the overflow-y property on the <html> element to hidden. In Chrome and IE this works as expected - the scrollbar hides, and the page behind the modal popup remains in the same scroll position. When the popup is closed, overflow-y is set to scroll and the page is in the same state and position as before.
However in Firefox, as soon as overflow-y is changed to hidden the page scroll position jumps to the very top, and so when the popup is closed the view has changed for the user - not ideal.
The problem can be seen on this jsfiddle
Is there any solution for this behaviour?
Don't use overflow: hidden on html, only on body.
I had the same problem but fixed it by removing html.
Instead :
$('body, html').css('overflow', 'hidden');
Do :
$('body').css('overflow', 'hidden');
I had the same issue
after checking it in the inspector window, I noticed that in the reset CSS, HTML is set to
HTML {
overflow-y: scroll;
}
you can fix this by setting it to
HTML {
overflow-y: initial;
}
If you don't want to touch reset CSS or just comment it
plugin and code is absolutely fine
change modal position from absolute to fixed:
#mymodal {
position: fixed
}
There are lots of bugs in the different browsers and the functionality is all over the place so be careful modifying styles on body and html tags.
To solve this issue i had to wrap the body's content into its own element and apply the scrolling restriction on it:
var $content = $('<div/>').append($body.contents()).appendTo($body);
$content.css('overflow-y', 'hidden');
This is the only way i've been able to get this working consistently across different browsers and devices.
I just encountered this problem. My fix was
/**
* Store the scroll top position as applying overflow:hidden to the body makes it jump to 0
* #type int
*/
var scrollTop;
$(selecor).unbind('click.openmenu').on('click.openmenu', function (e) {
// Stuff...
scrollTop = $('body').scrollTop() || $('html').scrollTop();
$('body,html').css({overflow: 'hidden'});
});
$(selector).unbind('click.closemenu').on('click.closemenu', function (e) {
// Stuff
$('body,html').css({overflow: 'initial'}).scrollTop(scrollTop);
});
This however doesn't solve the problem of what happens if a user resize the viewport.
Edit: I just saw your code and you used a link with href="#". That is most likely the cause. I'd suggest removing the href property or use a button for it.
You should consider that this might not be caused by the css itself.
In my case I opened my popup with a link: open popup
So what actually caused the jump to the top was the "#" in the href property of the link.
I removed it and added a noscroll class to my html and body tag:
.noscroll {
overflow: hidden;
}
Keeping the body height 100% from the beginning solved the problem for me.
body{
height:100vh;
overflow:auto;
}
body.with-modal{
overflow:hidden;
}
Use body tag instead of html.
JS Fiddle :- http://jsfiddle.net/SBLgJ/6/
JS Change:-
$(document).ready(function() {
$('#middle a').on('click', function(e) {
e.preventDefault();
$('body').css('overflow-y', 'hidden');
});
});
CSS Change:-
body {
overflow-y:scroll;
}
There is a reported issue for such behavior. (https://github.com/necolas/normalize.css/issues/71)
I have the code of go to top sroll function. The button that am fixed in my home page is showing when am redirecting home page i dont want that button in top of my home page i want that button while scrolling down wot i do?
i think i didn't get your question right but maybe you need to try "position: fixed" for the tag?! is that what you are looking for?
edit:
set your top-button to invisible:
#top {
visibility: hidden;
}
when the user scrolls you activate it!
$(window).scroll(function () {
$('#top').css("visibility", "visible");
});
when the top-button is clicked you simply hide it again:
$('#top').click(function () {
$('#top').css("visibility", "hidden");
});