I am working on a functionality where in when someone hover on to a block a form appears, I have used mouseover and mouseout functions to show the and hide the form. When we are selecting any option form these selection option, which are flowing out of the block range the form block is disappearing which is a flaw.
I have written the below jQuery
jQuery(function(){
jQuery(".find-a-doc").mouseout(function(){
jQuery(".doctor-con").css("display","none");
});
jQuery(".find-a-doc").mouseover(function(){
jQuery(".doctor-con").css("display","block");
});
jQuery("#edit-field-department-latest-value").bind("change", function() {
alert('Value change to ' + jQuery(this).attr('value'));
if(jQuery(this).attr('value')>=1)
{
jQuery(".doctor-con").css("display","block");
}
else
{
jQuery(".doctor-con").css("display","none");
alert('value selected is less than 1');
}
});
});
I want the form block to be displayed when any section is made from the selection box.
I'd first recommend changing to the .on jQuery method (as the bind live and delegate methods are deprecated) and then try binding your mouseout event to both the container and form fields, or possibly just the form fields, if you set up a jsfiddle with your html css and js for this I'll gladly solve it for you.
Related
$('input[name="list_checkbox_ids[]"], #frame, input[name="del_list_ids[]"]').on('keyup', function() {
$('#button_link').prop('disabled', ! $('input[name="list_checkbox_ids[]"]:checked').length);
});
The scenario is, I click on search button that generates a list of checkboxes. button_link should be defaulted to disabled until I select one of the checkboxes. Now in the above code, Howcome it does not remove the disabled? I tried looking for errors in the console but cannot find one. Pls help.
list_checkbox_ids are dynamically loaded on the page.
Can you change
This
$('input[name="list_checkbox_ids[]"], #frame, input[name="del_list_ids[]"]').on('keyup', function() {
$('#button_link').prop('disabled', !$('input[name="list_checkbox_ids[]"]:checked').length);
});
Into this(using event delegation) for dynamically created content
$(document).on('keyup','input[name="list_checkbox_ids[]"], #frame, input[name="del_list_ids[]"]', function() {
$('#button_link').prop('disabled', !$('input[name="list_checkbox_ids[]"]:checked').length);
});
I'm doing a simple show/hide on a search form that uses jQuery's toggleClass() and CSS to show and hide the form. That's easy enough, something like:
$('#site-search-toggle').click(function(e){
$('#site-search').toggleClass('search-open');
e.preventDefault()
});
What I'd like to do but am having a hard time figuring out is to put focus on the search input when the form is shown and remove the focus from the search input when the form is hidden.
It's easy to add focus:
$('#site-search-toggle').click(function(e){
$('#site-search').toggleClass('search-open');
$('#site-search input[type="search"]').focus();
e.preventDefault()
});
But I'm stuck at how to remove it when $('#site-search-toggle') is clicked again to hide the form.
Just found this thread as I've been banging my head against this problem for a while now.
I've found a very simple way to do this, and essentially all you need to do is provide a click handler. When the element is clicked, you toggle the class which controls the 'focused' state, but you also programatically focus the element:
document.getElementById('myelement').addEventListener('click', function() {
this.classList.toggle('focus'); // or whatever...
this.focus();
});
You will need to give the element some sort of 'tabindex' value, probably 0 or -1.
And then, you provide a 'blur' handler, which just removes the 'focus' class whenver the user navigates away from the element.
document.getElementById('myelement').addEventListener('blur', function() {
this.classList.remove('focus');
return false;
});
Works like a dream!
I'm sorry that this is not a jQuery answer, but it should be easy enough to adapt - I just don't use it...
Danny
OK I figured this one out, or at least I found a way to do what I need to do. I added a second class, search-closed, toggled both classes, then used each class to focus or blur the field, something like this:
$('#site-search').addClass('search-closed');
$('.site-search__toggle').click(function(e){
// toggle both classes
$('#site-search').toggleClass('search-open search-closed');
// set focus when form is visible, .search-open
// use setTimeout to make sure the cursor actually gets in there
// don't know why, but it works
setTimeout (function(){
$('#site-search.search-open .site-search__input').focus();
}, 20);
// blur when the form is not visible, .search-closed
$('#site-search.search-closed .site-search__input').blur();
});
Try this:
$('#site-search-toggle').click(function(e){
$('#site-search').toggleClass('search-open');
if ($('#site-search').hasClass('search-open')) {
$('#site-search input[type="search"]').focus();
} else {
$('#site-search input[type="search"]').blur();
}
e.preventDefault();
});
I'm using this Simpleselect plugin http://pioul.fr/jquery-simpleselect to style up a HTML select box. It simply hides the select element and replaces it with divs which can be easily styled. The issue I'm having is that I need to add an event listener to the select element which checks if it has been changed or not.
This is my code which works fine when I disable the Simpleselect plugin.
$("#mode").change(function() {
console.log("changed mode");
calcRoute();
});
The documentation has a paragraph about events towards the end of the page but I can't figure out how to get it to work.
This is the structure of the outputted HTML...
from example of developer http://jsfiddle.net/pioul/xn5yT/2/
$("select")
.simpleselect()
.bind("change.simpleselect", function(){
console.log('change; new value='+ $(this).val());
});
Reading the documentation, you just have to pass the namespace of the plugin to the event (they change the element id by default):
$("#simpleselect_mode").change(function() {
console.log("changed mode");
calcRoute();
});
or you can bind to
$('#simpleselect_mode').bind('change.simpleselect', function() {
//Your code
});
Was styling the checkboxes of my webpage with jquery using the tutorial here
But i realized that I could not do SelectAll checkbox that will select all the checkboxes in my list. It works in the backend (the checkboxes are selected) but it does not show in my page.
Added a demo to show my problem. May need to port to your system to test it out
Demo
what can I add to the jQuery Custom Radio-buttons and Checkbox javascript file in the to achieve the select all checkbox function
Thank you!
You can try this FIDDLE:
$(function () {
var $chbxs = $('.checkbox');
$('#sel_all_lbl').toggle(
function() {
$chbxs.css('background-position', '50% -50px');
$('#checkboxall .truefalse').prop('checked', true);
},
function() {
$chbxs.css('background-position', '50% 0px');
$('#checkboxall .truefalse').prop('checked', false);
}
);
});
What I've done? First, in your fiddle you need to correct some syntax errors, then add a plugin code to the DOM, and you scripts to the script panel, so they will fire when DOM is ready. (This is all about jsFiddle, so you to understand how it works)
About actually your code, you attached click-handlers (.toggle()) to the checkbox element. But click event does not fire on it. Script simply changed the property of the checkbox, but there is no click. So you need to attach these handler to the element wish user actually clicks, that is square icon. (I added an id="sel_all_lbl" to it)
Try to use event handling on the select all checkbox and manually check all the checkboxes from javascript.
Possibly a silly question, but how do I prevent a select element in a form from showing its drop down menu when it's clicked on? I tried the following:
$('select').click (function (e) {
console.log (e);
return false;
});
and
$('select').click (function (e) {
e.preventDefault ();
console.log (e);
});
But neither worked.
What am I doing wrong?
EDIT: The reason I need to know is for a jquery enhanced select element that needs to degrade gracefully. The idea is the select, when clicked, opens a jquery UI dialog with a nicely maked up list that the user makes their selection from (clicking a list item causes the select's value to update). If JS is disabled then the select should just operate as normally.
The problem is that as well as the dialog opening, the dropdown also appears, which is not what I want. I can't just disable the control, as its value needs to be submitted along with the rest of the form.
This should work:-
$('#select').on('mousedown', function(e) {
e.preventDefault();
this.blur();
window.focus();
});
The problem is that you're using the wrong event.
<select onmousedown="(function(e){ e.preventDefault(); })(event, this)">
<option>Some Option</option>
</select>
JsFiddle
From my experience, if i need to disable something, the easiest way to have another invisible element on it (use absolute positioning). When you want to allow default behavior again, you just hide absolute element.
I believe the best solution would be to replace the select element with something else to click on (a button or a link).
BTW, you may want to look into the CSS 3 property appearance, which theoretically allows you to let that replacement element look like a dropdown. Support is however currently very limited:
http://css-infos.net/property/-webkit-appearance
https://developer.mozilla.org/en/CSS/-moz-appearance
You can, the trick is to cancel the mousedown event, not the click. The event chain is made in such a way that click and mouseup cannot occur if mousedown was cancelled:
function cancelDropDown(ev) {
ev.preventDefault();
}
document.getElementById("selectElement").addEventListener("mousedown", cancelDropDown, false);
Hide the select options on page load (if Javascript enabled). They will not display when the select box is clicked, but the text of the first option ("Select an option", or whatever) will still appear in the select field.
$(document).ready(function() {
$('#idOfSelect option').css('display', 'none');
});
Updated Solution:
$(document).ready(function() {
$('#idOfSelect').focusin(function() {
$(this).css('display', 'none');
$('body').click(function(event) {
$(this).unbind(event);
$('#idOfSelect').css('display', 'block');
});
});
});
I just solved this exact problem, by manipulating the 'size' attribute of select. Not very elegant, but worked. Hope its of some help to you.
<!-- Example select dropdown -->
<select id="select" onclick="tackleDropdown()">
</select>
<!-- The JS function -->
<script>
function tackleDropdown(){
document.getElementById('select').setAttribute('size', 0);
// your code for displaying the jQuery UI dialog (is it colorbox???)
// re-enabling the drop down
document.getElementById('select').setAttribute('size', document.getElementById('select').options.length);
}
</script>
Use disabled
$(this).attr("disabled","disabled");
Some good answers here. But still I had to make some additions.
$(document).on('keydown mousedown touchstart', 'select.disabled', function (e) {
e.preventDefault();
})
A simple solution based on CSS is this small fragment:
select:read-only * {
display: none;
}
This will make the options not available when the select is selected. This action mimics the behavior of the "readonly" attribute of the input.