We Keep Coding

How do I hide a scrollbar after scrolling and make it visible again on scroll?

My intention is to hide my scrollbar (i.e, hidden by SLIDING TO THE RIGHT), after scrolling (let's say, like 2 or 3 seconds after I'm done scrolling)
And to make it visible again, soon as I start scrolling (i.e, visible by SLIDING IN FROM THE RIGHT)
VIEW CODE SNIPPET:
div::-webkit-scrollbar {
width: 8px;
/* helps remove scrollbar which resizes or shifts list items */
/* display: none; */
}
div::-webkit-scrollbar-track {
background-color: #444444;
}
div::-webkit-scrollbar-button:vertical:increment {
background-color: rgba(108, 92, 231, 0.65);
}
div::-webkit-scrollbar-button:vertical:decrement {
background-color: rgba(108, 92, 231, 0.65);
}
div::-webkit-scrollbar-thumb {
background-color: rgba(108, 92, 231, 0.7);
border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
background-color: rgba(108, 92, 231, 1);
}
div {
width: 500px;
height: 300px;
background-color: #ececec;
overflow: auto;
}
<div>
<p style="height: 300vh;">Just some tall paragraph to force DIV scrollbars....</p>
</div>
Please help me everyone (I'D BE SO GRATEFUL!)
:D

Since CSS does not have timeouts and clearing of timeouts - Use JavaScript
Use Element.classList to add and remove a class
Use setTimeout() set at 2500ms, but every time a scroll event is triggered remove the previous pending timeout using clearTimeout. Logically, after you finished scrolling the last timeout that was set will, after 2.5s trigger finally the class removal.
Use a CSS class like .is-scrolling to there define the desired scrollbar styles (which otherwise are transparent by default)
const showScrollbars = (evt) => {
const el = evt.currentTarget;
clearTimeout(el._scrolling); // Cancel pending class removal
el.classList.add("is-scrolling"); // Add class
el._scrolling = setTimeout(() => { // remove the scrolling class after 2500ms
el.classList.remove("is-scrolling");
}, 2500);
};
document.querySelectorAll("[data-scrollbars]").forEach(el => {
el.addEventListener("scroll", showScrollbars);
});
[data-scrollbars] {
width: 500px;
height: 180px;
background-color: #ececec;
overflow: auto;
}
[data-scrollbars]::-webkit-scrollbar {
width: 8px;
height: 8px;
}
[data-scrollbars]::-webkit-scrollbar-track {
background-color: transparent;
}
[data-scrollbars]::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 10px;
}
[data-scrollbars].is-scrolling::-webkit-scrollbar-track {
background-color: #777;
}
[data-scrollbars].is-scrolling::-webkit-scrollbar-thumb {
background-color: gold;
}
<div data-scrollbars>
<p style="height: 300vh;">
Just some tall paragraph to force DIV scrollbars...<br>
Scroll me! (<<< PS: See the problem?!)
</p>
</div>
I would highly not advise you hide scrollbars. Scrollbars are a visual hint to the user that there's actually content to be scrolled. Do a simple A/B testing. For half of your visitors show the scrollbar. For the other half, do that funky stuff - and don't be surprised that your click trough-rate for the below-the-fold portion of the app (or element) has fewer-to-none interactions by that second group of users.

I am thinking about what if user do not have any mouse wheel for scrolling and if user scroll with the actually using scroll bar.
Anyway please search for slim fading scroll bar example at google. You will find some examples for the slim scroll maybe it’s not invisible but it’s transparent and have a good shape.

Contenteditable height transition: animate after adding (shift+enter) and removing a line of text

It works so far on using the contenteditable attribute on the <div> tag with the autogrow feature of a textbox. Also the height transition of it. It all works good, except for one thing, deleting characters, to be specific, a line, will not animate its height, unlike adding new lines. I have still a little knowledge on CSS.
.autogrow {
border: 1px solid rgb( 0, 0, 0 );
padding: 10px;
}
#keyframes line_insert {
from {
height: 0px;
}
to {
height: 20px;
}
}
.autogrow[contenteditable] > div {
animation-duration: 250ms;
animation-name: line_insert;
}
.autogrow[contenteditable] {
overflow: hidden;
line-height: 20px;
}
<div class="autogrow" contenteditable="true"></div>
When I press Shift + Enter, it doesn't animate either, it does well though while pressing Enter. Just the removing of lines and the Shift + Enter key combination while entering a new line is the problem.
How to make it work? Can it be done using pure CSS? Or adding a javascript function for it?

