I am trying to toggle some table rows using jquery. The initial state is hidden
this is working
$('.table tr.items.' + name).each(function() {
$(this).show();
});
and this code is also working
$('.table tr.items.' + name).each(function() {
$(this).show();
});
but with this code
$('.table tr.items.' + name).each(function() {
$(this).toggle();
});
In the first call the rows are shown, but in the second call they are not hidden. I can see the style set to style="display: table-row;" in the second call. Do you have an idea on how to solve that?
js:
$('.table tr.items.' + name).toggleClass("notShow");
css:
.notShow{
display: none;
}
Related
Ok what I'm trying to accomplish is once someone clicks a button at the top we'll say the "Pagado" button I would like this to also display the "Pendiente" results as well whereas we'll say they are related and I want them both to be displayed.
See image below as the example:
Below is what the outcome I'm trying to create... Once the "Pagado" button is pressed only the results with the "Pagado" mention would be displayed on the page.
Here is the code for the example... http://ibootstrap.net/Snippets/IDXdL46
How to show Pendiente and Pagado at the same time?
Just use a combined data-status in your html something like:
<tr data-status="pagado_pendiente"> where the row has both status say (Pagado) and (Pendiente)
and in your JS instead of matching the exact string look for contains something like:
$('.table tr[data-status*="' + $target + '"]').fadeIn('slow'); instead of $('.table tr[data-status="' + $target + '"]').fadeIn('slow');
add this js instead of old one and it will work smoothly
$(document).ready(function () {
$('.star').on('click', function () {
$(this).toggleClass('star-checked');
});
$('.ckbox label').on('click', function () {
$(this).parents('tr').toggleClass('selected');
});
$('.btn-filter').on('click', function () {
var $target = $(this).data('target');
if ($target === 'pagado') {
$('.table tr').css('display', 'none');
$('.table tr[data-status="' + $target + '"], .table tr[data-status="pendiente"]').fadeIn('slow');
} else if ($target != 'all') {
$('.table tr').css('display', 'none');
$('.table tr[data-status="' + $target + '"]').fadeIn('slow');
} else {
$('.table tr').css('display', 'none').fadeIn('slow');
}
});
});
i've added new if conditional to your code which check if the target is pagado show this tr plus pendiente tr
if ($target === 'pagado') {
$('.table tr').css('display', 'none');
$('.table tr[data-status="' + $target + '"], .table tr[data-status="pendiente"]').fadeIn('slow');
}
you can change pagado to whatever you want or add more table rows , cheers.
I am using quicksand jquery and i have searched for solutions and none work. I am trying to auto-click a category when the page loads to filter what I want to filter.
Here is the links on the page that allow users to click and filter
<li>Everything</li>
<li>cat1</li>
<li>cat2</li>
<li>cat3</li>
<li>cat4</li>
when the page loads, it show ALL items and then the user can select the category to filter by. i want to auto click one, and am looking for the function to generate the click.
here is what i have tried with no solution:
<script type="text/javascript">
$(document).ready(function() {
$(".filter li a.cat2").trigger('click');
});
</script>
and
<script type="text/javascript">
$(document).ready(function() {
$(".filter li a.cat2").trigger('click');
});
</script>
and
<script>
$(function() {
// It would be better to create a function for this, but
// to avoid code duplication the click() event is triggered/reused
$('.filteroptions li a cat2').click();
});
</script>
Here is the js file it operates from and why i chose to remove "filteroptions" and try "filter" as was suggested in other posts. as mine shows ".filter li a" not filteroptions li a
// DOMContentLoaded
$(function () {
// bind radiobuttons in the form
var $filterType = $('.filter li a');
// get the first collection
var $applications = $('#list');
// clone applications to get a second collection
var $data = $applications.clone();
// attempt to call Quicksand on every form change
$filterType.click(function (e) {
$('.filter li a').removeClass('selected');
$(this).addClass('selected');
if ($(this).attr('id') == 'all') {
var $filteredData = $data.find('li');
} else {
var $filteredData = $data.find('li[class=' + $(this).attr('id') + ']');
}
// finally, call quicksand
$applications.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad',
attribute: 'id'
}, function () {
$("a[data-rel^='prettyPhoto']").prettyPhoto({ animationSpeed: 'slow', social_tools: false, slideshow: 2000 });
});
});
});
And here are other posts that you may say are the same, but i tried them and they do not work. They are using an older type of quicksand.
JQuery Quicksand: Link directly to pre-filtered Quicksand from another page
First open limited item not all in jQuery Quicksand?
You are using id on not class so change your click tigger to
$(".filter li #cat2").trigger('click');
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>
I have a jquery function that when a li is clicked, the li expands. That part is working fine. Now, I want, when the li is clicked it toggles a background color. But it works, however when i have to click on the li item again to untoggle the background color. Can someone assist me in the right direction on how to achieve this.
$(function() {
$('.a').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
$('.selected').css('background', 'yellow');
content.slideToggle('fast');
});
$("li").click(function() {
$(this).toggleClass("highlight");
});
});
On every click set your <li>-s to default color and highlight the current:
$("li").click(function() {
$("li").removeClass("highlight");
$(this).addClass("highlight");
});
...
UPDATE
http://jsfiddle.net/NXVhE/4/
$(function() {
$('.a').click(function() {
$(this).removeClass("highlight");
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide();
content.toggle();
});
$("a").click(function () {
$("a").removeClass("highlight");
if ( $(".content").is(":visible") ) {
$(this).addClass("highlight");
}
});
});
Assuming the <li>s are all siblings, it would be slightly more efficient to do something like this, and would allow for more than one list on the same page to function independently of one another (again, assuming that is the desired functionality)
$('li').click(function() {
$('this').addClass('highlight').siblings().removeClass('highlight').
});
i am using jquery for set background color to the table data and its working fine but i need when user again click the td the color should be deselect. its my script for add color.
java script:
jQuery('td').click(function () { $(this).addClass('active'); });
my css class:
.active{background-color:red;}
when user again click the td the class should remove. How to achieve this.
jQuery('td').click(function () { $(this).toggleClass('active'); });
toggleClass adds if it doesn't exist or removes if it does exist.
You can use
$(this).removeClass('active');
although you would need to do a check to see if it is already active, which would make your code look like this:
jQuery('td').click(function () {
if($(this).hasClass('active') {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
EDIT:
#Justice is more correct:
jQuery('td').click(function () { $(this).toggleClass('active'); });