We Keep Coding

Hide scrollbars, if not necessary - Ace editor

I've been experimenting with Ace Editor and I've been trying to automatically "hide" (= not use the system defaults) the vertical/horizontal scrollbars, when not in use.
Is there a way? Any ideas?

Just add overflow:auto css to the right element. I think that could be .ace_scroller. Give me example with scrollers or find by yourself using Object Inspector (Ctrl + Shift + I ; Chrome, FF, Opera).
Edit:
There is your code:
body .ace_scrollbar-v {
overflow-y: auto;
}
body .ace_scrollbar-h {
overflow-x: auto;
}
Edit2:
Hide scrollbar If editor isn't hovered:
body .ace_scrollbar {
display: none;
}
body .ace_editor:hover .ace_scrollbar {
display: block;
}
Or with animation:
body .ace_scrollbar {
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
}
body .ace_editor:hover .ace_scrollbar {
opacity: 1;
}

You may want to set the word wrap too.
editor.getSession().setUseWrapMode(true)

Slide down animation from display:none to display:block?

Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way?
$(document).ready(function() {
$('#box').click(function() {
$(this).find(".hidden").toggleClass('open');
});
});
#box {
height:auto;
background:#000;
color:#fff;
cursor:pointer;
}
.hidden {
height:200px;
display:none;
}
.hidden.open {
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
Initial Content
<div class="hidden">
This is hidden content
</div>
</div>
And a JSFiddle

Yes, there is a way:
http://jsfiddle.net/6C42Q/12/
By using CSS3 transitions, and manipulate height, rather than display property:
.hidden {
height: 0px;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
.hidden.open {
height: 200px;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
More here: Slide down div on click Pure CSS?

Since you're already using jQuery, the simplest thing is just to use slideDown(). http://api.jquery.com/slidedown/
There's also slideToggle().
Then you don't need to manually do all the browser-specific transition css.

I like the idea of CSS transitions, but it's still very jumpy. Sometimes the max-height has to be set to a very high number because of dynamic content which renders the transition useless as it's very jumpy. So, I went back to jQuery, but it had its own faults. inline elements are jumpy.
I found this to work for me:
$(this).find('.p').stop().css('display','block').hide().slideDown();
The stop stops all previous transitions.
The css makes sure it's treated as a block element even if it's not.
The hide hides that element, but jquery will remember it as a block element.
and finally the slideDown shows the element by sliding it down.

What about
$("#yourdiv").animate({height: 'toggle'});
Toggle will switch your div on/off, and the animate should make it appear from below. In this scenario, you don't need the specific CSS to "hide" it.

We can use visibility: hidden to visibility: visible instead of display: none to display: block property.
See this example:
function toggleSlide () {
const div = document.querySelector('div')
if (div.classList.contains('open')) {
div.classList.remove('open')
} else {
div.classList.add('open')
}
}
div {
visibility: hidden;
transition: visibility .5s, max-height .5s;
max-height: 0;
overflow: hidden;
/* additional style */
background: grey;
color: white;
padding: 0px 12px;
margin-bottom: 8px;
}
div.open {
visibility: visible;
/* Set max-height to something bigger than the box could ever be */
max-height: 100px;
}
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<button
onclick="toggleSlide()"
>
toggle slide
</button>

I did this workaround for the navigation header in my React site.
This is the regular visible css class
.article-header {
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
}
This is the class that is attached to the div (when scrolled in my case)
.hidden {
top: -50px !important;
transition: top 0.5s ease-in-out;
}

You can use also
$('#youDiv').slideDown('fast');
or you can tell that the active div goes up then the called one goes down
$('.yourclick').click(function(e) {
var gett = $(this).(ID);
$('.youractiveDiv').slideUp('fast', function(){
$('.'+gett).slideDown(300);
});
});
Something like that.

Trying to apply transition effect to hover

My CSS:
a:hover {
position: relative;
}
a:hover:after {
z-index: -1;
content: url(icon.jpg);
display: block;
position: absolute;
left: 0px;
bottom: 20px;
}
This displays an icon when I hover over an anchor, from this post:
Make image appear on link hover css
I am trying to apply this:
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
So that the image fades in, but I cant get it to work.

WebKit (Chrome, Safari) does not support transitions on pseudo elements. It should work in Firefox.
see this q/a
To accomplish your need you could apply the background image for the link and in hover you could apply the transition by setting the background-position. You can also use an extra span inside the a tag instead of using :before pseudo class.

You could do a background image.
a {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
a:hover {
position: relative;
background:url(icon.jpg);
}
The code is just an example, you would need to position the background image as well, since I dont know the dimensions of your design I can't tell you the exact position.

Webkit currently support transitions and animations
http://css-tricks.com/transitions-and-animations-on-css-generated-content/
a:hover {
position: relative;
}
a:after{
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in; /*never forget the standard*/
}
a:hover:after {
z-index: -1;
content: url(icon.jpg);
display: block;
position: absolute;
left: 0px;
bottom: 20px;
}
And the example used before:
http://jsfiddle.net/d2KrC/88/
The example using image
http://jsfiddle.net/d2KrC/92/

There are some css "tricks" that can help you, maybe using css keyframes, but the best way to perform this in a compatibility way is using jQuery (a jquery version that matches your compat needs).
As some people asked you on css, where webkit actually support this kind of transitions, and this question could grow if we start talking on standards, the best you can do at first is update all your browsers and check.
If you need or want to keep compat on older browser versions, you'll need to catch the hover event with javascript and then do whatever you want (as javascript can work directly with the DOM) and with CSS is pre-loaded and the most you can do is change the properties. i.e.
load image with display: none, then change this property with an event.
example on jquery:
$('.link').click(function(){
$('.foo').fadeIn();
});
$('.link2').click(function(){
$('.foo2').fadeToggle();
if($('.link2').text() == 'show or hide') $('.link2').text('click again');
else $('.link2').text('show or hide');
});
.foo, .foo2{display: none; width: 100px; height: auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<img class="foo" src="http://joelbonetr.com/images/root.jpg" alt="">
<a class="link" href="#">show it!</a>
</p>
<p>
<img class="foo2" src="http://joelbonetr.com/images/root.jpg" alt="">
<a class="link2" href="#">show or hide</a>
</p>

'toggel' rotation of element back and forth using css3/jquery

i've got an image that i want to onclick animate the rotation 90degress, when its clicked again i want it to animate the rotation -90degrees.
For the rotation im using the css3 transform:
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
For the jquery I want to set a varable to check if the object has been rotated, then act accordingly.
I have been having a real difficult time trying to get it to work. I've put together a JsFiddle.
This is the code I am using:
var turn = true;
$("#button").click(function () {
$("#shape").css('transform', function(index) {
return index * 90;
});
});

Add some transitions and a rotate class, and just toggle that class:
css:
#shape { width: 100px;
height: 200px;
background:#000;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.rotate {-moz-transform: rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
js:
$("#button").click(function() {
$("#shape").toggleClass('rotate');
});​
FIDDLE

If I understood correct, THIS should do it.

I think in general, if you're going to use transition's you should target the specific properties you want to affect. I would consider the use of "all" to be poor practice.
Target alternative:
css:
#shape {
width: 100px;
height: 200px;
background:#000;
-moz-transition: transform 1s ease;
-webkit-transition: transform 1s ease;
-o-transition: transform 1s ease;
transition: transform 1s ease;
}
.rotate {
-moz-transform: rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
///jquery
$("#button").click(function() {
$("#shape").toggleClass('rotate');
});​

javascript-triggered transitions with opacity and visibility in Safari

I'm using the following code.
By clicking on div id="popUpPane", the div and it's childs should appear and slowly fade in.
By clicking on the div again, it should slowly fade out and then disappear.
Firefox and Chrome (which is webkit too) behave that way and I know Safari did in an earlier version, too. But right know on Safari and on Safari Mobile nothing happens at all when I click on "popUpPane".
Is this a bug in Safari or is there something I could change to come back to the intended behaviour?
One addition: If I set -webkit-transition to -webkit-transition: opacity .5s ease-in-out; it works fine but the transition only appears on the first click. There's no transitions after that first one... If I delete the opacity-part in the java-script the opo-up works but there's no transition.
All other transitions on my site are working. But they all use only opacity and no visibility.
Here's my code:
CSS:
#popUpPane {
white-space:normal;
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
vertical-align:middle;
visibility:hidden;
z-index:90;
}
#greyOut {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color:#000;
opacity:0;
}
#popUpPicCanvas {
position:relative;
top:50%;
margin-top:-325px;
display:inline;
opacity:0;
z-index:100;
}
.fade {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
HTML:
<div id="popUpPane" onClick="noPopUp()">
<div id="greyOut" class="fade"> </div>
<canvas id="popUpPicCanvas" width="1000" height="650" title="Bastian Beuttel" class="fade"></canvas>
</div>
Javascript:
var popUpPane = document.getElementById("popUpPane"),
greyOut = document.getElementById("greyOut"),
popUpPicCanvas = document.getElementById("popUpPicCanvas"),
popCanvasContext = popUpPicCanvas.getContext("2d");
var doPopUp = function(source,x,y){
var popUpPic = document.getElementById("pic"+source);
popCanvasContext.canvas.width = x;
popCanvasContext.canvas.height = y;
popCanvasContext.drawImage(popUpPic, 0, 0,x,y);
popUpPane.style.visibility = "visible";
greyOut.style.opacity = "0.7";
popUpPicCanvas.style.opacity = "1";
};
var noPopUp = function(){
greyOut.style.opacity = "0";
popUpPicCanvas.style.opacity = "0";
popUpPane.style.visibility = "hidden";
};
I hope someone can help me.
Thanks for your responds!

Yep, there is a bug in mobile Safari with simultaneous transition for opacity+visibility.
You can fix it using something except for visibility: in your case setting the width and height to 0 would help. However you must add the delay, so they would change not instantly.
Here is a dabblet with the working example: http://dabblet.com/gist/1642110
/**
* Delayed alternative for visibility
*/
a {
display: inline-block;
background: #888;
color:#FFF;
padding: 1em;
}
div {
width: 100px;
height: 100px;
background: lime;
transition: opacity 1s;
}
a:hover+div {
width: 0;
height: 0;
opacity: 0;
transition: width 0s 1s, height 0s 1s, opacity 1s;
}

Thank you!
Since this bug is now removed from the latest releases of webkit the problem is gone for safari and chrome.
i started to have problems since the position of my div also was transitioned so I wrote it like this:
.dofade {
-webkit-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
-moz-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
-o-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
}