To avoid these issues, I personally use a solution not based on pure CSS animations / transitions which I found always have problems. For example, in your CSS implementation, there is a bounce back effect if using the Enter too fast (you can slow the animation down to see it better).
Moreover, new lines handling is different between browsers, some will add <div><br></div>, some versions of IE add only <br>, etc.
I've never been able to fix all these problems or found an implementation fixing all of these so I decided to not modify at all the behavior of the contenteditable, let the browser do is magic which works and instead, react to what's happening.
We don't even have to worry about keys events like Shift + Enter or events like deletion, etc., all of these are natively handled by the navigator.
I choose instead to use 2 elements: one for the actual contenteditable and one for the styling of my contenteditable which will be the one having height animations / transitions based on the actual height of the contenteditable.
To do that, I'm monitoring every events that can change the height of a contenteditable and if the height of my styling element is not the same, I'm animating the styling element.
var kAnimationSpeed = 125;
var kPadding = 10;
$('div[contenteditable]').on('blur keyup paste input', function() {
var styleElement = $(this).prev();
var editorHeight = $(this).height();
var styleElementHeight = styleElement.height();
if (editorHeight !== styleElementHeight - kPadding * 2) {
styleElement.stop().animate({ height: editorHeight + kPadding * 2 }, kAnimationSpeed);
}
});
.autogrowWrapper {
position: relative;
}
.autogrow {
border: 1px solid rgb(0, 0, 0);
height: 40px; /* line-height + 2 * padding */
}
div[contenteditable] {
outline: none;
line-height : 20px;
position: absolute;
top: 10px; /* padding */
left: 10px; /* padding */
right: 10px; /* padding */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="autogrowWrapper">
<div class="autogrow"></div>
<div contenteditable="true"></div>
</div>

It's kinda hacky, but it works.
First, modify your CSS
.autogrow {
border: 1px solid rgb( 0, 0, 0 );
padding: 10px;
}
#keyframes line_insert {
from {
height: 0px;
}
to {
height: 20px;
}
}
.autogrow[contenteditable] > div {
animation-duration: 250ms;
animation-name: line_insert;
}
.autogrow[contenteditable] {
overflow: hidden;
line-height: 20px;
}
Then add this jQuery that detects Shift + Enter events and appends a div whenever they occur
$(".autogrow").keydown(function(e){
if (e.keyCode == 13 && e.shiftKey || e.keyCode == 13)
{
$(this).animate({height: $(this).height()+20},200);
$(this).append('<div><br></div>');
}
});
And that should work.
Check fiddle https://jsfiddle.net/wx38rz5L/582/

CSS-3 Transform bug, menu appearing stuck

I am using this plugin called transit.js to create a simple menu animation and basically I have the following menu, see below:
The code for the open and close of the menu is as follows:
$('.main-header .nav-toggle-button').on('click' , function() {
// $('.main-header .navigation').toggleClass('show');
if ($('.main-header .navigation').hasClass('show')) {
$('.main-header .navigation').stop().removeClass('show');
return false;
}
$('.main-header .navigation').stop().transition({
perspective: '1000px',
rotateY: '180deg',
duration : 0
}, function() {
$(this).addClass('show').stop().transition({ rotateY: '0' });
});
return false;
});
DEMO HERE, (I am sorry, the fiddle just doesn't recreate this issue.)
BUG: As you can see on close there is no animation, the menu goes away, now this bug occurs when the page is scrolled more than
200px+ and below 992px width, so basically when you click on the
hamburger, the menu opens with a rotate animation but when you
click the hamburger again the menu sometimes doesn't close even though
the 'show' class has been removed form the menu.
This is one of these bugs that is just beyond me, inspecting in the console and going through the JS code has just not really helped.
I would really appreciate if anyone can point out what I am doing wrong here, as the JS and CSS really seems to be perfect but the css transforms using transit is just not working as expected.

As already mentioned seems to be a Chrome bug, I tried editing the CSS on your demo and this solution seems to work ... try adding a "z-index" to -1 here:
#media (max-width: 992px)
.navigation {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
background: rgba(255,255,255,.95);
z-index: -1; // ADD THIS
}

An alternate solution to your problem..
The problem I found is, on smaller screens, your mini-menu appears on-click of hamburger icon. But it doesn't disappear when clicked on hamburger icon again.
However, it disappears immediately if you scroll the window. So, I added two lines inside the if statement which actually scrolls the window 1px down and then 1px up (to keep the position of the document same). Add the following code inside your if statement (before return false; line).
window.scrollBy(0, 1);
window.scrollBy(0, -1);

I think that your mistake is that you re using the hover event to add and remove the animation, he just fire once that your mouse is over the element:
/* dropdown */
$('.navigation .dropdown-menu-item').hover(function() {
$('.navigation .dropdown-menu-item').find('.dropdown-menu-list').removeClass('opened');
$(this).find('.dropdown-menu-list').stop().transition({ 'y' : '20px' , duration: 0 } , function() {
$(this).addClass('opened').stop().transition({ 'y': 0 });
});
return false;
}, function() {
$(this).find('.dropdown-menu-list').removeClass('opened');
});
Use mouseenter and mouseleave events to add and remove the dropdown list animation, by this way you gonna have the events fired at over and leave:
$(document).on('.navigation .dropdown-menu-item', 'mouseenter', function(){
$('.navigation .dropdown-menu-item').find('.dropdown-menu-list').removeClass('opened');
$(this).find('.dropdown-menu-list').stop().transition({ 'y' : '20px' , duration: 0 } , function() {
$(this).addClass('opened').stop().transition({ 'y': 0 });
});
return false;
})
$(document).on('.navigation .dropdown-menu-item', 'mouseleave', function(){
$(this).find('.dropdown-menu-list').removeClass('opened');
})

Here is css solution...
with this your menu will open and close smoothly
add following css to your code and over-wright
#media(max-width:991px) {
.navigation {
transition: all 0.4s;
-webkit-transition: all 0.4s;
display: block;
transform: rotateY(90deg) !important;
-webkit-transform: rotateY(90deg) !important;
perspective: 1000px !important;
-webkit-perspective: 1000px !important;
opacity: 0;
visibility: hidden;
}
.navigation.show {
display: block;
opacity: 1;
transform: rotateY(0deg) !important;
-webkit-transform: rotateY(0deg) !important;
visibility: visible;
}
}
ENJOY...

