Изменение положения формы комментариев

[Aleksey]

Всем привет! Отличная форма комментариев! Очень интересует, как можно сделать, чтобы форма ответа на комментарий вылезала под самим комментарием, а не появлялась так сказать в воздухе? Подскажите, как можно реализовать, очень хочется допилить под свои нужды.

[Admin]

Хотелось бы уточнить некоторые моменты...
Как форма должна вылезать? Должны ли все последующие комментарии сдвинуться вниз, или форма должны быть поверх них?

[Aleksey]

(18.05.2015 22:52:37)Admin писал(а):  Хотелось бы уточнить некоторые моменты...
Как форма должна вылезать? Должны ли все последующие комментарии сдвинуться вниз, или форма должны быть поверх них?

Да, комментарии сдвигаются вниз, на подобие того, как это происходит в комментариях от disqus...

[Admin]

Идею понял, надо будет завтра вечером немного подумать, т.к. реализация скорее всего будет на jQuery.

[Aleksey]

Спасибо. Буду с нетерпением ждать!

[Admin]

Итак, приступим.

Для начала необходимо заменить код появляющейся формы. Для этого необходимо удалить код:

PHP код:

echo '<form method="POST" action="'.$mess_url.'#last" class="add_comment"';
echo 'name="add_comment" id="hint"><div class="close_hint">Закрыть</div>';
echo '<textarea cols="68" rows="5" name="user_text"></textarea>';
echo '<div style="margin:5px; float:left;">';
echo 'Имя: <input type="text" name="mess_login" maxlength="20" value=""></div>';

echo '<div style="margin:5px; float:right;">'.$cod.' + '.$cod2.' = ';
echo '<input type="hidden" name="prov_summa" value="'.md5($cod+$cod2).'">';
echo '<input type="hidden" name="parent_id" value="0">';
echo '<input type="hidden" name="f_parent" value="0">';
echo '<input type="text" name="contr_cod" maxlength="4" size="4">&nbsp;';
echo '<input type="submit" value="Отправить"></div>';
echo '</form>'; 


И добавить на его место вот такой:

PHP код:

echo '<div id="hint" align="center">';
echo '<form method="POST" action="'.$mess_url.'#last" class="add_comment" name="add_comment">';
echo '<br><textarea cols="68" rows="5" name="user_text"></textarea>';
echo '<div style="margin:5px; float:left;">';
echo 'Имя: <input type="text" name="mess_login" maxlength="20" value=""></div>';

echo '<div style="margin:5px; float:right;">'.$cod.' + '.$cod2.' = ';
echo '<input type="hidden" name="prov_summa" value="'.md5($cod+$cod2).'">';
echo '<input type="hidden" name="parent_id" value="0">';
echo '<input type="hidden" name="f_parent" value="0">';
echo '<input type="text" name="contr_cod" maxlength="4" size="4">&nbsp;';
echo '<input type="submit" value="Отправить"></div>';
echo '</form></div>'; 


Хоть изменения формы и минимальны, все равно лучше заменить целиком, чем описывать каждое изменение в отдельности.

Далее удаляем уже ненужный стиль:

Код:

.close_hint { margin: 5px; color: #F00; }

И .close_hint из строчки .close_hint, .open_hint {.

Так же в CSS строчку:

Код:

#hint { position: absolute; display: none; z-index: 100; }

Заменяем на такую:

Код:

#hint { display: none; }

Теперь переходим к JavaScript код. Удаляем:

Код:

//Показать форму ответа на имеющийся комментарий
$(".open_hint").click(function(){
    $("#hint").animate({
        top: $(this).offset().top + 25, left: $(document).width()/2 -
        $("#hint").width()/2
    }, 400).fadeIn(800);
});

//Скрыть форму ответа на имеющийся комментарий
$(".close_hint").click(function(){ $("#hint").fadeOut(1200); });

И добавляем:

Код:

$(".open_hint").click(function(){
    the_form=$(this);
    if (the_form.text()=="Ответить") {
        $(".open_hint").text("Ответить");
        the_form.text("Закрыть");
        $("#hint").fadeOut(600,function(){ the_form.after( $("#hint") ) }).fadeIn(600);
    }
    else {
        $(".open_hint").text("Ответить");
        $("#hint").fadeOut(600);
    }
});

Вот вроде бы и все.

[Aleksey]

Да, изменения есть, но форма, при нажатии на кнопку ответить, не появляется под сообщением и не сдвигает другие сообщения вниз, а просто накладывается на них... Видимо мы слегка не так друг друга поняли. Я имел ввиду вот так:
когда нажимаешь ответить, вылезает под комментарием форма, а нижние комменты уходят вниз..

[Admin]

Виноват.
Поняли мы друг друга правильно, просто забыл добавить в сообщение изменения в CSS коде...

Нужно заменить в CSS строчку:

Код:

#hint { position: absolute; display: none; z-index: 100; }

На такую:

Код:

#hint { display: none; }

P.S. В первый пост темы тоже внес изменения.

[Aleksey]

Вооо! Теперь самое то! Большое спасибо вам, очень помогли.

[ale10ey]

Здравствуйте, имеется скрипт

Код:

<script>
$(".open_hint").click(function(){
    the_form=$(this);
    if (the_form.text()=="Ответить") {
        $(".open_hint").text("Ответить");
        the_form.text("Закрыть");
        $("#hint").fadeOut(600,function(){the_form.after( $("#hint") )}).fadeIn(600);
    }
    else {
        $(".open_hint").text("Ответить");
        $("#hint").fadeOut(700);
    }
});
</script>

Работает прекрасно, нажимаешь на кнопку "Ответить" и появляется форма, а чтобы закрыть есть 2 кнопки. Одна в этом скрипте, а другая из php файла

echo '<div class="close_hint" title="Закрыть">Закрыть</div>';

Хотел бы с вашей помощью реализовать вот такой момент...

1. При клике на кнопку "Ответить" форма появлялась, а кнопка "Ответить" пропадала, что в принципе несложно сделать, например в строчку кода $(".open_hint").text("Ответить"); добавить .fadeIn();

2. При закрытии формы кнопка "Ответить" должна снова появиться
Закрываю форму при помощи кнопки "Закрыть" из php файла и форма закрывается и должна появиться кнопка "Ответить" js скрипта.

Сам реализовал по-другому, т.е оставил одну кнопку от js скрипта, прописал title, который меняется соответственно при открытии или закрытии, но хотел бы задействовать 2 кнопки, так как визуально будет красивее.

Надеюсь, вы смогли понять что я пытался донести.
С уважением и заранее благодарен