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;
Related
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;
}
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 am building a product builder for an online store. I got the image to zoom in on hover and scroll but it scrolls to the top left. when I set the origin to center it zooms in at the center but does not scroll to the left or to the top. Also non-mac users are not able to scroll left-right with the mouse scroll wheel so I'd like to be able to scroll by dragging. Any help would be greatly appreciated.
Here's the code:
HTML:
<div id="option_image" class="rotationViewer option_image spritespin-instance" style="max-height: 544px; -webkit-user-select: none; overflow: hidden; position: relative; width: 3600px; height: 3600px;" unselectable="on">
<div class="spritespin-stage" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: block; background-image: url("//www.shappify-cdn.com/images/78432/86058914/001_first-screen.png"); background-size: 500px 500px; background-position: 0px 0px; background-repeat: no-repeat;"></div>
<div class="spritespin-preload" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: none;"></div>
</div>
CSS:
#option_image:hover {
width: 500px !important;
height: 500px !important;
overflow-x: auto !important;
overflow-y: auto !important;
}
.spritespin-stage {
transition: all .2s ease-in-out;
position: absolute !important;
}
.spritespin-stage:hover {
margin: center;
transform: scale(5);
transform-origin: top left;
}
Not sure why those styles are set inline and the rules within the style tag are being set with !important. That is specificity creep. Also, the width of the container is being fixed inline and then clipped in a max width. This all makes your task of debugging and refining more difficult.
A more central problem appears to be one of focus. Your container div is not focusable. When the user hovers, any scrolling with a scroll wheel will scroll whatever element has focus if it meets the conditions for scrolling to occur. You could give your .option_image container a tabindex attribute of zero if focusing fits the user experience you're going for.
I am trying to animate a div upwards when a user hovers on the div.
I am able to animate the div making it bigger, however the animation happens downwards. I am trying to keep the bottom of the div remain in the same place, and have a smooth animating increasing the size of the div upwards.
See jsfiddle here which demonstrates what my code is currently doing.
Please see code below:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
}
.content:hover {
height: 110%;
}
<div class="box">
<div class="content">TEST</div>
</div>
You can do this using transform:scaleY() and set the transform-origin to bottom. I also put a margin-top:100px to see the effect better. Also you can use transition to make the scale smoother
You also need to scale back the text.
See here: jsfiddle
You need to scale the text back to it's original state in the same time that you scale the div. so if you scale the div 2 times. You need to scale back the text with 1/2 , same if you scale 3 times...scale back with 1/3
In this case you enlarge .content by 1.5 so you need to scale down the text inside by 1/1.5 = 0.66
Code:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top: 300px;
transition:0.3s;
}
.content:hover p {
transform: scaleY(0.66)
}
.content:hover {
transform: scaleY(1.5);
transform-origin: bottom;
}
<div class="box">
<div class="content">
<p>
TEST
</p>
</div>
</div>
Try it like this (I have no other idea...): You can give to the class "box" a bigger height (I put a red border around, so you can see it) than the class "content". After that, you can use flexbox, to put the class "content" on the bottom. After that, you can do it with hover to change your heigth upwards and fill it. With transition you can make a nice animation. I hope this is good enough. Perhaps there is also a way with jQUery at the moment I havn't got an idea. Let me know, if this helps you (I'm not sure if I understanded the question well) - Cheers. (Important: This heights and so on are just random values for testing)
.box {
display: flex;
justify-content: flex-end;
flex-direction: column;
height: 100px;
border: 1px solid red;
}
.content {
background-color: #e3e4e6;
height: 50px;
width: 100%;
text-align: center;
-webkit-transition: height 1s;
/* Safari */
transition: height 1s;
}
.content:hover {
height: 100%;
}
<div class="box">
<div class="content">TEST</div>
</div>
If you just want to use css, just use:
.content:hover {
margin-top: -50px;
height: 110%;
}
See jsFiddle
since there isn't any space at top to expand, you may give an extra margin initially and remove it on hover like this JsFiddle -
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top:25px;
}
.content:hover {
height: 110%;
margin-top:0;
}
Set top property with the value of height - 100 * -1
https://jsfiddle.net/x3cL1cpt/7/
.content:hover {
height: 110%;
top: -10%;
position: relative;
}
Why position relative? It's because I move the box, but without modifying the space that the box occuped. If you need to modify that space, change top with margin-top.
Replace this CSS with your current, needed to add transition:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
transition: 1s all ease;
}
.content:hover {
transform: scaleY(1.2);
transform-origin: bottom right;
}
I'm trying to create a remote control app using Cordova.
There should be 2 vertical sliders (<input type="range">, with my customizations (height, width, color, etc.). One should be on the left, positioned at 25% of the page width; and the other on the right, at 75% of the page width.
The sliders also should be centered on the correct point (ex. calc(25% - 20px); for the slider on the left if it is 40px wide, which it will be).
The only other requirement is that this webpage works on iOS Safari (really Cordova, but it uses Apple's WebKit which is basically the same). Opera/Firefox would also be nice. It does not have to be IE compatible (you're welcome).
I don't mind using Javascript/jQuery, but I would prefer CSS.
Also, for reasons unexplained, the sliders go off the top of the page, which must be fixed. One last bug with what I currently have is that applying position: fixed; left: 0px; to a slider does not move it completely to the left, so the centerInViewport() function is offset.
Here's a JSFiddle: https://jsfiddle.net/Coder256/6zjnk3qt/
I already tried -webkit-appearance: slider-vertical. It doesn't allow styling. For sliders, any -webkit-appearance value aside from none that I've tried doesn't let you style anything.
UPDATE: Sorry if I wasn't clear. The question is: How do I correctly position the sliders while keeping my customization, correctly being not too far up off the page and at the correct x position as described above?
The trick is to set margin-topto half of the sliders width to keep the sliders from being too far up off the page.
Same principle is for the x position. Use calc to set left to 25% / 75% minus half of the sliders width to get the correct position.
html, body {margin: 0; padding: 0; width: 100%; height: 100%}
h1 {
text-align: center;
}
.app {
width: 100%;
}
.sliders {
position: relative;
}
input[type=range].vslider {
-webkit-appearance: none;
transform: rotate(270deg) translateY(-50%);
margin-top: 200px; /* 50% of the width because of the transformation */
width: 400px;
height: 40px;
outline: none;
position: absolute;
}
input[type=range].vslider::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #777;
opacity: 0.75;
width: 25px;
height: 40px;
transform: translateY(-10px);
}
input[type=range].vslider::-webkit-slider-runnable-track {
-webkit-appearance: none;
background-color: #444;
color: #444;
height: 20px;
width: 400px;
}
#LSlider {
left: calc(25% - 200px); /* 50% of the width because of the transformation */
}
#RSlider {
left: calc(75% - 200px); /* 50% of the width because of the transformation */
}
<div class="app">
<h1>RC Car Test</h1>
<div id="sliders">
<input type="range" min="-256" max="256" step="1" defaultValue="0" class="vslider" id="LSlider" />
<input type="range" min="-256" max="256" step="1" defaultValue="0" class="vslider" id="RSlider" />
</div>
</div>