Before I say anything, I looked at about a dozen SO threads including this one which you'll see the code suggested in there in my JSBin as well: Why does this CSS transition event not fire when two classes are added?
The issue is that adding two classes back to back too fast results in no transition animation whatsoever.
I'm implementing this into a legacy JS custom right click menu and making it mobile friendly with just CSS by first applying the mobile styles with .mobile-menu then an animation class of .mobile-menu-show when they long press (since there's no right click mouse button).
The transitions don't work this way though. If I add .mobile-menu on page load it's fine, but I can't because I'm adding the mobile-menu class based on how the right click menu is triggered (long press == mobile styles, right click == normal styles)
Demo code: http://jsbin.com/maxuku/edit?html,css,output
==Edit==
Hopefully to clarify, I want the menu you see at the default to go hidden (translateY(100%)) then slide up from the bottom. If you use Slack, long press on a message. Or iPhone's had this same concept here where it would slide up:
please change css class as below
.context-menu {
position: fixed;
bottom: -100%;
left: 0;
right: 0;
z-index: 100;
-webkit-transition: all 0.25s; /* Safari */
transition: all 0.25s;
}
.mobile-menu {
background: #fff;
width: 100%;
box-sizing: border-box;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.mobile-menu-show {
bottom: 0;
}
You can refer to animation over here
https://plnkr.co/edit/t0EB5CiuwtbWHqWXvlvz?p=preview
Related
I'm working on a accessibility issue with an element. I need to hide this element so users can't click/tap it but without disabling the event. I don't want to disable it because voiceover will not be able to trigger the event if it's disabled. I'm using below css but there is still a small hitzone that I can't get rid of.
position: absolute;
left: 15px;
top: 36px;
width: 0;
height: 0;
opacity: 0;
What I have tried so far:
visibility:hidden;
z-index: -1;
onmousedown
It doesn't work as I would like :(
EDIT------------
So I tried to play around with the css and added below to simply relocate the select element and minimize the chance users will click/tap on it:
left: 0;
top: -36px;
z-index: 100;
So there is still a hitzone but it's nearly impossibly for someone to click/tap it. Voiceover can live with this and it doesn't change any behavior for users.
If you're using bootstrap, you could try using the class "sr-only".
If not, well, there's no harm in "borrowing" the style from that:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
I borrowed this sample from this answer since I haven't got the bootstrap source to hand but it looks accurate to me.
You can find out more from the Bootstrap accessibility page
Have you tried display:none . Give it a shot. If not, please post your code here, so we can see the actual problem.
Why don't you just make the element transparent. That way users' won't be able to click or tap on it, and you will still get the events.
I'm developing a web application for a soccer team. I use HTML5+CSS with Bootstrap 3.0.3 and jQuery.
As first, on the top a menu appears, everything works fine.
So I decided to go to the news section where I added the jQuery bxslider plugin.
The problem is that when the menu is clicked and the dropdown appears, the bxslider buttons are still visible, which looks very disturbing and unuseful.
How to disable those two buttons while displaying the menu? Would a proper solution be to create an jQuery event which will hide slider temporarily or is there a CSS trick that I overlooked?
Demo: here
Resolution with the issue: 320 x 568 (small devices)
Default index.html:
After I click on the menu:
To resolve this, change the z-index of the arrows like so :
.bx-wrapper .bx-controls-direction a{z-index:100};
Give .navbar-fixed-top to z-index:99999; will make arrow in visible when menu open.
.navbar-fixed-top{
z-index:99999;
}
By Default navbar with fixed top have z-index of 1030 as you can see from below code
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
and carousel arrow have z-index 9999;
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
Now You just have to increase the z-index>9999 for your navbar for this to work by adding some custom style to overrride the default z-index of navbar.
e.g
.navbar-fixed-top{
z-index: 10001;
}
On my webpage, I have a footer which has a textarea box. When the user clicks in the textarea, I want the rest of the page to darken by 60%, kindof like they are in a modal. I am a noob when it comes to advanced css so I am unsure of the properties to apply.
I am using bootstrap 3, javascript and knockout. I know how to detect when the user is in the text area I just want to change the background so everything else is opaque.
A jsFiddle would be wonderful as well :)
We use a combination of CSS and JQuery JavaScript for that. You'd basically use some Overlay method first to overlay the whole page (e.g. See Technique #1 from the Link).
With the help of JavaScript, We attach to events of the forms to:
Show the Overlay
Make the required form elements, e.g. the first Div inside the form, appear above the Overlay ("z-index" CSS attribute)
CSS:
Overlay has Z-Index 10, so give the relevant element the Z-Index 11 to appear on top:
form > div { z-index: 11; }
this JQuery JavaScript can look like this:
$(document).on("focus", "textarea", function() {
$(".overlay").show();
});
Beware, this is not only a "background" topic, if you want to prevent users to do any interaction with the page, you need an overlay which actually blocks clicks. Also, in our case, we also had to prevent any links to be triggered which are below the overlay. Users were still able to go through the links using the TAB key on they keyboard to navigate to a button and click it using the Space key, so we also added JavaScript code to prevent that when in editing mode.
EDIT: a very basic Fiddle
Here is how I would do this - When the user clicks in the text area, set a class on body, and style the class.
with jQuery (you can use vanilla js too)
$('.my-textarea').on('focus', function() {
$('body').addClass('dark');
});
$('.my-textarea').on('blur', function() {
$('body').removeClass('dark');
});
body.dark {
background-color: #333;
opacity: 0.6;
}
A good solution is to make a modal appear behind the input and not just making the background darker, this can be accomplished with css alone
...
<style>
textarea:focus{
z-index: 901;
position: relative;
}
textarea ~ .textarea-modal{
position: fixed;
background-color: transparent;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 900;
pointer-events: none;
transition: background-color .5s ease;
}
textarea:focus ~ .textarea-modal{
pointer-events: auto;
background-color: rgba(0,0,0,0.3);
}
</style>
...
<div>
<textarea></textarea>
<div class="textarea-modal"></div>
</div>
...
feel free to change the selectors to target specific elements, however at the moment when you focus on the textarea a modal would appear below it with other elements behind.
I'm beginner and trying to display details of a card/tile from the sliding bottom of the page over click action. I already found one of the template with my requirements and trying to customize. I found few code samples on how can I do sliding effect from the bottom. I was able to findout solution but it works with hover action where as I am trying to do is as below.
Scenario:
As shown in the mockup screenshot >> Cards will be displayed in the home screen >> users clicks on one of the Card >> background should be transparent 50% and movie details should get displayed in sliding button panel >> PLAY NOW should be active
Like the left menu loading in the given template below - playdo template
one of the similar example I found is this but as I mentioned this is hover feature - Sliding bottom panel through HTML, CSS and JS
An other from the top sliding - http://hoveralls.design-way.ro/
Template in the screenshot that i am using is - https://github.com/tomclaus/playdo
Hi and welcome to the front-end world.
What you need to do is to create two different css classes that contain the things you want to change (in this case the top and the transparency). One for when your card/tile is "minimized" and one for when is "maximized".
.minimized{
background-color: rgba(255,255,255, 0.5);
top: 90%;
}
.maximized{
background-color: rgba(255,255,255, 1);
top: 75%;
}
and then apply a click event to your card/title using jQuery or Javascript and swap those classes to give the proper behavior.
$("#card").click(function(){
if($(this).hasClass('minimized')){
$(this).removeClass('minimized');
$(this).addClass('maximized');
}
else{
$(this).removeClass('maximized');
$(this).addClass('minimized');
}
});
Make sure that the CSS for your card/tile includes this:
-webkit-transition: all ease 1s;
That line will give a smooth transition when you swap the minimized and maximized classes.
Please check this jsfiddle to see the code in action.
ps. Since I'm using the "-webkit-" prefix for the transition this example only will work with webkit browsers (safari and chrome)
Ok I finally understood what you want to do with the mockup.
Well the idea is the same, and I'm sure it can be implemented in many other ways but I hope this one helps you to understand what is going on.
Pretty much you need two states (classes) for the actions you want to achieve.
A Minimized and Maximized for the div that holds the movie details.
#details{
z-index: 4;
position: absolute;
-webkit-transition: all ease 1s;
background-color: #2980b9;
color: white;
padding: 30px;
width: 100%;
height: 300px;
}
.minimized{
top: 100%;
}
.maximized{
top: 40%;
}
And other two for the "gray courtain" that sits on top of the cards when the details are show.
#courtain{
position:absolute;
background-color: rgba(100,100,100, 0.5);
width: 100%;
height: 100%;
}
.active{
z-index: 2;
}
.deactive{
z-index: -1;
}
All these must be controlled or toggled using Javascript with a click event for the Card.
function hideAndShow(){
var details = $('#details');
var courtain = $('#courtain');
if(details.hasClass('minimized')){
courtain.removeClass('deactive');
courtain.addClass('active');
details.removeClass('minimized');
details.addClass('maximized');
}
else{
courtain.removeClass('active');
courtain.addClass('deactive');
details.removeClass('maximized');
details.addClass('minimized');
}
}
It is important to check the "z-index" values on the states to place them correctly above the other, the one with the highest z-index value is the one that remains on top.
I've updated the JSFiddle, check it out and hopefully all this makes sence.
I am kinda new to web development, and I would like to create a graphic button with a highlight pulsed effect, let me explain :
The button is built with 2 layers, the first is the default state always displayed, and the second layer is the highlighted state (white) displayed only when the button is clicked or touched (opacity of this layer is 1 when displayed, 0 when hidden).
My problem is that I would like the opacity of the highlight to go from 0 to 1 regardless the duration of the click or the touch event. The transition back to opacity 0 value should occur only when value 1 has been reached, that means that release events (mouseup or touchend) shouldn't be triggered until the opacity of the hightlight layer has reached 1.
I am using Compass (scss) and jquery mobile with phonegap encapsulation.
I have coded a version which works, but doesn't meet my goal :
The transition to highlighted state is stopped as soon as I release the button (for instance, if I make a very quick touch, even with a 0.2s transition on opacity, the highlighted state is not visible, though the touchend event is triggered... (the transition returns to 0 before reaching 1)...
The whole code maybe not so clean, but I am trying to learn :)
Any clue or advice is welcome!
the HTML code looks like this :
<div class=btn-test>
<span>
<a class=btn-a href=#>
</a>
</span>
</div
the SCSS looks like this :
#import "compass/reset";
#import "compass/css3";
.btn-test {
span {
#include background-image(image-url("foo.png"));
background-position: 0px 0px;
width: 72px;
height: 70px;
display: inline-block;
}
a {
#include background-image(image-url("foo.png"));
background-position: 0 71px;
#include transition-property(opacity);
#include transition-duration(0.2s);
#include transition-timing-function(ease);
width: 72px;
height: 70px;
display: inline-block;
-webkit-touch-callout: none !important;
}
.btn-a {
opacity: 0;
}
.btn-a:active {
opacity: 1;
}
}
What you want is an animation, not a simple transition. You get cross browser animation in compass 0.13 alpha with gem install compass --pre
The solution would be to add keyframes for your different states :
#import "compass/css3/animation";
#include keyframes(flashButton){
0%{
opacity: 0;
}
50%{
opacity: 1;
}
100% {
opacity: 0;
}
}
.animate-button {
#include animate(flashButton 1s ease);
}
And then with a little bit of jQuery :
$('.btn-test').on('click', function(){
//reset state in case animation has already been played
$('.btn-test').removeClass('animate-button');
setTimeout(function(){$('.btn-test').addClass('animate-button')}, 1)
});
I didn't use it yet but you can also use https://github.com/ericam/compass-animate which is a compass port of the great css animations found here http://daneden.me/animate/