I have a table and within this table there is a column that is entirely check boxes. This table is going to be visible on mobile devices so it would be nice if the check boxes were easy to use. So I am attempting to figure out how to have the table cell parent, td, control the checking of the check box. So the user isn't actually clicking on the check box itself but rather the table cell. To do this I setup an onclick function for the td which checks or un-checks the corresponding check box. This works fine so long as the user doesn't click on the check box itself. If that happens then the box checks itself and then un-checks itself because it is following what it normally does and then calls the custom listener afterwards. I've attempted to set the check box to disabled but a giant prohibited (no-smoking like) symbol appears when run in Chrome. So is there a way to leave the check box as a whole enabled but disable the checking functionality of it?
Edit:
I tried using the higher z-index and it didn't like that at all. Here's what the code looks like:
<td style="text-align:center; width: 20%;">
<div id="checkboxCell{{:#index}}" onclick="PageConfigHome.toggleCheckboxes({{:#index}});" style="position:absolute; z-index: 999;">
<input type="checkbox" style="z-index: 1" onclick="PageConfigHome.toggleCheckBoxes(null);" id="checkbox{{:#index}}" class="HomeScreenCheckbox"/>
</div>
</td>
Solution:
I found this post that resolved my issue: Tick a checkbox in a table cell by clicking anywhere in the table cell
have you tried passing an event to the click event and use event.stopPropagation(); which prevents events from bubbling up? See this
Put an absolutely-positioned DIV in the same cell, with a higher z-index. Put the click event on the DIV instead.
Related
I want user to be able to scroll through select options with up/down arrows, but be able to press ctrl-c to copy from a matching input element whenever they want, seamlessly.
But I'm having trouble juggling the focus.
The best I've gotten is it works but I have to press down twice to move to the next select element.
Here is a fiddle I created, which isn't even populating the select box for some reason. Though it works on my server. On my server the picsarray array is generated with PHP, but it should be the same effect as here.
https://jsfiddle.net/bbmqy0xm/2/
You can leave focus alone and just call select() to highlight the text after you set it:
function showpicture(selectobj) {
/* deleted irrelevant js */
$("#image_name").val($(selectobj).val()).select();
}
https://jsfiddle.net/s4rmytt5/
I'm building a couple of toggle buttons for Highcharts in Angular. However, my question is more of a general javascript question and not about Angular or Highcharts since I've seen this problem pop up when working in strictly jQuery with checkboxes as well.
Here is my problem: When toggling checkboxes, I sometimes click the outer edge of the checkbox or have another dropdown open nearby and find that the box state does not change although the function on the click fires anyway.
For example, if you open a nearby bootstrap dropdown box and then click a checkbox while the dropdown is open, the input checkbox acts weird and does not change the state but still fires the intended function.
In order for the checkbox correct itself thereafter, I have to re-toggle the button for the state to match the function that is supposed to fire on that state.
Here is a small video clip that illustrates my example:
http://screencast.com/t/YRaDchstI
<input type="checkbox" ng-model="check1" ng-click="toggleGrp(check1)" value="{true: check1 == true}">
Despite using value="{true: check1 == true}" as a failsafe in determining if the box is in the checked state or not, the results are inconsistent.
Is there something I can do in JS to stop this, or will this require more of a hack on my part? I'm thinking if I can't fix the issue, I'll have to create an invisible box that sits on top of the buttons and becomes displayed when the nearby dropdown box is open.
I've found that if I toggle the scope from a button, I can trigger the input checkbox remotely and the button behaves the same with or without an expanded dropdown nearby.
<button type="button" class="btn"
ng-click="check1 = !check1"
ng-class="{active: check1}"></button>
<input type="checkbox"
ng-model="check1"
ng-click="toggleGrp(check1)"
style="visibility: hidden;">
Can anyone help me how to make a lights off effect in an entire table row if i click a specific textbox and remove the lights off effect if i click again the specific textbox and goes the same with other textboxes with there specific table rows.
My problem is when i click a specific textbox the textbox is the only one who is highlighted. I want it to be the entire table row on that specific textbox.
current code: http://jsfiddle.net/AP6kr/4/
If you target $(this).parent() instead of $(this), you'll get the whole row. See JSfiddle: http://jsfiddle.net/AP6kr/6/
My example is actually targeting the <td> tag, which is the parent of the input. Since it's the only td in the row, it looks the same as if you go up one more parent to the <tr> tag. you can see that effect here: http://jsfiddle.net/AP6kr/8/
It's pretty much indistinguishable now, but if you had more cells per row it would matter.
You could use pointer-events:none; on #overlay : http://jsfiddle.net/AP6kr/5/
I have a div which hides a select box. When a user clicks on the div it disappears and shows the select box. Then when the user clicks away from the select i want the div to show again and essentially cover it up.
so, to hide the div I have the following:
onclick="document.getElementById(\'infoi'.$div_i.'\').style.display = \'none\';"
When the user has touched the select and clicks away I have the following which covers the select again:
<select name="g_name" onchange="this.form.submit();" onblur="document.getElementById(\'infoi'.$div_i.'\').style.display = \'block\';" style=width:170px;>
for this to work as i want it to though, the user has to actually click the select, even without selecting anything, for it to gain focus and therefore the onblur will turn the div back on.
So, I try the following to hide the div and set the focus on the select:
onclick="document.getElementById(\'infoi'.$div_i.'\').style.display = \'none\'; document.getElementById(\'g_name\').focus();"
Bit it simply does not work, any ideas?
I have a working example of what I think you are after here http://jsfiddle.net/Znct3/10/
looking at your code you were applying focus to an element with an ID of g_name but your select only has a name of g_name
I'm having a few problems creating a multiple select checkbox list that appears when a user clicks a select field (I use the onfocus event).
As far as showing the list, that's fine, however how can one prevent the actual select field from showing a dropdown using javascript?
Why not! :)
DEMO
$('.sel').focus(function() {
this.blur();
window.focus();
$('.dropdown').fadeToggle(300);
});
Here is the solution I use to customize the appearance of my select and fileupload controls:
give your element (select) opacity:0.1 either by css or jQuery fadeTo() function
wrap your element with a container div and give it position:relative.
add a sibling (drop panel) to the element and give it position:absolute, top:, left:0 and width equal to the width of element.
show the drop panel using jQuery in $(select).click() event.
may seem weird, but works cross browser :)
Haven't tried to suppress the select dropdown, but if all else fails you can just create a custom form element. Such as:
<dl>
<dt>Please select an option</dt> <!-- Text -->
<dd> </dd> <!-- Style as downward arrow -->
</dl>
<input type="hidden" name="custom_select_value" value="selected option" />
Style the DL (or which ever markup you wish) to look like a select element, then use a click handler to bring down your multi-option box. Also populate the hidden input with JS when an option is selected to ensure the data is submitted with the form.
I needed a similar UX, so I created this:
harshniketseta.github.io/popupMultiSelect
Hope this helps you.