Invert scroll on rotate(180d)

Having a small problem. (Refer to fiddle)
I've got a container in my project that has been rotated 180 deg, with a container inside that has been rotated another 180 back to the original state.
I need to invert the scroll.
How would i go about this?
Dont mind wasting your time with a method, that reverts the basic setup.
The basic setup has to stay.
http://jsfiddle.net/vavxy36s/
Description of fiddle:
"Start" marks the initial string and "end" ofcourse the last one.
If you try scrolling you will realize, that it's inverted as to how one would normally scroll.
.class1 {
height: 200px;
background-color: blue;
color: white;
width: 100px;
overflow-y: scroll;
overflow-x: hidden;
direction: rtl;
-webkit-transform: rotate(180deg);
}
.class2 {
direction: ltr;
-webkit-transform: rotate(180deg);
}
EDIT: Just mousewheel scroll, has to be inverted.

Edit: Your original setup has different behaviors in Chrome and in [IE & Firefox]. In Chrome, the scroll is already inverted, but in FF and IE, the scroll remains normal. My solution reverts it in both cases, but the behaviors remain different across browsers.
You could add these styles:
/* ...
Your original styles
...
*/
.class1 {
overflow: hidden;
position: relative;
}
.class2 {
position: absolute;
bottom: 0;
}
And then, using jQuery, modify the bottom CSS property of .class2:
var scrollPos = 0,
diff = $('.class2').height() - $('.class1').height();
$('.class1').on('mousewheel', function(e) {
scrollPos = Math.min(
0,
Math.max(
-diff,
scrollPos + e.originalEvent.wheelDelta
)
);
$('.class2').css('bottom', scrollPos);
});
JS Fiddle Demo

You could use the mousewheel library to catch and invert the scroll movement.
$(".class1").mousewheel(function(event) {
event.preventDefault();
this.scrollTop -= (event.deltaY * event.deltaFactor * -1);
});
You can view a demo here: http://jsfiddle.net/fduu20df/1/

Jquery unexpected "scale" behavior

I have the following:
Many anchors that have a display: block; css property, and the following two functions attached to two buttons:
function ZoomIn() {
$("#MainContent_inside_panel a").hide();
$("#MainContent_inside_panel a").effect("scale", { percent: 200 }, 1000);
$("#MainContent_inside_panel a").show();
}
function ZoomOut() {
$("#MainContent_inside_panel a").hide();
$("#MainContent_inside_panel a").effect("scale", { percent: -200 }, 1000);
$("#MainContent_inside_panel a").show();
If I only click the button that calls ZoomIn, it works (well, it doesn't hide everything, but that's not that big of a deal). If I click zoomin, then zoomout or zoomout, then zoomin, it breaks. 3/4 of the blocks will resize, but the others get weirdly (and inconsistently small). In firefox, I see the weirdly small anchors - in chrome they just disappear.
After it "breaks", clicking either button does nothing.
Any ideas what is causing this?
Edit: HTML (just a bunch of these repeated):
<a id="MainContent_1_0" class="unused"></a>
<a id="MainContent_400001393" class="used"></a>
<a id="MainContent_1_2" class="unused"></a>
CSS:
.inside_panel a
{
display: block;
float: left;
width: 7px;
height: 7px;
margin: 2px;
padding: 2px;
border-style: solid;
border-width: 1px;
}
a.used
{
background-color: red;
}

You should not use negative values when shrinking the object.
If you wish to shrink the object to the previous size after it was scaled by 200% - set it to 50%.
$("#MainContent_inside_panel a").effect("scale", { percent: 50 }, 1000);
Simple math: if object is size of 100px, then scaling it by 200% would make it 200px. To make the object 100px again you should cut it in half, that is 50%.