Well, in the first case, what kind of animation are you looking for when you like the post?
Just the same effect of "slideDown" with the collapse/expand button, but done when you click the like button.
However, thank you for your kindly reply, I will try using Prototype and Scriptaculous instead of jQuery.
I tried to edit it with "Effect.SlideDown" and "Effect.SlideUp" effects, but it doesn't work.
Here is my thankyoulike.js file:
var thankyoulike = {
init: function()
{
},
tgl: function(pid)
{
if(tylCollapsible == 1)
{
if($('tyl_data_'+pid).visible())
{
Effect.SlideUp('tyl_data_'+pid);
Effect.SlideUp('tyl_title_'+pid);
Effect.SlideDown('tyl_title_collapsed_'+pid);
$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse.gif", "collapse_collapsed.gif");
$('tyl_i_expcol_'+pid).alt = "[+]";
$('tyl_a_expcol_'+pid).title = "[+]";
}
else
{
Effect.SlideDown('tyl_data_'+pid);
Effect.SlideUp('tyl_title_collapsed_'+pid);
Effect.SlideDown('tyl_title_'+pid);
$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse_collapsed.gif", "collapse.gif");
$('tyl_i_expcol_'+pid).alt = "[-]";
$('tyl_a_expcol_'+pid).title = "[-]";
}
}
},
add: function(pid)
{
if(use_xmlhttprequest == 1 && tylEnabled == 1)
{
if(tylUser == 0)
{
return true;
}
this.spinner = new ActivityIndicator("body", {image: imagepath + "/spinner_big.gif"});
new Ajax.Request('thankyoulike.php?ajax=1&action=add&pid='+pid+'&my_post_key='+my_post_key, {method: 'post', onComplete: function(request) { thankyoulike.addDone(request, pid); }});
document.body.style.cursor = 'wait';
return false;
}
else
{
return true;
}
},
addDone: function(request, pid)
{
if(request.responseText.match(/<error>([^<]*)<\/error>/))
{
message = request.responseText.match(/<error>([^<]*)<\/error>/);
if(!message[1])
{
message[1] = "An unknown error occurred.";
}
if(this.spinner)
{
this.spinner.destroy();
this.spinner = '';
}
document.body.style.cursor = 'default';
alert(message[1]);
}
else
{
tylVisible = 2;
if(tylCollapsible == 1 && $("tyl_"+pid).style.display != "none")
{
if($('tyl_data_'+pid).visible())
{
tylVisible = 1;
}
else
{
tylVisible = 0;
}
}
$("tyl_"+pid).update(request.responseJSON.tylData);
$("tyl_"+pid).style.display = "";
$("tyl_btn_"+pid).update(request.responseJSON.tylButton);
if(tylCollapsible == 1)
{
if(tylVisible != 2)
{
if(tylVisible == 1)
{
Effect.SlideDown('tyl_data_'+pid);
Effect.SlideUp('tyl_title_collapsed_'+pid);
Effect.SlideDown('tyl_title_'+pid);
$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse_collapsed.gif", "collapse.gif");
$('tyl_i_expcol_'+pid).alt = "[-]";
$('tyl_a_expcol_'+pid).title = "[-]";
}
else
{
Effect.SlideUp('tyl_data_'+pid);
Effect.SlideUp('tyl_title_'+pid);
Effect.SlideDown('tyl_title_collapsed_'+pid);
$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse.gif", "collapse_collapsed.gif");
$('tyl_i_expcol_'+pid).alt = "[+]";
$('tyl_a_expcol_'+pid).title = "[+]";
}
}
}
}
if(this.spinner)
{
this.spinner.destroy();
this.spinner = '';
}
document.body.style.cursor = 'default';
},
del: function(pid)
{
if(use_xmlhttprequest == 1 && tylEnabled == 1)
{
if(tylUser == 0)
{
return true;
}
this.spinner = new ActivityIndicator("body", {image: imagepath + "/spinner_big.gif"});
new Ajax.Request('thankyoulike.php?ajax=1&action=del&pid='+pid+'&my_post_key='+my_post_key, {method: 'post', onComplete: function(request) { thankyoulike.delDone(request, pid); }});
document.body.style.cursor = 'wait';
return false;
}
else
{
return true;
}
},
delDone: function(request, pid)
{
if(request.responseText.match(/<error>([^<]*)<\/error>/))
{
message = request.responseText.match(/<error>([^<]*)<\/error>/);
if(!message[1])
{
message[1] = "An unknown error occurred.";
}
if(this.spinner)
{
this.spinner.destroy();
this.spinner = '';
}
document.body.style.cursor = 'default';
alert(message[1]);
}
else
{
tylVisible = 2;
if(tylCollapsible == 1 && $("tyl_"+pid).style.display != "none")
{
if($('tyl_data_'+pid).visible())
{
tylVisible = 1;
}
else
{
tylVisible = 0;
}
}
if(request.responseJSON.tylData == '')
{
$("tyl_"+pid).style.display = "none";
}
$("tyl_"+pid).update(request.responseJSON.tylData);
$("tyl_btn_"+pid).update(request.responseJSON.tylButton);
if(tylCollapsible == 1 && $("tyl_"+pid).style.display != "none")
{
if(tylVisible != 2)
{
if(tylVisible == 1)
{
Effect.SlideDown('tyl_data_'+pid);
Effect.SlideUp('tyl_title_collapsed_'+pid);
Effect.SlideDown('tyl_title_'+pid);
$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse_collapsed.gif", "collapse.gif");
$('tyl_i_expcol_'+pid).alt = "[-]";
$('tyl_a_expcol_'+pid).title = "[-]";
}
else
{
Effect.SlideUp('tyl_data_'+pid);
Effect.SlideUp('tyl_title_'+pid);
Effect.SlideDown('tyl_title_collapsed_'+pid);
$('tyl_i_expcol_'+pid).src = $('tyl_i_expcol_'+pid).src.replace("collapse.gif", "collapse_collapsed.gif");
$('tyl_i_expcol_'+pid).alt = "[+]";
$('tyl_a_expcol_'+pid).title = "[+]";
}
}
}
}
if(this.spinner)
{
this.spinner.destroy();
this.spinner = '';
}
document.body.style.cursor = 'default';
}
};
Event.observe(document, 'dom:loaded', thankyoulike.init);
What's wrong with it? I replaced all hide() and show() effects with mine...
Ok then, I just read the documentation and it says I have to wrap the element which I want to slideUp or slideDown in a div with fixed height. But that element is wrapped in a tr and a td, how can I make this work? Here's my code, hoping you will solve my troubles as quickly as you can
<tr>
<td class="{$altbg}" style="vertical-align: middle;" colspan="2">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td align="left" ><span class="smalltext">{$post['button_pm']}{$post['button_find']}{$post['button_rep']}</span></td>
<td align="right">{$post['button_tyl']}{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}</td>
</tr>
<tr style="{$post['tyl_display']}" id="tyl_{$post['pid']}">
{$post['thankyoulike_data']}
</tr>
</table>