07.10.2017, 20:52
|
|
Новичок на форуме
|
|
Регистрация: 23.06.2017
Сообщений: 7
|
|
|
Как сделать плавный переход к блоку после действия .trigger('click')?
Здравствуйте, у меня на сайте v-thailand.com реализованы AJAX комментарии. Хотелось бы добавить плавный переход к вновь добавленному комментарию (якорю). Иногда он появляется не в видимой части экрана (когда форма добавления комментария слишком высоко). Подскажите, как можно это сделать?
Приведу в пример только конец когда, где нужно его встатить, а то он большой. Логичнее всего было бы вставить этот код в самую последнюю очередь, после // действие, после того, как комментарий был добавлен
success: function (newComment) {
// Если уже есть какие-то комментарии
if($('.commentlist').length > 0){
// Если текущий комментарий является ответом
if($('#respond').parent().hasClass('comment')){
// Если уже есть какие-то ответы
if($('#respond').parent().children('.children').length){
$('#respond').parent().children('.children').append(newComment);
} else {
// Если нет, то добавляем <ul class="children">
newComment = '<ul class="children ajax-com">'+newComment+'</ul>';
$('#respond').parent().append(newComment);
}
// закрываем форму ответа
$("#cancel-comment-reply-link").trigger("click");
} else {
// обычный коммент
$('.commentlist').append(newComment);
}
}else{
// если комментов пока ещё нет, тогда
newComment = '<ol class="commentlist">'+newComment+'</ol>';
$('#respond').before($(newComment));
}
// очищаем поле textarea
$('#comment').val('');
},
complete: function(){
// действие, после того, как комментарий был добавлен
$('#submit').removeClass('loadingform').val('Отправить');
}
});
}
return false;
});
|
|
07.10.2017, 21:16
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
NeXan,
строка 40, id заменить на селектор нового блока
var top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 2000);
|
|
07.10.2017, 22:12
|
|
Новичок на форуме
|
|
Регистрация: 23.06.2017
Сообщений: 7
|
|
Сообщение от рони
|
NeXan,
строка 40, id заменить на селектор нового блока
|
К сожалению, не работает, отладчик выдает какую-то ошибку и работа скрипта прекращается. Прикрепил скрин. На странице создается такой блок с Id
<li id="li-comment-3502 ajax-new-comment">
СОДЕРЖАНИЕ БЛОКА
</li>
|
|
07.10.2017, 22:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
NeXan,
id=" li-comment-3502 ajax-new-comment"> это лишнее и что вы будите делать при создании следующего блока?
может класс? или хотя бы так
success: function (newComment) {
newComment = $('<ul class="children ajax-com">'+newComment+'</ul>');
//...
var top = newComment.offset().top;
$('body,html').animate({scrollTop: top}, 2000);
}
|
|
07.10.2017, 22:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
NeXan,
или так если они у вас по порядку
var top = $(".children.ajax-com:last").offset().top;
|
|
07.10.2017, 22:56
|
|
Новичок на форуме
|
|
Регистрация: 23.06.2017
Сообщений: 7
|
|
1 вариант. Удалил "li-comment-3502", код заработал, однако, если оставить на станице несколько комментариев без перезагрузки, то переход будет все время на первый.
2. вариант. Выдается такая ошиба: TypeError: newComment.offset is not a function at Object.success. Отладчик выделил: offset()
var top = newComment.offset().top;
Я как понимаю, второй вариант был бы предпочтительнее, так как будет осуществляется переход каждый раз к 1 комментарию.
|
|
07.10.2017, 23:00
|
|
Новичок на форуме
|
|
Регистрация: 23.06.2017
Сообщений: 7
|
|
|
Сообщение от рони
|
var top = $(".children.ajax-com:last").offset().top;
|
А этот код исправно переходит к последнему, но если добавить комментарий выше, переход все равно будет в самый конец)) |
|
07.10.2017, 23:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от NeXan
|
|
2. вариант. Выдается такая ошиба
|
где код? |
|
07.10.2017, 23:20
|
|
Новичок на форуме
|
|
Регистрация: 23.06.2017
Сообщений: 7
|
|
|
Сообщение от рони
|
|
где код?
|
Вот полный вариант:
jQuery.extend(jQuery.fn, {
/*
* функция проверки, что длина поля не меньше 3х символов
*/
checka: function () {
if (jQuery(this).val().length < 3) {jQuery(this).addClass('error');
setTimeout (function(){
$(this).removeClass('error');
}.bind(this), 1500);return false} else {jQuery(this).removeClass('error');return true}
},
/*
* функция проверки правильности введенного email
*/
checke: function () {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal = jQuery(this).val();
if (!emailReg.test(emailaddressVal) || emailaddressVal == "") {
jQuery(this).addClass('error');setTimeout (function(){
$(this).removeClass('error');
}.bind(this), 1500);return false
} else {
jQuery(this).removeClass('error');return true
}
},
});
jQuery(function($){
$('#commentform').submit(function(){
// может такое случиться, что пользователь залогинен - нужно это проверить, иначе валидация не пройдет
if($("#author").length) var author = $("#author").checka();
if($("#email").length) var email = $("#email").checke();
var comment = $("#comment").checka();
// небольшое условие для того, чтобы исключить двойные нажатия на кнопку отправки
// в это условие также входит валидация полей
if (!$('#submit').hasClass('loadingform') && !$("#author").hasClass('error') && !$("#email").hasClass('error') && !$("#comment").hasClass('error')){
$.ajax({
type : 'POST',
url : 'https://' + location.host + '/wp-admin/admin-ajax.php',
data: $(this).serialize() + '&action=ajaxcomments',
beforeSend: function(xhr){
// действие при отправке формы, сразу после нажатия на кнопку #submit
$('#submit').addClass('loadingform').val('Загрузка');
},
error: function (request, status, error) {
if(status==500){
alert('Ошибка при добавлении комментария');
} else if(status=='timeout'){
alert('Ошибка: Сервер не отвечает, попробуй ещё.');
} else {
// ворпдрессовские ошибочки, не уверен, что это самый оптимальный вариант
// если знаете способ получше - поделитесь
var errormsg = request.responseText;
var string1 = errormsg.split("<p>");
var string2 = string1[1].split("</p>");
alert(string2[0]);
}
},
success: function (newComment) {
// Если уже есть какие-то комментарии
if($('.commentlist').length > 0){
// Если текущий комментарий является ответом
if($('#respond').parent().hasClass('comment')){
// Если уже есть какие-то ответы
if($('#respond').parent().children('.children').length){
$('#respond').parent().children('.children').append(newComment);
} else {
// Если нет, то добавляем <ul class="children">
newComment = '<ul class="children ajax-com">'+newComment+'</ul>';
$('#respond').parent().append(newComment);
var top = newComment.offset().top;
$('body,html').animate({scrollTop: top}, 2000);
}
// закрываем форму ответа
$("#cancel-comment-reply-link").trigger("click");
} else {
// обычный коммент
$('.commentlist').append(newComment);
}
}else{
// если комментов пока ещё нет, тогда
newComment = '<ol class="commentlist">'+newComment+'</ol>';
$('#respond').before($(newComment));
}
// очищаем поле textarea
$('#comment').val('');
},
complete: function(){
// действие, после того, как комментарий был добавлен
$('#submit').removeClass('loadingform').val('Отправить');
}
});
}
return false;
});
});
|
|
07.10.2017, 23:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
NeXan,
тупо найдите обьект к которому хотите перейти после каждого append и before и возьмите top этого обьекта. NeXan,
success: function (newComment) {
var top = 0;
// Если уже есть какие-то комментарии
if($('.commentlist').length > 0){
// Если текущий комментарий является ответом
if($('#respond').parent().hasClass('comment')){
// Если уже есть какие-то ответы
if($('#respond').parent().children('.children').length){
$('#respond').parent().children('.children').append(newComment);
top = $('#respond').parent().children('.children').find("чёрт знет что").offset().top;
} else {
// Если нет, то добавляем <ul class="children">
newComment = '<ul class="children ajax-com">'+newComment+'</ul>';
$('#respond').parent().append(newComment);
top = $('#respond').parent().find(".children.ajax-com").offset().top;
}
// закрываем форму ответа
$("#cancel-comment-reply-link").trigger("click");
} else {
// обычный коммент
$('.commentlist').append(newComment);
top = $('.commentlist').find("чёрт знет что").offset().top;
}
}else{
// если комментов пока ещё нет, тогда
newComment = '<ol class="commentlist">'+newComment+'</ol>';
$('#respond').before($(newComment));
top = $('.commentlist').offset().top;
}
$('body,html').animate({scrollTop: top}, 2000);
// очищаем поле textarea
$('#comment').val('');
},
|
|
|
|
