Im trying to create an element, which when clicked, both opens a hyperlink and actives a label connected to a checkbox. The element is a menu item. When that menu item is clicked, I want the anchor/link to be opened and the menu to be closed through CSS, hence the checkbox.
However, whenever I put the label inside the hyperlink, the checkbox gets checked, but the hyperlink does not get opened.
<a href="#anchor">
<label for="checkbox">
Menu Item
</label>
</a>
When I put the hyperlink inside the label, the opposite happens: the link gets opened, but the checkbox does not get checked.
<label for="checkbox">
<a href="#anchor">
Menu Item
</a>
</label>
Is it possible to active the label and open the hyperlink simultaneously without using JavaScript? If so, how?
Remove the a element! It's not valid to have a label inside an anchor or an anchor inside a label.
Just add the onclick="location.hash=''" event for your input element to run code. (an example below)
<input type="checkbox" id="checkbox" onclick="location.hash='#anchor';" />
<label for="checkbox">Menu Item</label>
<!-- div for margin -->
<div style="height:10000px"></div>
<a name="anchor">Lorem ipsum dolor sit amet.</a>
Related
I have <input type="radio" which i need to make activated when i click on <li> element. I have <label><li></li></label>, label is used to activate radio here (it works). The problem is <li> visually gets separated from other <li>s. I tried making <li><label></label></li> but it makes radio activated only when text inside <label> is clicked. In other words, i need <li><label></label><li> to work even when i'm clicking not the insides of <label></label>. Here's the picture of when it's <label><li></li></label> (ignore radios, those are not the problem):
This problem isn't about radio - I have shown radio on screenshot just to know if radio successfully activated by clicking on label or not. The problem is <label><li></li></label> has <li> inside but it's the <label> which should be inside <li>. If I do so (label inside li), then only "test-60" text is clickable and activates radio, not the whole <li>
<label for="radio-button">test 60</label>
<input type="hidden" value="test-60" id="radio-button"/>
also, recommend making input in position absolute and top 0 and left 0
Example
I am creating a custom Typeahead component and trying to make sure that the Typeahead's popup is accessible through keyboard navigation. This it my HTML markup:
<div class="wrapper">
<input type="text" ...>
<div class="data-wrapper" tabindex="-1">
<ul>
<li>
<button tabindex="0">John Doe</button>
</li>
<li>
<button tabindex="0">Mary Poppins</button>
</li>
</ul>
</div>
</div>
I am not able to tab into buttons (when I click TAB, I go back to the address bar when only this markup is present). However, if I add tabindex property to <li> elements, I am able to tab into the list items. However, I am not able to click the buttons because keyboard is focused on the list item. How am I supposed to set up focus for the buttons to be navigable using keyboard?
EDIT: Or better yet, is it possible to change the behavior of the typeahead; so that, it is navigable using arrow keys (like select boxes).
I have the following html:
<li class="list-group-item li-tab-1">
<div class="list-group-item-desc" data-target="#tab-1" data-toggle="tab">
<strong>1</strong>
<div class="small m-t-xs">
<p>Description</p>
</div>
<div class="onoffswitch">
<input type="checkbox" checked="checked" class="onoffswitch-checkbox" id="tab-1-enabled" /> <label class="onoffswitch-label" for="tab-1-enabled"> <span
class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</li>
This is a Bootstrap tab. .onoffswitch is a CSS3 switch.
I'm trying to make the entire <li> clickable to show #tab-1 as the tab content. I can do this by defining a <div> with the data-target and data-toggle attributes. This works - when I click the div the tab shows.
However, embedded inside the <li> is a CSS3 switch. I want that to work independently of the clickable div.
This is similar to Links inside of larger clickable areas (CSS Only), except the nested clickable elements are CSS3 switches instead of anchors.
Using the CSS3 switch outside the anchor works fine.
I tried making the actual hidden checkbox visible, removing the CSS3 styling, and clicking that. That does work, so is this related to CSS3?
I wondered if this is related to propogation - the trouble is that if I set an event listener for control.select or change I get no events - just the div click event.
Turned out it was propogation that was the problem (thanks #TW80000).
$(".list-group-item-desc").click(function(ev) {
var isSwitchClick = $('.onoffswitch').has($(ev.target)).length > 0;
if(isSwitchClick) {
ev.stopPropagation();
}
});
That checks whether the click was inside the switch, and if so stops propogation.
In reality I have since moved the Bootstrap tab attrributes into the <li> but I think either approach should work to avoid swallowing the event.
My question:
How to access hidden input elements via tab?
Detailed explanation:
On my website, for radio buttons I have set visibility none and customized the before element to get a custom design.
The problem is when I try to access the input type radio via tab I am unable to do it since it is visibility hidden.
So, can anyone suggest me how to access hidden input elements with tab?
Website
Demo Form
Please visit the link above, you will find a form there. Now, please try to access the radio buttons with tab. It skips the radio buttons.
You have to have an item in your tab flow that supports tabindex, and since your radio button is hidden that won't work. The anchor tag does support tab index however, so you can wrap the inner elements of each of your li tags with an a tag, and assign it a tabindex that works in your flow...
Change:
<li tabindex="0" class="radio gchoice_2_14_0">
<input style="margin-left:1px;" name="input_14" type="radio" value="2017/2018" id="choice_2_14_0" onclick="gf_apply_rules(2,[0]);" onkeypress="gf_apply_rules(2,[0]);">
<label tabindex="0" for="choice_2_14_0" id="label_2_14_0">2017/2018
</label>
</li>
To:
<li tabindex="0" class="radio gchoice_2_14_0">
<a tabindex="1010">
<input style="margin-left:1px;" name="input_14" type="radio" value="2017/2018" id="choice_2_14_0" onclick="gf_apply_rules(2,[0]);" onkeypress="gf_apply_rules(2,[0]);">
<label tabindex="0" for="choice_2_14_0" id="label_2_14_0">2017/2018
</label>
</a>
</li>
This will give the anchor tag focus when you tab to it (assuming the previous element's tabindex is '1009' or lower).
This answers your question on how to tab to it. Now that you have that, you'll need to do a couple things:
Style the element's css for form li.radio a:focus as you see fit.
Set up key press events for the a elements so that you can actually select your fake radio button with the enter key press when it's focused.
I want to create a menu button for my responsive design.
I want to display the menu when the user has clicked on the button, and hide it when he has clicked back.
My Html code is the following:
<!-- Invisible checkbox -->
<input type="checkbox" class="menu_hidden_checkbox" id="show_menu" role="button" />
<!-- Menu button -->
<label for="show_menu" class="btn btn-navbar"><i class="icon-align-justify"></i></label>
The associated CSS code I use is:
.menu_hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;} */
.menu_hidden_checkbox:checked +.left-menu{display:block;}
The above code isn't working at all. When the checkbox is checked, nothing happens.
Did I make something wrong?
JSFiddle: http://jsfiddle.net/P8DJZ/ (Expand the row to see full screen/smartphone mode)
Here is the solution:
Put your switch button everywhere you want to:
<label for="show_hide">Click here to hide/show the div</label>
Put this code just before the div you want to show/hide:
<input type="checkbox" class="hidden_checkbox" id="show_hide" />
For example, if you want to hide this div, just do something like that:
<input type="checkbox" class="hidden_checkbox" id="show_hide" />
<div class="hidden_div">
Your hidden content will be there.
</div>
Then in your CSS file, add the following code:
.hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}
.hidden_div{display:none;}
.hidden_checkbox:checked + .hidden_div{display:block;}
The first line will hide the checkbox so the user will only be able to use your switch button and not directly the checkbox. The second line will hide your div.
The third and last line is a condition that will change your div display to block when and only when the hidden_checkbox is checked.
Basically, when the user will click on the switch button, the hidden checkbox will be checked and the hidden_div will appear. If he clicks once more on the button, the hidden_div should disapear.
I hope this could help someone.