CODEWITHSUNDEEP
javascriptjquerycss
Akash
Akash

Reputation: 295

jquery animate for clostest div

Please see my fiddle.

http://jsfiddle.net/5gyqjncu/

Javascript:

jQuery('.add-com').toggle(function() {
    jQuery(this).closest('div').find('.category-commentform').slideDown();
    return false;
  },
    function() {
      jQuery(this).closest('div').find('.category-commentform').slideUp();
    return false;
  });

By clicking the "Post comment one" or "Post Comment second", the comment form will be displayed. My Problem is If I click the "Post comment one" or "Post Comment second" I cannot view the form is there or not. Because lot of comments are displayed before the comment form. My friend suggest to use jquery animate. But I can not to achieve my results. How can i fix this??

Upvotes: 0

Views: 75

Answers (3)

miraco
miraco

Reputation: 408

If you do not want to move your form right after the button as @Rory McCrossan suggests, you can use this DOM method scrollIntoView. Please see this answer.

Here's a quick edit to get you going: fiddle.

var form = jQuery(this).closest('div').find('.category-commentform');
form.slideDown("slow", function() {
    form[0].scrollIntoView();
});

Upvotes: 0

Muhammed Shevil KP
Muhammed Shevil KP

Reputation: 1396

Try .insertAfter(this)

jQuery('.add-com').toggle(function () {
jQuery(this).closest('div').find('.category-commentform').insertAfter(this).slideDown();
return false;

FIDDLE

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

I think one thing you can do is to that element into view like

jQuery('.add-com').toggle(function () {
    var $form = jQuery(this).closest('div').find('.category-commentform').slideDown();
    var body = jQuery("html, body");
    $('html, body').stop().animate({
        scrollTop: $form.offset().top
    }, 2000);
    return false;
}, function () {
    jQuery(this).closest('div').find('.category-commentform').slideUp();
    return false;
});

Demo: Fiddle

Upvotes: 3

Related Questions