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/

How to position two elements centered on top of each other?

The problem:
I have a form with a button underneath it to submit (post) from data with jQuery ajax(). I want for the button to be replaced with a spinner (animated png) for the duration of server ajax call. But such a trivial task is impossible in css to do right.
What i have tried:
I have placed button and image inside a bootstrap row. Ox ajax call I have set button display to none and img display to block. But because this two are not of the same size makes the whole page flicker, breaks the positioning of other elements and so on.
Another idea was to try to place both elements on top of each other with absolute positioning. But, stupid as css is I cannot center it on the middle of the row.
Is there a way to position both elements on top of each other so I can control their visibility?
Please bear in mind that I cannot used absolute position in pixel, because this is a web page and I do not not how wide the browser will be, image can change in the future, text in the button can change in the future, all this things affect absolute size.
If there is another solution to my problem which would prevent the page from jumping up and down it would also be great.
EDIT
Link to one of fiddle experiments:
https://jsfiddle.net/ofb2qdt8/
.button {
position: relative;
margin: auto;
height: 50px;
width: 30px;
background: blue;
z-index: 1;
display: block;
}
.spinner {
position: relative;
margin: auto;
height: 30px;
width: 50px;
background:red;
z-index: 2;
}
This renders second element underneath on screen. Not on different z layer.
Experiment 2:
https://jsfiddle.net/ofb2qdt8/
.button {
position: absolute;
margin: auto;
height: 50px;
width: 30px;
background: blue;
z-index: 1;
display: block;
}
.spinner {
position: absolute;
margin: auto;
height: 30px;
width: 50px;
background:red;
z-index: 2;
}
This does not center both elements, and they are pushed to the top of the containing div. The element with less height should be centered.

Check this working demo: https://jsfiddle.net/ofb2qdt8/3/
Add in a few lines of jquery and update your css.
Position your loading div according to button div's position, width, height using jquery.
*Click the button to see loading div, and try to play the margin of the button to any pixel.
###JQUERY
$(document).ready(function () {
$('.c2').each(function () {
$(this).css({
'width': $(this).siblings('.c1').outerWidth(),
'height': $(this).siblings('.c1').outerHeight(),
'top': $(this).siblings('.c1').offset().top,
'left': $(this).siblings('.c1').offset().left
});
});
$('.c2').on('click', function () {
$(this).hide(0);
});
});
###CSS
.c1 {
margin: 100px auto;
width: 100px;
text-align: center;
padding: 5px 10px;
background: blue;
z-index: 1;
}
.c2 {
position: fixed;
text-align: center;
background: red;
z-index: 2;
cursor: pointer;
}

Rough, ready and untested:
HTML
<div>
<input type='submit' />
<img src="spinneyIMage.gif" />
</div>
CSS
div{ text-align: center; }
div img{ display: none; }
jQuery
$('submit').click(function(e){
e.preventDefault();
$(this).hide().next().show();
});
After the Ajax call completes reverse the above jQuery.

As I haven't been able to find a working solution I have reverted to my first idea which I discarded at first. Albeit with a little twist.
HTML
<div class="row>
<div id="container-button" class="col-xs-12>
<button id="button" onclick="button_OnClick(e)">submit form via ajax</button>
<img src="img/spinner.png" sytle="display: none" />
</div>
</div>
JS
function btnContact_OnClick() {
// show the soinner and hide the button
showSpinner();
$.ajax(
{
type: 'POST',
url: "someurl.com/target",
data: $("#form").serialize(),
dataType: "json",
complete: function() { hideSpinner();},
success: onAjaxSuccess,
error : onAjaxError
});
}
function hideSpinner() {
$("#spinner").hide();
$("#button").show();
// make container height non-fixed and content adjustable again
$("#container-button").height('auto');
}
function showSpinner() {
// THis is the trick !!!
// Make the container fixed height as it was before displaying spinner, so it does not change with content (spinner is not the same height as button
$("#container-button").height($("#container-button").height());
$("#button").hide();
$("#spinner").show();
}
This is not the perfect solution but the best I could make.
Drawbacks:
it is not clean, you have to use javasript to fix what is css layout
problem
it still causes a little flicker
the height of container while displaying spinner is dependant on button, this may cause clipping if spinner is too big

Animate background position different behaviours

I'm not that good with jQuery animations, but i'm trying to animate an background image when mouse enters on its element. The animation is simple, mouse enters, the image moves a little to the left. Mouse leaves, image returns to its position.
I could have that working on Chrome, but with a different behaviour in IE. FF doesn't event move anything. My is the following:
$(".arrow").on("mouseenter", function()
{
$(this).stop(true).animate({ "background-position-x": "75%" });
}).on("mouseleave", function()
{
$(this).stop(true).animate({ "background-position-x": "50%" });
});
Where .arrow is a div with these properties:
.arrow {
width: 50px;
padding: 10px 0;
background: url(http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg) no-repeat center;
background-size: 16px
}
And here is a demo.
What is most strange for me is the case of IE. It seems that the animation start always from left to right, not middle right. It occours when mouses leaves too. Any ideas ?

Because Firefox doesn't support backgroundPositionX, but it does support background position
Try this code in firefox and InternetExplorer:
$(".arrow").on("mouseenter", function()
{
$(this).stop(true).animate({ "background-position": "75%" });
}).on("mouseleave", function()
{
$(this).stop(true).animate({ "background-position": "50%" });
});
More Info: backgroundPositionX not working on Firefox
Here is Updated Demo working well with FF and IE

I know Manwal has solved it , but it can also be done very easily in CSS3 like so:
.arrow {
float:left;
width: 50px;
padding: 10px 0;
background: url(http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg) no-repeat center;
background-size: 16px;
transition: all 2s ease-in-out;
}
.arrow:hover {
transform :translateX(50px);
}
where translate 50px will be the value you wish to move it along the X axis

How to enlarge and shrink an element in a loop animation through jquery or CSS

I've an image that will be moving up and down in an animation loop and it’s shadow element will shrink and enlarge accordingly. This will create an effect like the object is suspending in air. I’d attached a reference image in the following link -
http://s28.postimg.org/k3mioxzel/sample_image.jpg
I’d made the image moving up and down through jQuery with the following code and its working fine.
$(document).ready(function () {
$('#myImg').load(function(){
setInterval(function(){
$('#myImg').animate({'marginTop':"-=35px"},"slow");
$('#myImg').animate({'marginTop':"+=35px"},"slow");
},1000/30);
});
});
But I can’t enlarge or shrink the shadow element along with the image movement. I’d created the shadow element in CSS code. Please help me in this.
#oval {
width: 226px;
height: 50px;
background: #d8b54c;
top: 50%;
left: 50%;
position: absolute;
margin-top: 150px;
margin-left: -113px;
-moz-border-radius: 226px / 50px;
-webkit-border-radius: 226px / 50px;
border-radius: 226px / 50px; }

This will do the trick, modify the width/height/marginTop and marginBottom increments/decrements as needed: (Working Example)
$(document).ready(function () {
$('#myImg').load(function(){
setInterval(function(){
$('#myImg').animate({'marginTop':"-=35px"},"slow");
$('#myImg').animate({'marginTop':"+=35px"},"slow");
},1000/30);
setInterval(function(){
$('#oval').animate({'width': "-=10px",'height': "-=10px",
'marginTop': "+=5px", 'marginLeft': "+=5px"
}, "slow");
$('#oval').animate({'width': "+=10px", 'height': "+=10px",
'marginLeft': "-=5px",'marginTop': "-=5px"
}, "slow");
}, 1000 / 30);
});