I'm trying to add a row to a table and have that row slide into view, however the slidedown function seems to be adding a display:block style to the table row which messes up the layout.
Any ideas how to work around this?
Here's the code:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
Animations are not supported on table rows.
From "Learning jQuery" by Chaffer and Swedberg
Table rows present particular obstacles to animation, since browsers use different values (table-row and block) for their visible display property. The .hide() and .show() methods, without animation, are always safe to use with table rows. As of jQuery version 1.1.3, .fadeIn() and .fadeOut() can be used as well.
You can wrap your td contents in a div and use the slideDown on that. You need to decide if the animation is worth the extra markup.
Here's a plug-in that I wrote up for this, it takes a little from Fletch's implementation, but mine is used solely to slide a row up or down (no inserting rows).
(function($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false
},
methods: {
up: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
paddingTop: '0px',
paddingBottom: '0px'},{
complete: function () {
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({'display':'none'});
$(this).css({'padding': currentPadding});
}});
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function(method,arg1,arg2,arg3) {
if(typeof method != 'undefined') {
if(sR.methods[method]) {
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
}
}
};
})(jQuery);
Basic Usage:
$('#row_id').slideRow('down');
$('#row_id').slideRow('up');
Pass slide options as individual arguments:
$('#row_id').slideRow('down', 500); //slide speed
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as object
Basically, for the slide down animation, the plug-in wraps the contents of the cells in DIVs, animates those, then removes them, and vice versa for the slide up (with some extra steps to get rid of the cell padding). It also returns the object you called it on, so you can chain methods like so:
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red
Hope this helps someone.
You could try wrapping the contents of the row in a <span> and having your selector be $('#detailed_edit_row span'); - a bit hackish, but I just tested it and it works. I also tried the table-row suggestion above and it didn't seem to work.
update: I've been playing around with this problem, and from all indications jQuery needs the object it performs slideDown on to be a block element. So, no dice. I was able to conjure up a table where I used slideDown on a cell and it didn't affect the layout at all, so I am not sure how yours is set up. I think your only solution is to refactor the table in such a way that it's ok with that cell being a block, or just .show(); the damn thing. Good luck.
I'm a bit behind the times on answering this, but I found a way to do it :)
function eventinfo(id) {
tr = document.getElementById("ei"+id);
div = document.getElementById("d"+id);
if (tr.style.display == "none") {
tr.style.display="table-row";
$(div).slideDown('fast');
} else {
$(div).slideUp('fast');
setTimeout(function(){tr.style.display="none";}, 200);
}
}
I just put a div element inside the table data tags. when it is set visible, as the div expands, the whole row comes down. then tell it to fade back up (then timeout so you see the effect) before hiding the table row again :)
Hope this helps someone!
I've gotten around this by using the td elements in the row:
$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);
Animating the row itself causes strange behaviour, mostly async animation problems.
For the above code, I am highlighting a row that gets dragged and dropped around in the table to highlight that the update has succeeded. Hope this helps someone.
Quick/Easy Fix:
Use JQuery .toggle() to show/hide the rows onclick of either Row or an Anchor.
A function will need to be written to identify the rows you would like hidden, but toggle creates the functionality you are looking for.