Выполнение Ajax при скроллинге до определённого места
Есть код, который показывает кнопки с социальных сетей для публикации заметки.
Сейчас код срабатывает при нажатии на ссылку Опубликовать у себя в социальной сети
При нажатии делается запрос и в определённое место (Ajax ) вставляется необходимый javascript блок для отображения кнопок без перезагрузки страницы.
Но нужно ОБЯЗАТЕЛЬНО нажать кнопку!
Можно ли запустить «автонажатие» (либо сразу выполнить необходимый код) на эту ссылку при скроллинге до ссылки?
javascript
размещение на странице
Сейчас код срабатывает при нажатии на ссылку Опубликовать у себя в социальной сети
При нажатии делается запрос и в определённое место (Ajax ) вставляется необходимый javascript блок для отображения кнопок без перезагрузки страницы.
Но нужно ОБЯЗАТЕЛЬНО нажать кнопку!
Можно ли запустить «автонажатие» (либо сразу выполнить необходимый код) на эту ссылку при скроллинге до ссылки?
javascript
<script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Вешаем обработчик события "клик" на все ссылки с классом ajax_link
$('a.ajax_link').click(function() {
// Берем действие из атрибута data-action ссылки
var action = $(this).data('action');
// Ajax запрос к текущей страницы (а на ней наш сниппет) методом post
$.post(document.location.href, {action: action}, function(data) {
// Выдаем ответ
$('#result').html(data);
})
// Не даем ссылке кликнуться
return false;
})
})
</script>
размещение на странице
<div id="result">
<a href="#" data-action="helloWorld" class="ajax_link">Опубликовать у себя в социальной сети</a>
</div>
сниппет<?php
// Откликаться будет ТОЛЬКО на ajax запросы
if (empty($_SERVER['HTTP_X_REQUESTED_WITH']) || $_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;}
// Сниппет будет обрабатывать не один вид запросов, поэтому работать будем по запрашиваемому действию
// Если в массиве POST нет действия - выход
if (empty($_POST['action'])) {return;}
// А если есть - работаем
$res = '';
switch ($_POST['action']) {
case 'helloWorld':
$id = 3330;
$res = $modx->getObject('modResource', $id);
$res = $res->get('content');
break;
}
// Если у нас есть, что отдать на запрос - отдаем и прерываем работу парсера MODX
if (!empty($res)) {
die($res);
}
код ресурса id 3330<script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js" async="async"></script>
<script src="https://yastatic.net/share2/share.js" async="async"></script>
<div class="ya-share2" data-services="vkontakte,facebook*,odnoklassniki,moimir,twitter,viber,whatsapp,telegram" async="async"></div>
Пример, как это сейчас работает — тут (сейчас всё работает только при клике на ссылку Опубликовать у себя в социальной сети).
*Meta, которой принадлежат facebook и instagram признана экстремистской в России
Комментарии: 11
А в чем проблема? Что-то типо:
window.addEventListener('scroll', () => {
const eventLine = document.getElementById('result');
if (eventLine[0].top < document.documentElement.clientHeight) {
// действия
}
})
Это не точный код, пишу без проверки синтаксиса. Тут главное, что общая суть ясна. Просто слушаем скрол и проверяем находится ли наш блок в видимой части окна браузера (там толи top элемента, толи bottom, поэкспериментируй сам).
Ладно, скажу честно, мне нужно было не только показать кнопки социальных сетей, но вывести комментарии от Facebook (загрузка комментариев сразу ведёт к определённым тормозам при открытии страницы) — в интернете ПОЛНО информации о том, как правильно сделать это для Wordpress — и ни одного — для MODx!
Неужели никто не размещал у себя комментарии facebook или того же вконтакте на MODx?
Решил проблему с выводом картинок и видео youtobe (загрузка только при попадании в фокус), но как решить проблему с Facebook — ума не приложу.
Неужели никто не размещал у себя комментарии facebook или того же вконтакте на MODx?
Решил проблему с выводом картинок и видео youtobe (загрузка только при попадании в фокус), но как решить проблему с Facebook — ума не приложу.
Ну ладно, если быть до конца честным, то (внезапно) указный выше подход все ровно будет работать. Нужно только в месте где написано «действия», написать свою логику и не важно, что она должна делать, эмулировать нажатие кнопки, вызывать загрузку комментариев, перезагружать страницу, заказывать пиццу, свой вариант.
и ни одного — для MODxМожет потому что это не особо сложно делать, а писать инструкцию к каждому чиху глупо.
Меня бесят «ограничения» Wordpress и нравится возможность вытворять в Modx всё, что душе угодно, но… как же сложно сделать то, что в wordpress делается обычной установкой плагина.
Возвращаясь к теме скрипта.
Мне необходимо однократное выполнение кода. Следовательно, надо как-то проконтролировать одноразовое выполнение. Но так как тут же используется lazy load — предвижу некоторые проблемы (т.е. просто убрать событие scroll не получится).
Возвращаясь к теме скрипта.
Мне необходимо однократное выполнение кода. Следовательно, надо как-то проконтролировать одноразовое выполнение. Но так как тут же используется lazy load — предвижу некоторые проблемы (т.е. просто убрать событие scroll не получится).
А что если взять и чуть выше создать отдельную переменную (пусть будет check). Она будет проверять, происходило нужное действе или нет и если действие происходило, то не выполнять больше ничего.
Ну например:
Ну например:
if (eventLine[0].top < document.documentElement.clientHeight && check == false) {
// действия
// и установка check = true, чтоб этот участок не срабатывал больше
check = true;
}
Вопрос про js но виноват MODX, гениально
Я про недоступность многого, что снижает интерес к MODx
Сам код javascript достаточно нетривиален
Как сделал я (по совету выше)
Сам код javascript достаточно нетривиален
Как сделал я (по совету выше)
Я про недоступность многого, что снижает интерес к MODxОбожаю эту фразу, особенно обожаю когда ко мне приходят клиенты от таких вот разработчиков, которые сказали им «В modx этого сделать нельзя»
Открою секрет, modx написан на PHP, JS, HTML и CSS и все, что доступно в них, доступно и в modx
Я про недоступность многого, что снижает интерес к MODx
Сам код javascript достаточно НЕтривиален (это не ошибка) (не вписал код)
Не на всех устройствах срабатывает javascript.
Как сделал я (по совету выше)
Осталась проблема срабатывания javascript не на всех устройствах (разные браузеры?)
Сам код javascript достаточно НЕтривиален (это не ошибка) (не вписал код)
Не на всех устройствах срабатывает javascript.
Как сделал я (по совету выше)
<script>
window.addEventListener('scroll', function()
{
if(!check)
{
// divMain - предыдущий div
var el = document.getElementById('divMain');
// большая точность не нужна ~ 1000 px
if (el.clientHeight-window.pageYOffset<1000)
{
// чтобы не запускалось больше
check=true;
// "клик" по ссылке
document.getElementById("moiassilka").click();
}
}
})
</script>
Всё остальное — как в коде выше в самом начале поста (ссылку доделал). <a href="#" data-action="helloWorld" class="ajax_link" id="moiassilka">Опубликовать у себя в социальной сети</a>
Осталась проблема срабатывания javascript не на всех устройствах (разные браузеры?)
Я про недоступность многого, что снижает интерес к MODxКакой нибудь новичок увидит это сообщение и сделает для себя вывод что javascript не работает на MODx и снизит свой интерес к MODxy.
Сам код javascript достаточно НЕтривиален (это не ошибка) (не вписал код)
Не на всех устройствах срабатывает javascript.
Общаясь, в своё время, на форуме одной очень известной игры по танкам, я первое время удивлялся излишней прямолинейности, списывая всё на быстроту инстинктов (увидел врага — стреляй не раздумывая)…
В чём может быть проблема с кодом (я так понял — такая версия браузера)? Может есть другой вариант реализации?
В чём может быть проблема с кодом (я так понял — такая версия браузера)? Может есть другой вариант реализации?
if (el.clientHeight-window.pageYOffset<1000)
{
// чтобы не запускалось больше
check=true;
// "клик" по ссылке
document.getElementById("moiassilka").click();
}
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.