I want to make multiple checkboxes to be "checked" with mouse click-and-drag.
It works with my script:
var $j = jQuery.noConflict();
$j(window).load(function () {
$j(".filterset").selectable({
filter: 'label',
stop: function () {
$j(".ui-selected input", this).each(function () {
this.checked = !this.checked
});
}
});
});
JsFiddle
But it works only when you click and drag on the "labels" but not on the checkbox itself.
How to modify the javascript, to get this work?
Figure this out... I saw that you already had a padding for each of the labels that overlapped onto the checkbox, so in theory it should've worked. The only issue was that the checkbox was actually above the label.
All you needed was some CSS added to the input checkbox to make sure the label was above it and it works like a charm :
Fiddle
.filterset input {
display: inline-block;
z-index: -1;
}
I change the selector for the input element and it appears to work (although a little 'touchy')-
http://jsfiddle.net/jayblanchard/3WL4D/5/
var $j = jQuery.noConflict();
$j(window).load(function () {
$j(".filterset").selectable({
//filter: 'checkbox', // turned out to be unimportant
stop: function () {
$j(".ui-selected :checkbox", this).each(function () { // note the change
this.checked = !this.checked
});
}
});
});
Related
Using jquery plugin with mouse hide and show I am trying to create tool tip.I am facing two problem
Whether my code is correct for mouseout and mouseleave
When I am creating lot of tooltip it was not positioning correctly it was coming down actually it has to come to right side.
I have found so many from stack Overflow but nothing is working out.
Here is the jquery code
$(document).ready(function() {
$(".tooltip").hide();
$("#help").on({
mouseenter: function () {
$("#showtooltip").show();
},
mouseleave: function () {
$("#showtooltip").hide();
}
});
$("#help1").on({
mouseenter: function () {
$("#showtooltip1").show();
},
mouseleave: function () {
$("#showtooltip1").hide();
}
});
$("#help2").on({
mouseenter: function () {
$("#showtooltip2").show();
},
mouseleave: function () {
$("#showtooltip2").hide();
}
});
});
Third mouse over was not working. I am trying to creating I think missed something.
Here is the jsbin Link
Kindly help me
Thanks & Regards
Mahadevan
Just add this css rules to your .tooltip class:
position: absolute;
top: 40px; /* define how much space from tooltip to the top
and this javascript:
$(document).ready(function() {
$(".tooltip").hide();
$("#help").on({
mouseenter: function (e) {
$("#showtooltip").show();
$("#showtooltip").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip").hide();
}
});
$("#help1").on({
mouseenter: function (e) {
$("#showtooltip1").show();
$("#showtooltip1").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip1").hide();
}
});
$("#help2").on({
mouseenter: function (e) {
$("#showtooltip2").show();
$("#showtooltip2").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip2").hide();
}
});
});
I added only this line in javascript mouseenter function:
$("#showtooltip").css('left', e.pageX);
It sets the tooltip left coordinate, in case you have many items, the tooltip will show exactly beneath the hovered item.
Customization
If you want the tooltip right of the hovered item, you will need to add this css:
var rightMargin = 20; // or whatever fits your needs
$("#showtooltip").css('left', e.pageX + rightMargin);
and change your css top property above.
Update
Since this code of yours is very coupled and you asked for a better solution, here it is jQuery code:
$(document).ready(function() {
$(".tooltip").hide();
$(".help").on({
mouseenter: function (e) {
var tooltip = $(this).next(); tooltip.show();
tooltip.css('left', e.pageX + 20);
},
mouseleave: function () {
$(this).next().hide();
}
});
});
to work this, you gonna have to remove your coupled ids and instead add to every anchor tag class help.
the code simply checks if the user is hovering a link, and if so, then just show the next element after it, which happens to be the tooltip.
Here is a FIDDLE
Cheers
Ok, I have totally retooled my approach (thank you superUntitled) and am making progress... I have an unordered list that users can toggle and my only remaining issue is that when I expand some items, and then click "Show All Cities" not all of the arrows go in the same direction. All the arrows change, including the ones on the list items already expanded. Any suggestions on how to resolve this?
Here's my new Javascript:
$("#Names .airports").hide();
$("#Names .close").hide();
$('#Expand').click(function(){
$('h2').children(".close").toggle();
$('h2').children(".arrow-down").toggle();
if($(this).text() == 'Hide All Cities')
{
$(this).text('Show All Cities');
$('#Names .airports').slideUp('fast');
}
else
{
$(this).text('Hide All Cities');
$('#Names .airports').slideDown('fast');
}
});
$("#Names h2").addClass("state").click(function() {
$(this).parent().children(".airports").slideToggle('fast')
$(this).children(".close").toggle();
$(this).children(".arrow-down").toggle();
Here's the fiddle illustrating the remaining problem:
http://jsfiddle.net/d3pxx8ds/127/
Thanks in advance
Here's my old JavaScript (reference only now):
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');});
$('.stateNames ul').hide();
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
}
}
});
});
All i did was replace the order, i moved the .rotate to happen before the .toggle functions this would read the rotate first and subsequently do the toggle function thus setting the variable to 180 instead of waiting for the toggle to start, not allowing the variable to be set
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind : {
click : function() {
value += 180;
$(this).rotate(value)
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
if (value==180){
value=360;
}
else{
value=180;
}
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});
I added the if statement and it works for one full go around but on the next toggle the arrow doesn't rotate hope that helps for now i will keep looking in to it
I have the following toggle function filter() where I display the childrow of a table when the <tr> parent is being clicked. In this function I've also included a key shortcut, so whenever ALT+A is pressed all the childrows are displayed.
In addition I have another script, mouseover(), where the background color of the parent tr is changed to #2C4367 hover.
So here's my question: How can I toggle the background-color of a tr parent whenever I expand (click on) it and back to normal when it is closed. This function should also work on all tr parents when the key shortcut is pressed, so the background color of all parent tr's is changed when the shortcut is being pressed.
I hope I made myself clear. Otherwise please say so and I will try to elaborate.
Toggle filter() script:
$(document).ready(function mouseover(){
$(".parent").hover(function(){
$(this).css("background", "#2C4367");
$(this).css("color", "#FFFFFF");
},
function(){
$(this).css("background", "#FFFFFF");
$(this).css("color", "#000000");
});
});
Change bgcolor mouseover() script:
$(document).ready(function filter() {
$('table.detail').each(function() {
var $table = $(this);
$table.find('.parent').click(function() {
$(this).nextUntil('.parent').toggle(); // must use jQuery 1.4 for nextUntil() method
}); /// Below is toggle on image
var $childRows = $table.find('tbody tr').not('.parent').hide();
$("img.pushme").toggle(function funcVis() {
$childRows.show();
},
function() { $childRows.hide();
});
shortcut.add("Alt+A",function(){ funcVis() }); /// Shortcut functions
shortcut.add("Alt+N",function(){ expandform() }); /// Shortcut functions
});
});
Create a CSS class that defines the background-color change, and apply or remove it with
$(target).parent().toggleClass('yourclass');
Insert this line wherever the expand is triggered.
Solved!
JSFiddle
function toggle(it) {
if ((it.className == "") || (it.className == "rowactive")) {
it.className = "rownotactive";
} else {
it.className = "rowactive";
}
}
$(document).ready(function filter() {
$('table.detail').each(function () {
var $table = $(this);
$table.find('.parent').click(function () {
$(this).toggleClass('rowactive');
$(this).nextUntil('.parent').toggle();
}); /// Below is toggle on image
var $childRows = $table.find('tbody tr').not('.parent').hide();
$("img.pushme").toggle(function funcVis() {
$("tr.parent").addClass('rowactive');
$childRows.show();
},
function () {
$("tr.parent").removeClass('rowactive');
$childRows.hide();
});
shortcut.add("Alt+N", function () {
expandform()
}); /// Shortcut functions
});
});
Here is script i wrote to achive searchable check box list but for some reason it is not acting please help!
It should search Regardless of Case and empty lines should be removed
$(function() {
$('#filter').on('keyup', function() {
alert('h');
var query = this.value;
$('.checkboxLabel').each(function(i, elem) {
if (elem.value.indexOf(query) != -1) {
$(this).closest('label').show();
}else{
$(this).closest('label').hide();
}
});
});
Here is the fiddle http://jsfiddle.net/xHxWt/
UPDATE : Thanks Everyone : Down is the fully working fiddle posted it if anyone needs the same
http://jsfiddle.net/xHxWt/9/
You missed the jQuery plugin (which you already found out).
Also, a label doesn't have a value, you need to use .text() instead.
Try:
$(function () {
$('#filter').on('keyup', function () {
var query = this.value;
$('.checkboxLabel').each(function (i, elem) {
if ($(this).text().indexOf(query) != -1) {
$(this).show();
$(this).prev(':checkbox').show();
} else {
$(this).hide();
$(this).prev(':checkbox').hide();
}
});
});
});
Fiddle
Update:
Hide / show checkbox as well.
You can try this code to hide label as well as checkbox
$(function() {
$('#filter').on('keyup', function() {
var query = this.value;
$('.checkboxLabel').each(function(i, elem) {
if ($(this).text().indexOf(query) != -1) {
$(this).closest('label').show();
$(this).prev().show();
} else {
$(this).closest('label').hide();
$(this).prev().hide();
}
});
});
});
There is also plugin for multiple selection or single.you can try this one also.
http://harvesthq.github.io/chosen/
I would like to add/remove a new div when the corresponding checkbox is checked/unchecked with jQuery. Here's my attempt:
<script type="text/javascript">
$(function() {
$("#form1 :checkbox#checkbox1").click(function() {
var d = document.createElement('div');
if ($(this).is(":checked")) {
$(d).addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
//$(".newdiv").fadeOut(1000);
$(d).fadeOut(1000);
}
});
});
</script>
The fadeIn process comes out smoothly. But when I tried to fadeOut $(d) using the same methodology, it didn't work: the new generated div remained on the page. I did some research and get a work around, with $(".newdiv").fadeOut(1000); (commented in the code above), but that's not the best solution for me I think. And also I really want to know why my first attempt didn't work. Any suggestions? Thanks.
There are few changes you can make
1. No need for the selector #form1 :checkbox#checkbox1 since you have an id for the checkbox, you can just use #checkbox1
2. Create the div using jQuery instead of using createElement $('<div/>')
3. After fading out the div you need to remove it from the dom
$(function() {
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
$('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
$('#mydiv .newdiv').fadeOut(function(){
$(this).remove()
})
}
});
});
Demo: Fiddle
Another solution is to have a static div which will be shown and hidden
$(function() {
var div = $('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide();
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
div.fadeIn(1000);
} else {
div.fadeOut(1000)
}
});
});
Demo: Fiddle
jsFiddle Demo
Every time your click handler runs, you're creating a new variable d with a new element. Instead, do that before the click handler, so each instance will reference the same element. I have included other optional improvements below.
A change event is more appropriate for checkboxes. Also, notice I made your selector just #checkbox1, since that is already unambiguous and maximally specific.
To get a better visual effect, don't add the element, hide it, then fade it in. In most browsers that will show the element flicker before it appears. Instead, use a class to hide it with css: .hidden {display: none;}. You can also use fadeToggle to toggle the visibility, instead of doing if/else. clearQueue removes extra events for multiple clicks during a transition, and makes transitions appear smoother.
Finally, use jQuery to create the element:
$(function () {
var $d = $('<div>', {
"class": "hidden",
text: "This is a new div"
}).appendTo("#mydiv");
$("#checkbox1").change(function () {
$d.clearQueue()
.stop()
.fadeToggle(1000);
});
});
You better make d a jQuery object.
<script type="text/javascript">
$(function() {
$("#checkbox1").click(function() {
var d = $('<div class="newdiv"></div>');
if ($(this).is(":checked")) {
d.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
d.fadeOut(1000);
}
});
});
</script>