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.
Related
I have a sequence of radio buttons on a web page. On page-load, the first radio button in the sequence is selected by default.
In addition, there is a <div> associated with each radio button. (The corresponding <div>'s class is the same as the corresponding radio button's value.)
Even though the first radio button is checked by default, the jQuery (source) does not trigger until the already-checked radio button is manually clicked after page-load. I learned that I can solve this by manually triggering the click myself on page-load via jQuery.
I tried doing so with $("input:radio:first").prop("checked", true).trigger("click"); (source), which I thought would click the first radio button in the sequence as desired, but to no success. (By the way, is this code clicking the first radio button on the page, or is it clicking the first checked radio button on the page? I'd prefer the code to trigger("click") the first checked radio button on the page.)
I also already hide all <div>s in the CSS, as suggested here.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".radio_div").not(targetBox).hide();
$(targetBox).show();
});
});
$("input:radio:first").prop("checked", true).trigger("click");
.radio_div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<input type="radio"
value="Bacon" checked="checked">Part 1</label>
<label>
<input type="radio"
value="is">Part 2</label>
<label>
<input type="radio"
value="Good">Part 3</label>
</div>
<div class="Bacon radio_div">Cured sugary meat</div>
<div class="is radio_div">be</div>
<div class="Good radio_div">bangin</div>
JSFiddle
How can I make jQuery click the default-checked radio button (so that its respective <div> appears) on page-load?
In addition, in my actual environment (which uses a semi-customizable web builder, so it's difficult to reproduce all the code involved), the default-checked radio button must always be clicked twice in order to activate its corresponding <div> with the jQuery. However, I cannot replicate this behavior in JSFiddle. If anyone has any insight on what might be causing this (and how to troubleshoot/resolve), I'd be happy to hear. (Perhaps jQuery could simulate a second click whenever a radio button click is detected?)
EDIT: The issue with my production environment (in the gif) was that the value of the first radio button was changing to whatever radio button was previously selected. Super ridiculous.
Because you're using 2 click functions.
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>
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 have a button element which has a javascript function attached to it, and this element, contains an input checkbox. Is it possible somehow to check/uncheck this checkbox, without firing the buttons javascript function?
I know that it is probably not a very good design, placing an input checkbox inside a button element, but I am trying to modify a plugin, and if possible, I would remain at my current design, because I would lose too much time on changing the whole design, time, which unfortunatly I can't afford:|
EDIT: Sorry, placing my text in < and > tags, made them dissapear:|
EDIT2:
What I am trying to achieve is to use tablesaw to create a sortable data table. When clicking on one of the headers in a tablesaw table, if sortable is set, it sorts the table by the selected column. I would like to place a checkbox in the first header, to select all rows visible. This is how my td looks like:
<th data-tablesaw-sortable-default-col="true" class="tablesaw-cell-persist
tablesaw-sortable-head tablesaw-sortable-ascending" scope="col"
data-tablesaw-priority="persist" data-tablesaw-sortable-col="true">
<button class="tablesaw-sortable-btn">
<div class="checkbox checkbox-success">
<input id="test" name="test" type="checkbox">
<label for="test">
Information
</label>
</div>
</button>
</th>
The event to the button is attached by tablesaw with an onclick event, but I can modify that too, cause I have access to the source. So basicaly, what I would like that, if a click is made ON the input element, modify the checkbox state, if a click is made anywhere else on or in the button, fire the tablesaw event.
I don't think that the attached javascript event is the problem, check out the following fiddle:
http://jsfiddle.net/16d8kasp/
There is no event attached here, but the checkbox state can't be toggled anyway.
Try this Jquery example. Might work for you -
JS Fiddle
$("input#test").on("click",function(e){
e.stopPropagation();
});
I have a submit button that on click, jquery checks if anything has been selected. If not then it does show() on an error message. Here's the html:
<p id="error_message" style="display:inline">dfd</p><input type="submit" class="button" name="Submit" value="Submit" />
At the beginning the message is hidden, but then revealed if the user clicks submit without selecting an option. The problem is, the displaying on my text shifts my submit button. This is what the submit looks like without the message:
And here's what it looks like after the message is displayed:
As you can see, the submit button moves to the right. I have to display inline if I want both the error message and submit to appear on the same line but how do I prevent any movement? Thanks
if you set the button to float:right; it stays on the right end of its container, until content from left div forces it to drop to next row.
so html:
<div class='container'>
<p id='error_message' style='display:inline;float:left;' >dfd </p>
<input type='submit' style='float:right;' name='submit'>
</div>
set the position of the button to absolute , OR set the width of the error-message to something fixed