In this stackblitz, I am not able to add animation while closing, I tried it using transform, but it didnt seem to work
HTML
Blocker is used to covering the full screen in a half-transparent mode in mobile devices
const sidebar = document.querySelector('.sidebar');
sidebar.querySelector('.blocker').onclick = hide;
function show() { // swipe right
sidebar.classList.add('visible');
document.body.style.overflow = 'hidden';
}
function hide() { // by blocker click, swipe left, or url change
sidebar.classList.remove('visible');
document.body.style.overflow = '';
}
function toggle() {
sidebar.classList.contains('visible') ? hide() : show();
}
.sidebar {
/* it's a mobile sidebar, blocker and content */
position: fixed;
top: 0;
left: 0;
width: 100vw;
/* to cover the whole screen */
height: 100vh;
padding: 0;
/* to override the default padding */
background: rgba(0, 0, 0, .5);
/* half transparent background */
display: none;
z-index: 99999;
/* to be on top of any other elements */
}
.sidebar.visible {
display: block;
}
/*cover the whole screen and to detect user click on background */
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
/* user content */
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
left: -50%;
/* will be animated to left: 0, by animation */
animation: slide 0.5s forwards;
}
#keyframes slide {
100% {
left: 0;
}
}
<div class="sidebar">
<div class="blocker"></div>
<div class="content">
Sidebar Content
</div>
</div>
With the above code, you can have a working sidebar.
Check the working code from stackblitz
https://allenhwkim.medium.com/mobile-friendly-sidebar-in-few-minutes-7817b5c5239f
https://stackblitz.com/edit/medium-sidebar-1-eevvax?file=style.css,index.js
You can't animate between display:block (when .sidebar has .visible applied to it) and display:none (when .visible is removed from .sidebar).
display:none turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements (i.e. .blocker and .content) also have their display turned off.
The reason you get an animation upon adding .visible is that .sidebar now "exists" and so .sidebar-content also exists and as such animates. As soon as you remove .visible, .sidebar ceases to exist again and so it and its descendants disappear instantaneously.
You are along the right lines using transforms but you need to remove display:none as the method for hiding the sidebar. Something like the below is a good starting point. You may need to change some values to get it looking exactly as you wish. I have added a working codepen to show the result.
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 0;
background: rgba(0, 0, 0, .5);
z-index: 99999;
transform: translateX(-100%); // new property - will move the element off the left hand side of the screen
transition: transform .5s ease-in-out; // new property - will make the sidebar slide in in a similar manner to your animation
}
.sidebar.visible {
transform: translateX(0); // new property - makes sidebar sit in its natural position (i.e. taking up the whole viewport)
}
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
}
HI I have a vertical scrollbar. because I have some icons. And if the icons are increasing. you can't see the bottom icons anymore. So I added a scrollbar. But now the scrollbar is pressing half of the icons. So the icons are not visible totally anymore.
so this I have as css:
#makelist {
width: 250px;
/* max-height: 100%; */
max-width: 300px;
scrollbar-width: 500px;
position: absolute;
top: 0;
left: 0;
margin-left: -210px;
background-color: #91c7e1;
transition: all 0.5s cubic-bezier(0.7, 0, 0, 0.8);
z-index: 1;
margin-top: 70px;
overflow-y:overlay;
height: 700px;
}
this is html:"
<div id="makelist">
<ul id="makelistul"></ul>
</div>
So my question is: How to make the width of the scrollbar wider?
Thank you
You can hide a scrollbar:
.element::-webkit-scrollbar {
display: none;
}
But it's not the best practice, you should give a hint to a user that it's scrollable element by adding shadows or arrows at the ends of the element
For cross-browser compatibility add also:
scrollbar-width: none;
How can I get this JavaScript highlight span to appear between the footer background and the elements that are in the footer?
Increasing the z-index of the elements does not seem to accomplish this.
Example one - the highlight appears behind the footer with a partially transparent background.
https://codepen.io/jklemon17/pen/KoydPy
.footer {
background-color: rgba(70, 70, 70, .5);
position: fixed;
bottom: 0;
width: 100%;
padding-top: 50px;
padding-bottom:100px;
/* z-index: -2; */
}
Example two - the highlight appears on top of the footer elements.
https://codepen.io/jklemon17/pen/xWPGBm
.footer {
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
padding-top: 50px;
padding-bottom:100px;
z-index: -2;
}
Thanks!
In this case the best would be append the highlighting element to the footer instead the body, that way the z-index would be easier to handle. Change to this on your code:
const footer =
document.querySelector('.footer');
highlight.classList.add('highlight');
footer.append(highlight);
https://codepen.io/anon/pen/wmPKEy
I have an image which goes from one side off the screen to other. However, when I open the HTML on a different sized computer/laptop, it does not fit and looks out of place. How do I fix this?
CODE:
body {
text-align: center;
}
div.container {
text-align: left;
width: 710px;
margin: 0 auto;
border: 12px solid black;
border-radius: 10px;
}
div.content {
width: 700px;
min-height: 400px;
background-color: white;
padding: 5px;
}
#-webkit-keyframes mini {
from {
left: 410px;
}
}
.mini {
position: absolute;
top: 280px;
left: 950px;
width: 166px;
height: 70px;
z-index: 10000;
-webkit-animation: mini 3s;
animation: mini 8s;
}
<div class="container">
<div class="content">
<img src="Media/buscartoon.jpg" class="mini" />
</div>
</div>
maybe set initial left and top values
.imganim {
width:100px;
height:60px;
position:absolute;
-webkit-animation:myfirst 5s;
animation:myfirst 5s;
left: 0;
top: 0;
}
Your .content and .container have no position set, so I guess it's defaulting to the next parent element that does have these set.
Pop this on your .content div:
position: relative;
the image is still going to go over the limits because of left: 100% but adding a relative position to the container may well help you get to the next problem.
If you want the image to sit flush with the edge of the container rather than running over, you can also change your left: 100% to:
left: calc(100% - 100px)
...where 100px is the width of the element.
edit: jsfiddle example https://jsfiddle.net/w56r2xnr/
Try the following css classes that i have ammended. I have kept the top at 5px which makes room for the 5px padding within the content div. Also the 50% transformation formal includes the left 100% - (width of the image + right-padding).
You can now adjust the top to make it as you see fit.
CSS changes:
div.content {
width: 700px; min-height: 400px;
background-color: white; padding: 5px;
position: relative;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% {left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
/* Standard syntax */
#keyframes myfirst
{
0% { left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
Sample: http://codepen.io/Nasir_T/pen/ZBpjpw
Hope this helps.
[Edit - Code changed in question]
I think in both scenarios you will need to set the content div with position:relative to keep the image contained within it as the image itself is position:absolute. Along with that you need to use percentage values for the left and top in order for the animation and the position to be in the right place regardless of the size of the screen.
For the updated code in question please check the following code sample:
http://codepen.io/Nasir_T/pen/ObRwmO
Just adjust the key frame left percentage according to your need.
I have revolution slider installed on my WordPress. The aim is to put a dark overlay with opacity=0.3 over the slides... I`ve tried to make overlay .div with absolute position, but it covered all slider including its control elements like "next slide", "previous slide" and others.
So, i need to put this overlay just between slide image and slider controls. I`ve found code with image
<div class="tp-bgimg defaultimg" data-lazyload="undefined" data-bgfit="cover" data-bgposition="center top" data-bgrepeat="no-repeat" data-lazydone="undefined" src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" data-src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" style="width: 100%; height: 100%; visibility: inherit; opacity: 1; background-image: url(http://wp-themes/wp-content/uploads/2015/04/slider1.png); background-color: rgba(0, 0, 0, 0); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat;"></div>
Then i wrote this
$('.tp-bgimg').before('<div class="slider-area-overlay"></div>');
Nothing change. I dont know why.
Next step: lets do it via css.
.tp-bgimg { position: relative; }
.tp-bgimg:before {
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
content: "";
}
Its cool, but slide image appears with no changes, and then, after 1-2 sreconds appear my css styles.
I really have no idea how to decide this problem, please help me.
The Slider Revolution FAQ offers 3 solutions to this:
Option 1) Enable their built-in overlay
This can be found in the slider appearance settings, sidebar. You'll want to change the "Dotted Overlay Size" option:
Option 2) Add one of the following CSS blocks to the "Custom CSS" for your slide
I personally added it to the Global Slider CSS, so it affected all my slides.
If your individual slides have captions:
.rev_slider .slotholder:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
If your individual slides do not have captions:
.rev_slider:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 99;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
Option 3) Use image editing software, e.g. Adobe Photoshop, to manually apply a dark overlay to your images, then use the darkened images as the slide background.
The simplest approach is to add a layer above your image, paint it black, and then reduce the transparency of the black layer to around 50%.
The solutions and instructions provided by Slider Revolution are available here.
First you must to extend style of .rev_slider .slotholder (not of .tp-bgimg), because the start animation creates additional elements.
Second, the slider creates a duplicate of your image for animation, that has z-index more than source image z-index.
Try this, it will work well.
.rev_slider .slotholder:after, .rev_slider .slotholder .kenburnimg img:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
z-index: 99;
background: rgba(0,0,0,.5);
}
Found a super easy way that works!
Create a new shape. Name the layer overlay and drag it to the top. Colour it black. Change opacity to 50%. Width and height should be 100%. Choose "Stretch" in Cover Mode. Almost done. One more step.
Finally, go to Behavior and switch Align to "Slide Based". This will truly stretch the overlay to 100%.
Can't find it? Check this link.
https://www.themepunch.com/faq/incorrect-position-or-size-for-text-button-or-shape/
Scroll to step 3. Adjust the Responsive Alignment.
Wish this was easier but it's not. Don't like the dotted overlay they include in the settings. Hope this helps someone.
Just incase for video add z-index and change css class:
.rs-background-video-layer:before {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
z-index:1;
background: rgba(0, 0, 0, 0.3);
}
I found an update for the Slider Revolution Version 6, since this won't work anymore in newer versions:
.rev_slider .slotholder:after,
#rev_slider_2_1 rs-sbg:after
{
content: '';
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: rgba(30,30,30,0.5);
}
The secound entry will do it for this specific slideshow (#rev_slider_2_1).
To have a more common approach for all slides which is equivalent to the previous solution, you could use something like this:
.rev_slider .slotholder:after,
rs-sbg-wrap rs-sbg:after
{
content: '';
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: rgba(30,30,30,0.5);
}