I have a <button> with an accesskey assgined to it. The accesskey works fine as long as the button is visible, but when I set display: none or visibility: hidden, the accesskey no longer works.
Also tried without success:
Use a different element type: a, input (various types, even typeless).
Assign the accesskey to a label that wraps the invisible control.
Note, I'm not sure if this is the standard behavior, but prior to Firefox 3 the accesskey seemed to worked regardless of visibility.
The behavior you are seeing is correct, you cannot "access" an element that is not displayed. Sal's suggestion will almost certainly work, but may I ask what your purpose is in doing this? There is probably a better way to accomplish what you are trying to achieve. Have you considered using a keypress handler?
I think you probably want to go with the other suggestions if you don't want a keypress handler. Try position:absolute; left:-9999px; to pull your content out of the page. Or use absolute position, change opacity to zero and z-index to -1. By using position absolute the element won't affect positioning of other content on the page, setting opacity will make it not visible. Even with opacity set to zero you can still click on the element and though you cannot see it it may prevent you from being able to click on other elements of the page so use a negative z-index to pull it behind other content.
You can apply a negative margin to push the element outsite of the visible page. I think many browsers and text readers ignore elements with display:none and possibly also visibility:hidden.
Easiest solution: height: 0px; margin: 0px; padding: 0px; in your CSS.
Instead of visibility or display attributes, position the button outside of the page
<button accesskey="a" style="position: absolute; top: -9999px">button</button>
Warning: using left instead of top causes a weird display bug in ie7
Related
Current Design
In a website I am designing I have a number of elements that initially will appear hidden, until the user needs to see them. For example they have scrolled to a desired height on the page.
Currently this works by JavaScript adding a class line.classList.add('show-header-line');
Which in CSS will be defined next to the main styling for the element. This show variant of the class will only contain attributes required to make the element visible opacity: 1. The main styling for the element will contain the opposite attributes required to hide the element initially opacity: 0.
The Alternative
Of course this could work the other way around. With a class designed to hide the element initially being set in the html, then to be removed when required by JavaScript.
HTML
<div class="header-line hide-header-line" />
JS
line.classList.remove('hide-header-line');
Note
Of course I could add and remove styles directly (without the need for extra classes) in the JavaScript, but this seems much worse. Regarding a lack of separation of concerns.
Question
My current approach means the resulting rendered DOM is littered with elements that have main style class and a show class. The alternative means my html file is littered with elements with a main style class and a hide class. Which is considered better practice? Is there another cleaner way I could be doing this?
I would strongly suggest against using opacity:0 for this, rather use display: none. The reason being that an element with opacity: 0 still occupies space in the markup, whereas display: none will add the element to the DOM, but it won't be rendered in the markup (if that makes sense).
Here is a more detailed explanation
Also, an example using the scroll pass certain point you said, this is how I would do it, note code is untested.
window.addEventListener('scroll', function(){
document.querySelector('#navigation').classList[this.scrollTop > 200 ? 'add' : 'remove']('fixed-nav');
});
css
.fixed-nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
In a table... I have action buttons that appear when the mouse goes over that row by using ng-cloak and ng-show.
The problem is, when the icon appears, it takes up more space than when its not there, and the html around it jumps.
I even set my css to use display:none for ng-click, which I thought is supposed to preserve the space the hidden element takes up (as opposed to visibility: hidden).
How can I fix this? OR can you think of a better way to do this?
<tr id="treeHistoryItem" ng-repeat="o in tree.history"
ng-mouseover="showEdit=true" ng-mouseleave="showEdit=false">
....
<td align='right'>
<a ng:cloak ng-show="showEdit" href
ng-click="removeTreeRec(o.$$hashKey)"
class='fa fa-times _red _size6' ></a>
</td>
</tr>
Here's a plunkr example:
http://plnkr.co/edit/POA9b2pZA9QbBgcMsxBE?p=preview
ngCloak is used to
prevent the Angular html template from being briefly displayed by the
browser in its raw (uncompiled) form while your application is
loading
The correct place to put it would be way further up in the DOM tree but it's really meant to solve a different problem than this. I would try just going with ngShow here and rather override its CSS class, .ng-hide to do visibility: hidden; rather than display: none;
(Visibility is the one that preserves space, not display).
As noted in the docs for ngShow you will need to use !important to override the display: none; property.
Note, in the version of Angular you were using in your plunker, ngShow is adding an inline style to the hidden element. I am not sure which version moved away from that but I could not get this approach to work with 1.0.5.
Here's it working with your plunker, but with the most recent Angular version:
Plunk
Late to the party, however...
In my case, whenever I need to do this i use ng-class. If you copy the code from your ng-show and put it into:
HTML:
ng-class="{'disabled': showEdit}"
ng-click="showEdit && removeTreeRec(o.$$hashKey)"
CSS:
.disabled {
visibility: hidden;
cursor: default;
}
Cursor:default simply makes the cursor not change for usability purposes.
Hope this helps!
EDIT: in this case adding the cursor and showEdit to the ng-click probably wont make a difference as the icon will always be shown if the mouse is over the icon due to the hover event, but nonetheless I think it's good practice to cover all bases
You can do that using css. You can put to your <tr> a height.
you can assign height to your containers which sometimes isn't practical because you don't always know the content height up front. or you could change your classes content declaring them to be
.not_remove.ng-cloak,.not_remove.ng-hide{
display:block;
visibility:hidden;
}
note the .not_remove class. this will enforce this new behavior only on elements who have the no_remove class. the display property can be setted to what ever flow your element follows
How can I set the focus on a hidden textbox element?
I tried this:
document.getElementById("textControl_fd_component_JSON_TASK_NStext64").focus();
But, this does not work here. As alert(document.activeElement.id); returns null in this case.
If I make this field visible, the above script works fine. Any ideas where I am getting it wrong?
If you really need to do this, make the box transparent, not hidden:
opacity:0;
filter:alpha(opacity=0);
Alternatively, if you want to ensure that the user doesn't accidentally click it, just place the input inside a div with
width: 0;
overflow: hidden;
However, there is most certainly a better way to do what you want, maybe using keydown/keypress events.
I don't think this is allowed, at least in IE. I got this information from jQuery's focus page.
You can add some js if you need a workaround and cannot change the opacity attr.
/* bind a click handler to your trigger */
jQuery('#your-search-trigger').on('click', function searchIconEventhandler (event) {
/* in case your field is fading, cheat a little (check css transition duration) */
setTimeout ( function timeoutFunction () {
/* show the cursor */
jQuery('#your-search-input').focus();
}, 100);
});
Using Apsillers answer, my setup for this same situation involved:
a parent div with position:relative;
a child form element position:absolute; z-index:0; opacity:0; filter:alpha(opacity=0);
a second child element position:absolute; z-index: (value > 0) (positioned to cover the transparent input).
Aspillers' answer is the correct one given the question asked, but I wanted to give a practical example of when this is necessary.
Specifically, form elements can be hidden if you're using any kind of script/plugin that makes "fancy" inputs (i.e. radio/check elements, select elements). But if your script or plugin is written poorly, it can eliminate keyboard accessibility. Preserving the flow of a form by allowing all elements to have focus can save a lot of headaches for website users.
Currently I'm working on a website where I'd like to show some toolstips for specific DIV elements. My weapon of choice is jQuery Tools.
So when I use $(".toolTipMe").tooltip(); it works quite nice. As soon as I hover the element a new DIV appears in the DOM:
<div class="tooltip" style="display: none; position: absolute; top: 313.65px; left: 798.5px;">foo</div>
However the design is done by our very own css-monster (you should this this guy!) and he's using a a lot of z-indexes so the .tooltip-DIV is behind the other elements.
Now the question:
The following code in our .css File is not having any effect:
.tooltip{
z-index: 9001;
}
In fact the attribute is not even showing up when debugging the website. But the following will work:
$(".toolTipMe").tooltip({
onShow: function(){
$(this).css("z-index","9001");
}
});
I'm not sure how CSS Rules are applied for dynamic inserted DOM Elements but what I really detest in the current workaround is the mixture of functionality and style. Any chance to clean up this mess? :C
I am not familiar with jquery tools, but if your z-index is not working you must need a !important tag or making it position:relative or position:absolute
In jquery tools tooltip you need to specify the z-index inside the tooltip constructor like:
$(".toolTipMe").tooltip({ z-index: '9001'});
I'm not sure if it is z-index or zindex.. check it out
I want to link an entire <div>, but CSS2 does not support adding an href to a div (or span for that matter). My solution is to use the onClick property to add a link. Is this acceptable for modern browsers?
Example code:
<div class="frommage_box" id="about_frommage" onclick="location.href='#';">
<div class="frommage_textbox" id="ft_1"><p>who is Hawk Design?</p></div>
My test page is at http://www.designbyhawk.com/pixel. Updated daily.
Thanks for the help.
You don't need to do that. There's a perfectly simple and standards-compliant way to do this.
Block-level elements will by default take up the entire available width. a elements are not by default block-level, but you can make them so with display: block in CSS.
See this example (no Javascript!). You can click anywhere in the div to access the link, even though the link text doesn't take up the whole width. You just need to remove that p element and make it an a.
Attaching a click event handler to a <div> element will work for your users with JavaScript enabled.
If you're looking for a progressive enhancement solution, however, you'll want to stick with a <a> element.
It is acceptable, only it's not good for SEO.
Maybe you can make a <a> element act like a div? (settings it's style to display:block etc.)
It will work in every browser(even IE6). The only problem with this is that search engines probably won't fetch it since it's javascript. I see no other way to be able to make an entire div click-able though. Putting an "a" tag around it won't work in all browsers.
If all you're trying to achieve is a large clickable box, try setting the following CSS on an anchor:
a {
display: block;
padding: 10px;
width: 200px;
height: 50px;
}
HTML:
<div class='frommage_box'>
<a href='location.html'>CONTENT GOES HERE</a>
</div>
CSS:
.frommage_box a{
display:block;
height:100%;
}
By default block elements take up 100% width. We adjust the height to 100%. And this will allow spiders to crawl yoru page.