I have a sidebar that looks like this:
Clicking the arrow will collapse the sidebar again. However, I want to auto close the sidebar if I click outside of the sidebar. Would that be possible?
This is my script for toggling the sidebar:
<script type="text/javascript">
$(document).ready(function() {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#dismiss, .overlay').on('click', function() {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
});
$('#sidebarCollapse').on('click', function() {
$('#sidebar').addClass('active');
$('.overlay').addClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
The toggler icon (hamburger) that expands the sidebar:
<div class="col-4 my-auto text-left p-1">
<button type="button" id="sidebarCollapse" class="btn">
<i class="fa fa-bars navigation-icon"></i>
</button>
Some CSS:
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: -250px;
height: 100vh;
z-index: 999;
background: #fbcc34;
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
left: 0;
}
#dismiss {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: #000000;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#dismiss:hover {
background: #fff;
color: #7386d5;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.overlay.active {
display: block;
opacity: 1;
}
#sidebar .sidebar-header {
padding: 20px;
background: #000000;
}
So when I click anywhere outside the sidebar, it should close the sidebar automatically. Do I have to create a separate function to achieve this?
You can do this with code below:
$('body').click(function(event){
if($(event.target).attr('id') !== "sidebar" && $(event.target).attr('id') !== "sidebarCollapse") {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
}
});
Related
I've used getElementsByClassName to change the button text when people click on it, but with the JavaScript String Rule, it will not change the original text but return a new string instead.
The original text of the button is in the span tag, and I use CSS to make it visible by color and z-index. The problem is when the new string replace the original one, it will not be in the span tag which causes it to be hidden under the animation div.
If you don't understand what I mean, please check the code below:
function myFunction() {
document.getElementsByClassName("demo")[0].innerHTML = "Copied";
setTimeout(function(){ document.getElementsByClassName("demo")[0].innerHTML = "Changing Back"; }, 1000);
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
button {
font-family: 'Montserrat';
font-weight: 500;
border-radius: 6px;
}
.ButtonMain {
background-color: #e6e6e6;
position: relative;
overflow: hidden;
border: none;
}
.ButtonMain::before,
.ButtonMain::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ButtonMain span {
position: relative;
color: #fff;
}
.ButtonMain:hover span {
color: #000;
transition: color 0.3s ease 0s;
}
.BlueRevealEffect::before {
content: '';
background: #3a86ff;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.BlueRevealEffect:hover::before {
transform: translate3d(100%,0,0);
}
<button
class="demo ButtonMain BlueRevealEffect Big"
onclick="myFunction()">
<span>Find Out More</span>
</button>
Use a querySelector to get the desired <span>
document.querySelector(".demo span").innerHTML
function myFunction() {
document.querySelector(".demo span").innerHTML = "Copied";
setTimeout(function(){ document.querySelector(".demo span").innerHTML = "Changing Back"; }, 1000);
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
button {
font-family: 'Montserrat';
font-weight: 500;
border-radius: 6px;
}
.ButtonMain {
background-color: #e6e6e6;
position: relative;
overflow: hidden;
border: none;
}
.ButtonMain::before,
.ButtonMain::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ButtonMain span {
position: relative;
color: #fff;
}
.ButtonMain:hover span {
color: #000;
transition: color 0.3s ease 0s;
}
.BlueRevealEffect::before {
content: '';
background: #3a86ff;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.BlueRevealEffect:hover::before {
transform: translate3d(100%,0,0);
}
<button
class="demo ButtonMain BlueRevealEffect Big"
onclick="myFunction()">
<span>Find Out More</span>
</button>
You have span inside of button, so you need to add it when you're changing html:
function myFunction() {
document.getElementsByClassName("demo")[0].innerHTML = "<span>Copied</span>";
setTimeout(function(){ document.getElementsByClassName("demo")[0].innerHTML = "<span>Changing Back</span>"; }, 1000);
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
button {
font-family: 'Montserrat';
font-weight: 500;
border-radius: 6px;
}
.ButtonMain {
background-color: #e6e6e6;
position: relative;
overflow: hidden;
border: none;
}
.ButtonMain::before,
.ButtonMain::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ButtonMain span {
position: relative;
color: #fff;
}
.ButtonMain:hover span {
color: #000;
transition: color 0.3s ease 0s;
}
.BlueRevealEffect::before {
content: '';
background: #3a86ff;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.BlueRevealEffect:hover::before {
transform: translate3d(100%,0,0);
}
<button
class="demo ButtonMain BlueRevealEffect Big"
onclick="myFunction()">
<span>Find Out More</span>
</button>
Please take a look at the following basic example:
html,
body {
height: 100%;
}
body {
margin: 0;
}
.sidebar {
height: 100%;
width: 300px;
background-color: pink;
float: left;
}
.students-list {
height: 100%;
width: 200px;
background-color: skyblue;
float: left;
}
<div class="sidebar">
Students List
</div>
<div class="students-list">
</div>
The pink div is a sidebar with a link. at first the second div which is the skyblue one, should be hidden, and when the user clicks on the link the whole div should slide smoothly from the left (From underneath the pink div).
Do any of you have a tip or can help me out how to achieve the animation?
EDIT: Is it possible to also use another button to slide out even a third div to the right of the second div?
Please check the below code
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
overflow-x: hidden;
}
main {
padding: 40px 25px;
transition: .5s ease-in-out;
width: 100%;
}
nav {
background: #36a;
bottom: 0;
box-shadow: 0 0 5px #666;
height: 100%;
left: -17.5rem;
padding-top: 38px;
position: absolute;
top: 0;
transition: .5s ease-in-out;
width: 17rem;
user-select: none;
}
nav a {
color: #eee;
display: block;
padding: 12px 16px;
transition: .5s;
text-decoration: none;
-webkit-user-drag: none;
}
nav a:hover {
background-color: #39c;
}
#nav-collapse {
padding: 8px 12px;
position: absolute;
right: 0;
top: 0;
}
#nav-expand {
background-color: #333;
color: #eee;
display: block;
left: 0;
top: 0;
padding: 8px 12px;
position: absolute;
text-decoration: none;
transition: .5s linear;
user-select: none;
-webkit-user-drag: none;
}
#nav-expand:focus {
opacity: 0;
}
#nav-expand:focus ~ main {
margin-left: 17rem;
transition-delay: .25s;
}
#nav-expand:focus ~ nav {
left: 0;
transition-delay: .25s;
}
#nav-expand:hover {
background-color: #369;
color: #fff;
}
.icon {
display: inline-block;
background-position: center;
background-repeat: no-repeat;
height: 12px;
width: 12px;
}
.icon-cross {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAPdJREFUGJV1jz9LhWAYxc+9rVZDQ+DcEI0NLU19gxr6Ci3tuvjnA+gggSBt4qzzO90b5FBubkHgEM1CBL5K93Ia8jWv4G88/A7PeQAArusekXwRQpiGYSzQ4/v+Gcn3OI6vMRJf+cdWFXrxs8+bOI5vkCTJLckf/rMtiuJhJJIk67oWAIA0Te8mhR2klGvbtg/UvNlC27ZPSlwquaqqZwA1dmGe56uu676HxPO8U5IfMyuGp+fEt+nTQghzqWnaMYBDdUVKuXYc5yLLsnsAmz5e6Lp+AgCIouiK5FfTNCvLsvanT5dl+Wia5t6wOwiC87GoCMPwUom/I2EVwEqOzwUAAAAASUVORK5CYII=');
}
.icon-menu {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAB5JREFUKJFj/P///38GEgATKYoHKWAc9TQRgGRPAwD0IAv+FT8LPwAAAABJRU5ErkJggg==');
}
<a id="nav-expand" href="#">
<span class="icon icon-menu"></span>
Menu
</a>
<nav>
<a id="nav-collapse" href="#">
<span class="icon icon-cross"></span>
</a>
Link1
Link2
Link3
Link4
</nav>
<main>
<h2>Push Sidebar Exmaple</h2>
<p>Please click on menu button.</p>
</main>
I have a paper-dialog-scrollable of which I would like a shadow to appear at the top when scrolling down the page.
However, if I set an inset box shadow, any internal divs simply go over the top of it even after playing with z-index.
Can anybody help me? Please see this Fiddle to play/edit.
The aim is to have no shadow when content hasn't been scrolled, then fade in when it is.
You need to make one more class boxShadow to define box-shadow on scrolling div.
.container {
width: 400px;
height: 200px;
background: #e5e5e5;
overflow: auto;
}
.content {
text-align: center;
width: 200px;
height: 300px;
background: lightblue;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
z-index:-1;
}
.boxShadow{box-shadow: inset 0 10px 10px -1px rgba(0,0,0,0.6); width:400px; height:20px; background:#e5e5e5;}
<div class="boxShadow"></div>
<div class="container">
<div class="content">
Some text
</div>
</div>
You need to add JQuery:
var header = $(".container");
$(".container").scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 2) {
$(this).addClass("shadow");
} else {
$(this).removeClass("shadow");
}
});
.container {
width: 400px;
height: 200px;
background: #e5e5e5;
overflow: auto;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.container.shadow {
box-shadow: inset 0 10px 10px -1px rgba(0,0,0,0.6);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.content {
text-align: center;
width: 200px;
height: 300px;
background: lightblue;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="content">
Some text
</div>
</div>
Use negative z-index and position: relative on the .content to move it under the .container, and add a .wrapper with the background color, position: relative, and a positive z-index value to provide background under the .content.
var container = document.querySelector('.container');
var containerClasses = container.classList;
container.addEventListener('scroll', function(e) {
if(e.target.scrollTop > 0) {
containerClasses.contains('shadow') || containerClasses.add('shadow');
} else {
containerClasses.remove('shadow');
}
});
.wrapper {
position: relative;
z-index: 0;
display: inline-block;
background: #e5e5e5;
}
.container {
position: relative;
width: 400px;
height: 200px;
overflow: auto;
box-shadow: inset 0 10px 10px -1px rgba(0, 0, 0, 0);
transition: box-shadow 0.3s;
}
.shadow {
box-shadow: inset 0 10px 10px -1px rgba(0, 0, 0, 0.6);
}
.content {
position: relative;
z-index: -1;
text-align: center;
width: 200px;
height: 300px;
background: lightblue;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
}
<div class="wrapper">
<div class="container">
<div class="content">
Some text
</div>
</div>
</div>
If you need the .content to be clickable you can add a wrapper with a pseudo element overlay. The overlay has pointer-events: none, which means that the content under it can be clicked. The only problem is the width of the scrollbar, which is not consistent across browsers:
var wrapperClasses = document.querySelector('.wrapper').classList;
var container = document.querySelector('.container');
container.addEventListener('scroll', function(e) {
if(e.target.scrollTop > 0) {
wrapperClasses.contains('shadow') || wrapperClasses.add('shadow');
} else {
wrapperClasses.remove('shadow');
}
});
.wrapper {
position: relative;
display: inline-block;
background: #e5e5e5;
}
.wrapper::before {
position: absolute;
z-index: 1;
top: 0;
width: calc(100% - 12px); /** the width minus the scrollbar width **/
height: 100%;
box-shadow: inset 0 10px 10px -1px rgba(0, 0, 0, 0.6);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
content: "";
}
.shadow::before {
opacity: 1;
}
.container {
width: 400px;
height: 200px;
overflow: auto;
}
.content {
text-align: center;
width: 200px;
height: 300px;
background: lightblue;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
}
<div class="wrapper">
<div class="container">
<div class="content">
Some text
</div>
</div>
</div>
I am currently building a Rails app. In my app, I show flash message using Bootstrap's CSS on alert. I am not fully using Bootstrap's CSS but adding only related to alert in my app due to overlap in CSS.
CSS for flash works fine for normal desktop screen. It's position is centered and fixed. Image below:
However, when I populate the flash on mobile screen (lesser than 500px), then it is off-centered to left no matter what I do. Image below:
I am confused why this is happening. Just like the descktop screen, I would like to fix the position of flash in mobile screen and always populate on a same place.
Following is the view code I have for the flash
<div id="flash-message-wrapper">
<% flash.each do |type, message| %>
<div class="alert <%= alert_class_for(type) %> alert-dismissible fade in">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<%= message %>
<% end %>
</div>
The CSS for this code is :
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert h4 {
margin-top: 0;
color: inherit;
}
.alert .alert-link {
font-weight: bold;
}
.alert > p,
.alert > ul {
margin-bottom: 0;
}
.alert > p + p {
margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-success hr {
border-top-color: #c9e2b3;
}
.alert-success .alert-link {
color: #2b542c;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-info hr {
border-top-color: #a6e1ec;
}
.alert-info .alert-link {
color: #245269;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-warning hr {
border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
color: #66512c;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.alert-danger hr {
border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
color: #843534;
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.fade.in {
opacity: 1;
}
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
button.close {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
#flash-message-wrapper {
position: fixed;
top: 50px;
left: 50%;
margin-left: -250px;
width: 600px;
}
#media (max-width: 500px) {
#flash-message-wrapper {
position: fixed;
top: 50px;
right: 50%;
margin-right: -250px;
width: 300px;
}
}
Any help would be appreciated!
You need to change the style of #flash-message-wrapper to this
#flash-message-wrapper {
width: 600px;
margin: 10px auto 0 auto;
}
#media (max-width: 500px) {
#flash-message-wrapper {
width: 300px;
margin: 10px auto 0 auto;
}
}
Here is a working fiddle. Hope this helps.
Update
If you want to hover your notification you need to add these following properties to your existing styles.
position: absolute;
left: 0;
right: 0;
Updated fiddle.
So, I have a modal window in a website that I'm devloping.
The modal is made out of pure CSS, to open it and close it I have javascript functions wich change the css elements to make the modal show/hide.
CSS of the modal:
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog > div {
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background:white;
display: table;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.btnEncomendarProduto {
background-color:#D60E12;
color:white;
border-radius:5px;
font-size: 12px;
white-space:normal;
cursor:pointer;
text-transform: initial;
border:1px solid #D60E12;
margin-top:3px;
}
</style>
So the problem is when I have a something that displays too much information on the modal, this happens:
So I think I need a scroll bar on the div inside the modal. How can I do that?
Thank you.
If you have an inner div that expands with the content of the actual modal, you can set the max-height of that div to be something--like 75vh--and add overflow-y: auto to that container, and it will automatically add a scrollbar when the content gets longer than that set max-height.
HTML
<div class="Content">
<p>
This is the page contents.
</p>
</div>
<div class="Modal" id="modal">
<div class="Contents">
<h1>Modal</h1>
<p id="text-area">
[large amounts of content]
</p>
</div>
</div>
CSS
body
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.Content
{
position: relative;
width: 100%;
}
.Modal
{
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3); // light grey background
}
.Modal.Open
{
display: block;
}
.Modal .Contents
{
overflow-y: auto;
display: block;
position: relative;
width: 90%;
margin: 5% auto 0;
max-height: 90vh;
padding: 5px;
background: #fff;
}
Note the .Modal .Contents selector and how it works.
JSFiddle Example: https://jsfiddle.net/nj6r0sjw/