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.
Related
I want to create a button like the one you see here
This page has a Feedback button on the right hand side which is near to the scrollbar. How can I create a similar button.
There can be a lot of solutions depending on the exact behaviour you want with the feedback button. Those can involve JavaScript to delay the button's appearance, and CSS transforms to rotate the element. The simplest one, I think, would be to create a fixed element and setting it's right to 0.
.feedback {
position: fixed;
right: 0;
bottom: 30%;
height: 80px;
width: 20px;
background-color: #55E;
color: #FFF;
}
.feedback:hover {
width: 30px;
}
<div class="feedback">
</div>
I ran into a strange problem and I need some help to figure this thing out. I have simple button with one div inside (which has position: absolute), here's the code:
document.querySelector('.mask')
.addEventListener('mousedown', e => console.log(e.type))
button {
position: relative;
width: 200px;
height: 60px;
background: none;
border: 1px solid #1c90f3;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(28, 144, 243, 0.2);
}
<button type="button">
click
<div class="mask"></div>
</button>
All I need is to add mousedown listener to the .mask element. Simple right? Well.. turns out Firefox has some problem with that. Please check live demo: https://jsfiddle.net/fzwbb3dp/ When you open console, you can see that in Chrome after you click the button, console logs correct message on mousedown event. but nothing shows in Firefox console. At this point I have completely no idea what is the source of this problem, so I will really appreciate if you can provide some guidance to me how to fix this issue. Thank you.
I think the issue here is that you are using the <button> tag in a somewhat unsupported manner, and Firefox is being a stickler about it.
Per MDN, the <button> element may only contain phrasing content -- this does not include <div> elements. If you change the parent button to a div it plays nicely (although you'll have to rewrite your CSS).
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...
I am implementing facebook's comments box and what i want is that the comments which i grab thru GET and render to template should be invisible to human but visible to search engines.
as experiment, i did this: http://jsfiddle.net/4D8hh/
how can i make first hide the second? but the second should stay crawlable.
z-index seems to be wrong choice here, with what else can i do it?is it possible?
Use display:none for anything you want to have on the page, but not have visible to the user. The content will be there... it just won't "show" on the page.
just put
background:white;
and that should be it
but qoura has some other wonderful idea please take a look here it works for them it should work for you . :)
https://plus.google.com/106413090159067280619/posts/KDSVtgHiuie
May I raise my concern here. Google don't appreciate people are trying to get a better search ranking by hiding text. And it probably won't work at all. Seen from a user perspective, why don't you want the comments to be visible?
Anyway, if you really wanna go down this road, start using:
http://schema.org/Comment
And then you can take the elements out of context with position absolute:
position: absolute;
left: -9999em;
Or like Twitter Bootsrap, .sr-only:
.sr-only
{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
I have the following div set which only works in IE9. On Moz and Webkit the onclick will not fire. If I chaneg the z-index to 0, the onclick works, but I have visibility issues with other elements in the site. Is there a way to get onclick to fire with negative z-indices?
<div id="adbg" style="margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor: pointer; z-index: -1;">
<div OnClick="window.open('/bgClicks/2');" style="background: #fff url('http://www.example.com/img/bg/w_1.jpg') no-repeat center top fixed; height: 100%; width: 100%; margin: 0pt auto; cursor: pointer;"></div>
</div>
<div id="wrapper">
Having a z-index of - here is definitely the problem. What is happening in Moz/Webkit is the outcome to be expected, you must have an invisible/transparent laying over the object that is picking up the click, thus not letting it go through to the actual link.
There are several things you can do..
1) Find the object that is over-lying it (Pretty easy in Chrome, just right click - inspect element, and usually the direct element under the mouse will be automatically highlighted in the inspector. Then for this element give a css rule of:
pointer-events: none;
This allows the click to register through it and to the object below.
Please note browser support for this isn't great, so I'd suggest another solution:
2) Restructure your code so that you don't run into this problem, in the logical world why would you have anything over the top of a link anyway, it's down to poor structuring really, re-think your margins/paddings, or make a jsfiddle so we can have a better look :).