I have a mobile version of a page. The content is enough that user has to scroll on his mobile device. When clicking an icon the mobile navigation bar slides in from left side and body gets overflow: hidden; so content does not scroll anymore. Is there a way to make the navigation bar 100% height of window (instead of document) so that user can scroll inside navigation bar furthermore?
At the moment slide-in and height of navigation is controlled by Javascript, but I'm looking for a CSS solution. Can anyone help?
// CSS
#mobile_nav {
width: 300px;
position: fixed;
top: 0;
left: -300px;
z-index: 10000;
overflow: auto;
}
// JS
jQuery("#mobile_button").on("click", function() {
jQuery("#mobile_nav")
.css({ height: jQuery(window).height() });
.stop(true)
.animate({ left: 0 })
;
jQuery("body").css({ overflow: "hidden" });
});
You could use Viewport units for that like this:
height: 100vh;
You could check the browser support for this css property here.
Related
You are my last hope.
I decided to implement an update to the Page of my brothers store. One of the new features I wanted was a (simple^^) parallax background with two layers to create a kind of 3d-feeling while scrolling.
First I got it to work with a little bit of JS, adjusting the position on scroll events with a multiplicator. Then I noticed that the performance of the background is sticky, laggy, stuttering and doesn't really look well in Firefox. As far I could see this was because of the "Asynchronous Panning"-Feature of the browser.
Link to the JS-Version of the page update
So after a little time with the search engine of my choice I saw no option to disable or work around that feature and decided to start working on a CSS-only implementation on that site.
And guess which browser is not able to display everything as wanted? Firefox!
First I stuffed all my content into divs, so that - so my hope - a mutual parent div would enable me to use "height: 100%;" to scale the div's together. That didn't work as the the background was overflowing over my content. The problem was: Because I wanted the background images to repeat on the y-axis AND to move with a slower speed as the content I had to define a specific height of the background divs which is larger than the content height.
I even tried to set the height of the background divs with jQuery by
$(#background).height($(.main_content_container).height());
but the background always just turned out to be too large or too short.
After my idea with the parent div didn't work I started to work with the body and my content container itself to generate perspective. Could this have worked when i would've set all height to 100%? When I set height: 100%; I always got my viewport's height...
What I got now:
Creating the perspective and applying transform with body causing the overflow-y:
body {
overflow-y: auto;
overflow-x: hidden;
perspective: 1px;
width: 100%;
margin-left: 0px;
margin-top: 0px;
position: fixed;
height: 100vh;
transform-style: preserve-3d;
align-items: center;
align-content: center;
align-self: center;
text-align: left;
width: 100vw;
}
#background {
position: fixed;
bottom: 0;
left: 0;
transform: translateZ(-2px) scale(3);
width: 100vw;
background-size: 100vw;
background-image: url(websiteimage.png);
left: 0;
right: 0;
top: 0;
height: 500vh;
min-width: 100vw;
}
#background2 {
position: fixed;
bottom: 0;
left: 0;
transform: translateZ(-3px) scale(4);
background-image: url(websiteimage2.png);
background-size: 100vw;
left: 0;
right: 0;
top: 0;
height: 500vh;
min-width: 100vw;
opacity: 80%;
}
div.main_content_container {
transform: translateZ(0);
height: 100%;
background-color: transparent;
color: Silver;
max-width: 100vw;
width: 70%;
min-height: 100%;
}
In-vivo page (only startpage and only in dark mode is "working" at the moment)
Why does Chrome cut off the bottom of the background divs just as wanted and Firefox just create visible overflow?
Is there any chance to get one of my solutions to work fluent and formatted in Firefox?
I'm puzzling around for days now and thankful for every kind of idea/suggestion.
PS: This is my first post on StackOverflow. I hope I provided enough info and didn't break any rules as this site often helped me out of the hell of amateur webdesign.
PPS: I know my code is kind of a mess after all that puzzling but I'm playing around for days now
For all having the same problem:
I decided to try out several tweaks on my JS-implementation again and reached an improvement by adding
position: fixed;
background-attachment: fixed;
background-position: top;
to the background layers.
I also added a script by keith clark but I'm not sure if it takes any effect:
/*
Firefox super responsive scroll (c) Keith Clark - MIT Licensed
*/
(function(doc) {
console.log("Document executed")
var root = doc.documentElement,
scrollbarWidth, scrollEvent;
// Not ideal, but better than UA sniffing.
if ("MozAppearance" in root.style) {
// determine the vertical scrollbar width
scrollbarWidth = root.clientWidth;
root.style.overflow = "scroll";
scrollbarWidth -= root.clientWidth;
root.style.overflow = "";
// create a synthetic scroll event
scrollEvent = doc.createEvent("UIEvent")
scrollEvent.initEvent("scroll", true, true);
// event dispatcher
function scrollHandler() {
doc.dispatchEvent(scrollEvent)
}
// detect mouse events in the document scrollbar track
doc.addEventListener("mousedown", function(e) {
if (e.clientX > root.clientWidth - scrollbarWidth) {
doc.addEventListener("mousemove", scrollHandler, false);
doc.addEventListener("mouseup", function() {
doc.removeEventListener("mouseup", arguments.callee, false);
doc.removeEventListener("mousemove", scrollHandler, false);
}, false)
}
}, false)
// override mouse wheel behaviour.
doc.addEventListener("DOMMouseScroll", function(e) {
// Don't disable hot key behaviours
if (!e.ctrlKey && !e.shiftKey) {
root.scrollTop += e.detail * 16;
scrollHandler.call(this, e);
e.preventDefault()
}
}, false)
}
})(document);
Still no improvement on iOS Safari and mobile Firefox afaics.
Edit:
Thats the jQuery-function causing the effect here:
$(function() {
$(window).on('scroll', function() {
$('#background').css('background-position-y', $(window).scrollTop() * -.15);
});
});
$(function() {
$(window).on('scroll', function() {
$('#background2').css('background-position-y', $(window).scrollTop() * -.09);
});
});
so I have a pop window that open in the mid of the page when I click a tag, however, the background window always scroll all the way to the top when the popup window display. I want the background page don't scroll all the way up and just stay where is it. Below are by code
HTML
<div class="notSU">
<a (click)="open()">open popup window</a>
</div>
javascript (ts file)
open(){
const window: WindowRef = this.windowService.open({
title: 'My Window',
content: 'My Content!',
width: 450,
height: 200
});
window.result.subscribe((result) => {
if (result instanceof WindowCloseResult) {
console.log('Window was closed!');
}
});
}
CSS
.notSU{
overflow:hidden !important;
}
If your modal window code is located at the top of the page, and the position is set to relative or absolute, that may possibly be why it scrolls to the top. Try giving .notSU these css settings below. position: fixed; positions the element relative to the browser window, vs a parent it might be nestled in.
.notSU {
position: fixed;
z-index: 400;
left: 50%;
top: 50%;
transform: translate(-50% -50%);
max-width: 450px;
max-height: 200px;
width: 100%;
height: 100%;
}
Trying to get this sidebar to be scrollable. Right now you can navigate through it by clicking items within in (using jQuery to animate the margin upon clicking an item), but I'd like to add scrolling functionality as well.
I tried overflow: scroll without success. Any help?
https://codepen.io/Finches/pen/xpXZVW
$('.track-name').click(function() {
//Remove active class from all other track names
$('.track-name').not(this).removeClass('active');
//Add active class on clicked track name
$(this).addClass('active');
var id = $(this).attr("data-id");
var scrollAmount = id * -50;
console.log(scrollAmount);
$('.track-name-inner').animate({ marginTop: scrollAmount }, 300);
});
Not sure why they disappear when I click them but that's OK.
You needed to set an explicit height on the container in order for overflow:scroll to work.
Working codepen:
https://codepen.io/anon/pen/ZvXpva
.track-name-wrapper {
position: absolute;
left: 35px;
top: 50%;
width: 300px;
display: inline-block;
height: 300px;
overflow-y: scroll;
top: 150px;
}
Would it be possible to have a DIV position: fixed, but if the content of that DIV extend beyond the viewing area of the screen then you could still scroll with the window? I've put everything I have thus far in this...
FIDDLE
This code sits inside a media query that gets triggered when the screen hits a max width and/or a max height, but I don't think that code is relevant to my question. This is the bit of code that I believe I need to modify to work correctly:
.expand {
display: block !important;
position: fixed;
-webkit-backface-visibility: hidden;
top: 50px;
left: 0;
background: rgba(31, 73, 125, 0.8);
width: 100%;
z-index: 999;
}
The reason I want this fixed is so the little hamburger menu stays statically in the upper left hand corner of the screen at all times, as at times the site I'm building could be rather lengthy, so I would like viewers to have a little more ease of access.
Thank you!
Yes, you just need to give the div a fixed height and the overflow: auto setting
(Demo)
.expand {
bottom: 0;
overflow: auto;
}
If you don't want to give it a minimum height, a simple (but not supported by old browsers) option would be to use css calc() like so
.expand {
max-height: calc(100% - 50px); // 100% viewport height minus the height of the nav.
}
I would suggest setting a fallback height before in case the browser does not support calc
JavaScript
To achieve what you really want you need javascript. Here it is.
Check to see if the menu is open, if not...
Define a check to see if the contents are larger than the viewport, if so then set bottom: 0px; and overflow: auto and remove scrolling from the body.
If so...
Remove all styles from the menu and the body that were added when opening the menu.
(Demo)
(function($) {
var menu = $('.responsive-menu'), open;
$('.menu-btn').click(function () {
if(!open) {
if(menu.height() > $(window).height()) {
open = true;
menu.css({'bottom': '0px', 'overflow': 'auto'});
document.body.style.overflow = 'hidden';
}
} else {
open = false;
menu.css({'bottom': '', 'overflow': ''});
document.body.style.overflow = '';
}
menu.toggleClass('expand');
});
})(jQuery);
I'm trying to add a map as a full screen background below my Bootstrap NavBar, but at the moment my code is causing the bottom of the map to overflow the page.
I've tried different margins and positions and I cant get it to show the map within the bounds of the page under the navbar. I understand part of the issue is having top:50px but I don't know how to rectify the problem.
My CSS code is as follows:
#map {
/* Set rules to fill background */
height: 100%;
width: 100%;
/* Set up positioning */
position: fixed;
top: 50px;
left: 0;
}
Here is a screen shot of my page, you can see in the bottom right that the map attribution and controls have been cut off:
You're setting your map height as 100%. Try setting a fixed height, instead.
If it's too wide, add this to your CSS files.
.gmnoprint img {
max-width: none;
}
Alternatively, try this if that doesn't work:
html,body {
height: 100%;
width: 100%;
}
.whateveryourmapis {
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-top: -50px;
}
You need wait until div in which is content is displayed because google map chcecks it width wery early - and gets small width (or 0) and dont render.
Try this:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
google.maps.event.trigger(map, 'resize');
});
It is callback - when div for content after click on tab is dispayed THEN 'resize' google map on correct width.
For me this works.