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)
Related
I'm creating a menu that appears after a click on the hamburger button, (upper right corner) and I'm trying to use the jQuery function to slide it in rather than just having it appear.
The issue I'm having is that it only seems to activate the sliding bit on the second attempt.
I've seen a bunch of other questions about this but the answers are either "you've got a specific error in your code" or "you have to toggle or otherwise fake the animation on page load". I'm hoping my code is error-free and I'm not really keen to use a toggle hack just to bypass the first animation no-show.
Presumably, this is supposed to work the first time & every subsequent time.
$('.navTrigger').click(function () {
$(this).toggleClass('active');
$("#mainListDiv").toggleClass("show_list").fadeIn(0);
$('li').toggleClass('logo2314441-mobile');
$('li').toggleClass('li-mobile');
});
UPDATE:
I also tested with this other snippet, but still not working, unfortunately...
$('.navTrigger').click(function () {
$(this).toggleClass('active');
$("#mainListDiv").fadeIn(0, function(){
$("#mainListDiv").toggleClass("show_list");
});
$('li').toggleClass('logo2314441-mobile li-mobile');
});
.nav div.main_list ul {
width: 100%;
padding: 0;
display: flex;
list-style: none;
align-items: center;
justify-content: space-between;
flex: 1;
-webkit-transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1),-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transform: translateY(-140px);
}
.nav div.show_list ul {
overflow: hidden;
display: block;
-webkit-transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1),-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transform: translateY(0px);
}
my question is: How do I get the animation to work first time without an onload fix/hack? Thanks in advance.
Test with this:
$('.navTrigger').click(function () {
$(this).toggleClass('active');
$("#mainListDiv").fadeIn(0, function(){
$("#mainListDiv").toggleClass("show_list");
});
$('li').toggleClass('logo2314441-mobile li-mobile');
});
The callback will be triggered as soon as the Fade In is complete. Now the list will be visible and then the class is added, so the animation should start.
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.
So far I've got this code
http://jsfiddle.net/Nq79H/1/
but I want to fadeout the image in order to leave only the text visible.
Do I need to change the javascript or write a new css div?
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
...but I want to fadeout the image in order to leave only the text visible.
Simply add .fadeToggle() to the img element as well:
$('img', this).fadeToggle();
JSFiddle example.
Here is the CSS3 transition solution:
jsFiddle
CSS
.thumb .text {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #999;
background: rgba(0, 0, 0, 0.3);
text-align: center;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
opacity:0;
}
.thumb:hover .text {
opacity:1;
}
.thumb img {
opacity:1;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
}
.thumb:hover img {
opacity:0;
}
Support
The support for CSS3 transitions is pretty decent now, the latest versions of all the major browsers (Safari, Chrome, Opera, Firefox) all support transitions. IE on the other hand only supports it from version 10. Transitions are nice though in that they don't crash and burn when something doesn't support it. The opacity of the element will still change, there will just be no transition.
References
Caniuse.com transitions
If you want to fadeIn text and fadeOut image, just add one more line:
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
$(this).children("img").fadeToggle();
});
$(this).find('img').fadeToggle();
Is this what you're looking for?
$('.thumb').hover(function(){
$(this)
.find('.text-js')
.fadeToggle()
.end()
.find('img')
.fadeToggle();
});
http://jsfiddle.net/Nq79H/4/
No JS or additional HTML needed.
http://jsfiddle.net/Nq79H/11
.thumb img {
-moz-transition: opacity .8s;
-webkit-transition: opacity .8s;
transition: opacity .8s;
}
.thumb:hover img {
opacity: 0;
}
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');
});
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;
}