I am making a side navigation that pops out and that works fine, but the issue is when that pane appears (using translate3d), when scrolling using an iPhone or emulation mode in Chrome, it will scroll the <body> behind it, it is as if my finger presses through the layer.
On desktop browsers at mobile width it works exactly as intended. The navigation appears, scrolling is locked to the navigation pane and the background elements are not scrolled.
I feel this may be due to translate3d and how it interacts with z-index? But that's a poorly educated guess.
Here's what I am working with:
.side-nav--fixed {
position: fixed;
width: 230px;
#include media-query(palm) {
width: 100% !important;
position: fixed !important;
top: 125px; right: 0; bottom: 0; left: 0;
z-index: 5555;
background-color: #fff;
overflow-y: scroll;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
#include transform(translate3d(-100%, 0, 0));
#include single-transition(transform 1s ease-out);
#extend %ui-shadow;
&::-webkit-scrollbar {
display: none;
}
&.animate {
#include transform(translate3d(0%, 0, 0));
#include single-transition(transform 1s ease-out);
}
}
}
.no-scroll {
position: fixed;
}
$('body').on('click', '.js-side-nav-toggle', function(ev) {
$('html, body').toggleClass('no-scroll');
});
To quickly summarise: I bring in a layer using translate3d, I then want to restrict scrolling and ontouchmove events to that layer and all elements behind it to be ignored.
Thank you for your time.
Edit:
I managed to fix this by adding position: fixed; to .no-scroll which was applied to html and body when the menu toggle was clicked. I updated my code above with working code.
I managed to fix this by adding position: fixed; to .no-scroll which was applied to html and body when the menu toggle was clicked. I updated my code above with working code.
.side-nav--fixed {
position: fixed;
width: 230px;
#include media-query(palm) {
width: 100% !important;
position: fixed !important;
top: 125px; right: 0; bottom: 0; left: 0;
z-index: 5555;
background-color: #fff;
overflow-y: scroll;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
#include transform(translate3d(-100%, 0, 0));
#include single-transition(transform 1s ease-out);
#extend %ui-shadow;
&::-webkit-scrollbar {
display: none;
}
&.animate {
#include transform(translate3d(0%, 0, 0));
#include single-transition(transform 1s ease-out);
}
}
}
.no-scroll {
position: fixed;
}
$('body').on('click', '.js-side-nav-toggle', function(ev) {
$('html, body').toggleClass('no-scroll');
});
Related
I have a hamburger button that opens up a mobile nav. When it closed it scrolls with the page, but when open I need to it scroll with the mobile-nav but it have sticky property still. The button appears inside dropdown menu on mobile version and must be on the top of it after scrolling.
`
.menu-btn--mobile {
position: relative;
display: inline-block;
z-index: 5;
&:after {
#include icon-base;
#include icon('hamburger', rem-calc(36), $color-white);
position: relative;
background-color: $color-maroon-light;
background-size: rem-calc(15);
content: '';
}
}
&.menu-hide--mobile {
.mobile-menu {
right: -100%;
}
}
&.menu-show--mobile {
.menu-btn--mobile {
&:after {
#include icon-base;
#include icon('hamburger', rem-calc(36), $color-white);
background-color: $color-red;
background-size: rem-calc(15);
content: '';
}
}
}
`
I've changed css but it still have the same property as on desktop version.
why animation can be reusable after im changing elemets display property with js
can some one explain i couldnt find any answer for this
can someone explain me this
my codes downbelow
`
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
aside {
display: none;
position: relative;
left: -100%;
height: 100vh;
background-color: red;
width: 20%;
animation: openit 800ms ease-in forwards ;
}
#keyframes openit {
to{
left: 0;
}
}
aside a {
display: block;
}
.open {
position: absolute;
z-index: -1;
}
</style>
`
I found this:
When we want to use transition for display:none to display:block, transition properties do not work. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not work.
form this link. I hope this help.
I made modal in React and it's working fine, but I really want to add one small feature. When I'm clicking on button, class of modal is changing and modal is becoming visible, but this happens immediately and I want to add some transition.
My code:
In parent method toggling class and passing props:
toggleModal() {
this.setState({ visibleModal: !this.state.visibleModal });
}
<RegisterModal
visible={this.state.visibleModal}
toggleModal={this.toggleModal}
/>
Children component:
<div className={`modal ${props.visible ? 'modal--visible' : 'modal--invisible'}`}>
My CSS:
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
}
.modal--invisible {
display: none;
}
.modal--visible {
display: flex;
}
Can someone help me?
Possibly related
The display property can't change smoothly, it only has fixed values. It jumps instantly from one to the next. You need to use transition and something like opacity to get a nice fade in.
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
transition: opacity .5s; /* Opacity will fade smoothly */
}
.modal--invisible {
opacity: 0;
pointer-events: none; /* Makes the modal unclickable */
}
.modal--visible {
opacity: 1; /* Modal is visible */
pointer-events: initial; /* Modal is clickable */
}
I have been created simple webpage using html5,css and js.
I have header,menu,slide show,main-content and footer. and also using sticky side-bar
After all coding, slideshow display at the middle of main content and main-content also hidden.
css code for slideshow,main-content and footer:
#wowslider-container1 {
position: absolute !important;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 60%;
opacity: 1;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* Main ................ */
main {
margin: 20px auto;
max-width: 940px;
}
/* aside */
aside {
float: left;
max-width: 220px;
}
.inside {
background-color: #000;
padding: 10px;
}
#sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}
/* main content */
.main_content {
float: right;
max-width: 700px;
color:#fff;
}
/* Footer .............. */
footer {
background-color: #999;
height: 300px;
width: 100%;
}
My page look like this: http://s14.postimg.org/jw2uimt9t/Untitled_1_copy.png
I have lots of file, how to fix my problem, there anyone help me to fix this.
Any help would be highly appreciated. Thanks in advance.
I guess i understood what you need,
most of the div containers that you use don't have css size properties like width and height, but most importantly they don't have a position values in order to fit a html layout structure.
try using position:relative; first on the css for the most important elements of the page.
start first with this default css parameters:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
then add to your slideshow css main class this
*your_slideshow_class_name_here {
position: relative;
}
after that, things become easier to solve
I am working on a pure oocss approach to creating the charms as found in Windows 8. I have the Dock class finished, but am having problems with figuring out how to "expand" the charm when the mouse is moved over a docked area. I know there are ways to hide content but have the browser respond to the :hover event of Charm. If you have any ideas, let me know.
Dock
Docks content to the edge of the screen.
.dock
{
position: fixed;
height: auto;
width: auto;
}
.dock--top
{
width: 100%;
top: 0;
}
.dock--bottom
{
width: 100%;
bottom: 0;
}
.dock--left
{
height: 100%;
width: auto;
left: 0;
}
.dock--right
{
height: 100%;
right: 0;
}
Charm
Island containing the content.
.charm
{
padding: 24px;
}
.charm:hover
{
}
Html
<div class="charm dock dock--right">
</div>
I tried padding it and setting the width to 1px but had no luck. On my original plan I would have applied the background-color when the move moved over it so it did not render a line going down the side of the screen.
This is as close as I have gotten but its ugly:
.charm__body
{
width: 0;
visibility: collapse;
}
.charm:hover
{
background: blue;
}
.charm:hover .charm__body
{
width: auto;
visibility: visible;
}
You can make a transparent div, positioned absolutely, and make it work as a hover trigger.