We Keep Coding

Hide element from user click without disabling the event

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.

Slimscroll is not reacting on mouseover (or anything at all)

I am trying to implement a drop-down menu containing notifications, like this page has: http://infinite-woodland-5276.herokuapp.com/index.html. The bullhorn icon in the top right part of the site, and it's menu, is what I am trying to recreate.
I have succesfully made a header menu icon, with a list of items. However I can't make the scrollbar work.
It's using the jquery plugin slimScroll, found here: http://rocha.la/jQuery-slimScroll.
The attatchment of the scrollbar seems extremely simple and straight forward, in the tutorials. Here is what I do:
$(document).ready(function(){
$('#main-navbar-notifications').slimScroll({
height : 250
});
});
After implementing this code, This code appears in my DOM:
<div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 195.925px; background: rgb(0, 0, 0);"></div>
<div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div>
These appear not inside the #main-navbar-notifications, as I would have expected, but subsequently. However, I found that the exact same DOM structure is present in the example I am trying to copy. Seems like it is as it should.
But my scrollbar simply does not work. If I hover the mouse over the div, nothing happens. I tried setting the scrollbar to always be visible, and still nothing happened. Then I went into the HTML itself, in chrome inspector, and manually set the scrollbar and rail to be visible. That worked for visibility, as they visually appeared exactly as I would have expected them to, but they still didn't react to any mouse actions.
The only info I have been able to find on the subject, is to make sure that my scrolling div is set to position: relative;, but that didn't do anything. There are no error messages, or any messages at all in my console either.
I've tried to recreate my problem in a fiddle, but I was unable to upload the slimscroll-library there.
Does anyone know what this error could be about? Or any strategies for figuring out what the problem actually is?

Turns out, I had manually copied a <div class="slimScrollDiv">, a wrapping div which is supposed to be generated from the plugin, for the scrolling pane. Once I removed that div, slimScroll worked perfectly...

On input focus make background look like modal

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.

jQuery opacity animation not working but any other animation does

I have a really strange problem: I am using jQuery v11 on the latest Chrome on localhost. While I manage to use jQuery.animate() on my website with any elements and features (including opacity), I have one element that I just can't.
I tried to trigger the animation within and outside the $(document).ready() function and they both resulted in the same thing. I tried with fadeTo, fadeIn/fadeOut, animate opacity, all of them the same thing. The animation starts but after a certain percentage it just doesn't continue and jumps right to the end. I also tried it with e.g. padding and it works perfectly.
I am using the callback too but removing or adding it did not affect performance on either cases. Also, I have browsed through dozens or even more questions already, so I feel I did my research.
Thank you for your help!
JavaScript:
$("#nb_copy").stop().animate({ opacity: 0 }, 300, function()
{
$(this).css("background-position", "-16px").stop().animate({ opacity: 1 }, 300);
});
HTML:
<div id='notes_buttons'>
<a id='nb_copy' data-info=''>C</a>
</div>
CSS:
div#notes_buttons
{
width: 18px;
position: absolute;
top: 180px;
right: -24px;
opacity: 0;
filter: alpha(opacity=0);
}
div#notes_buttons a
{
cursor: pointer;
display: block;
width: 18px;
height: 18px;
margin-bottom: 1px;
background: red url("/db/sprite.png") no-repeat;
background-position: 0px 0px;
}
Note: I would like to use this animation in the following situation: I am animating the opacity (see, here it works...) of the parent div, then when the nb_copy button is pressed, it fades out, changes the bg position and fades back.
If I use really long animations (3000) and add a delay, the first animation interrupts after about 40%, then after the 3000 ms are over, it counts the delay and then the new animation. This way I have no problem with the animation. Also, if I do not use the callback, it is working. But the two interrupt each other somehow...
if I only use the .css in the callback, it applies instantly (the background position) but the animation runs smoothly.
I already spent about 1.5 hours on such a small thing... Well, if I reproduce the code above in JSfiddle, it is working: https://jsfiddle.net/g6z4xx16/. I am also using Zeroclipboard with the same button, may it be the problem?
In case I get it out of the Zeroclipboard nest, and put it into a simple click trigger, the same result.

Why to make simple work complicated, just use fadeToggle() instead.
Simply change your code to this :
$("#nb_copy").fadeToggle(function()
{
$(this).css("background-position", "-16px").fadeToggle();
});
Using fadeToggle() is better because animate() is used to make custom animations.
In your code place your <style> tag before the <script> tag.

Link isnt working when positioned with a background image?

I've got this link
Without the class attribute and a little bit of text, the link works fine, but when I add the class to apply the background image and position the button, the link stops working. It gives no errors in the firefox console either. Any ideas? Heres my css rule for this:
a.newButton
{
margin: 5px;
position:relative;
left: 310px;
top: -32px;
display:block;
height: 32px;
width: 32px;
background-image: url(Images/add-icon.png);
}
This is in an ASP.NET MVC2 application, I am using the latest version of jquery (1.4.1) and this link is placed inside of a jQuery tab container, inside of a dialog.

Nick Craver had it right when he suggested the negative positioning value was moving the image outside of the clickable area. I used margin-top: -32 instead to move it back to where it was. The link is now clickable. Thanks to everyone for their suggestions.

Did you already try a high z-index for a.newButton ?
Maybe there is something in front of the Button.