Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.12.2020, 11:05
Аспирант
Отправить личное сообщение для ALFRED450 Посмотреть профиль Найти все сообщения от ALFRED450
 
Регистрация: 07.12.2020
Сообщений: 72

Выполнение скрипта в границах таблицы
Здравствуйте, прошу помощи в подсказке, как правильно сделать, чтобы скрипт работал в рамках таблицы, а не на всей странице.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="-------------------------------">
<link rel="stylesheet" href="---------------------------------">
<title>-----------------------------------</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="clippy.css" media="all">
<script src="clippy.js"></script>
<!-- выполняемый скрипт -->
<script type="text/javascript">
    clippy.load('Clippy', function(agent){
        agent.show(); // do anything with the loaded agent
		agent.play('----------');
                *!*
		agent.moveTo(100,200); //координаты
                */!*
                agent.play('----------');
 		agent.moveTo(200,300); //координаты
  
    });
</script>

</head>

<body>

<table style="border-collapse: collapse; width: 800px; height: 800px;" border="1">
<tbody>
<tr class="123456789">
<td style="width: 100%;">&nbsp;</td>
</tr>
</tbody>
</table>

</body>
</html>

При изменении размера страницы пользователем соответственно таблица размещенная по центру имеет разные координаты по отношению от края. Скрипт выполняется по координатам х, у . Как сделать чтобы он (скрипт) работал внутри таблицы и отталкивался от границ самой таблицы?

Последний раз редактировалось ALFRED450, 08.12.2020 в 18:57.
Ответить с цитированием
  #2 (permalink)  
Старый 08.12.2020, 15:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

ALFRED450,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 08.12.2020, 15:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от ALFRED450
Как сделать чтобы он (скрипт) работал внутри таблицы
как вариант ...
clippy.load('Clippy', function(agent){
agent.show();
let td = document.querySelector('table td');
let box = td.getBoundingClientRect();
agent.moveTo(box.left, box.top);
agent.animate();
document.addEventListener( "click" , function(event) {
let td= event.target && event.target.closest('table td');
if(!td) return;
agent.moveTo(event.clientX, event.clientY);
agent.play('Alert');
});
});

Последний раз редактировалось рони, 08.12.2020 в 19:05. Причина: agent.moveTo(box.left, box.top);
Ответить с цитированием
  #4 (permalink)  
Старый 08.12.2020, 18:10
Аспирант
Отправить личное сообщение для ALFRED450 Посмотреть профиль Найти все сообщения от ALFRED450
 
Регистрация: 07.12.2020
Сообщений: 72

Сообщение от рони Посмотреть сообщение
как вариант ...
clippy.load('Clippy', function(agent){
agent.show();
let td = document.querySelector('table td');
let box = td.getBoundingClientRect();
agent.moveTo(box.top, box.left);
agent.animate();
document.addEventListener( "click" , function(event) {
let td= event.target && event.target.closest('table td');
if(!td) return;
agent.moveTo(event.clientX, event.clientY);
agent.play('Alert');
});
});
команда agent.moveTo() это перемещение персонажа по координатам и она в коде может повторятся бесконечное количество раз с различными координатами.
Вы в примере предложили одну команду с разными значениями
agent.moveTo(box.top, box.left);
agent.moveTo(event.clientX, event.clientY);

не могли бы вы упростить для безграмотного и привести пример, где бы агент переместился в две точки с указанными координатами
agent.moveTo(100, 100);
agent.moveTo(200, 200);

в составе вышепредложенного вами кода если присвоен class <tr class="123456789">

Последний раз редактировалось ALFRED450, 08.12.2020 в 18:57.
Ответить с цитированием
  #5 (permalink)  
Старый 08.12.2020, 18:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от ALFRED450
где бы агент переместился в две точки с указанными координатами
agent.moveTo(100, 100);
agent.moveTo(200, 200);
не понимаю ... замените что вам нужно, на то что вам нужно.
Ответить с цитированием
  #6 (permalink)  
Старый 08.12.2020, 19:29
Аспирант
Отправить личное сообщение для ALFRED450 Посмотреть профиль Найти все сообщения от ALFRED450
 
Регистрация: 07.12.2020
Сообщений: 72

Сообщение от рони Посмотреть сообщение
не понимаю ... замените что вам нужно, на то что вам нужно.
возможно я заменил не верно, поэтому не сработало
вот на этой странице есть пример clippy-js-vozvrashchenie-skrepki, если посмотреть код фрейма то видно, что скрипт работает на всей странице, а я бы хотел, чтоб он работал в рамках таблицы, пример таблицы:
<table style="border-collapse: collapse; width: 800px; height: 800px;" border="1">
<tbody>
<tr class="123456789">
<td style="width: 100%;">&nbsp;</td>
</tr>
</tbody>
</table>


сам скрипт:
<script type="text/javascript">
    clippy.load('Clippy', function(agent){
        // do anything with the loaded agent
        agent.show();
        agent.moveTo(100,100);
        agent.speak('Всем привет! Как видите, Clippy снова здесь, с вами, на Masterpro.ws.');
        agent.gestureAt(200,200);
        agent.speak('Надеюсь, вы рады меня видеть? алло, а вы где?');
        agent.play('Searching');
        agent.play('GetAttention');
        agent.speak('Ну, в любом случае - я так просто счастлив. :)');
        agent.play('EmptyTrash');
    });
</script>
Ответить с цитированием
  #7 (permalink)  
Старый 08.12.2020, 19:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

ALFRED450,
ещё вариант, могу только гадать, что вам нужно ...
clippy.load('Clippy', function(agent){
agent.show();
let tbody = document.querySelector('table tbody');
let box = tbody.getBoundingClientRect();
agent.moveTo(box.left + 100, box.top + 100);
agent.speak('Всем привет! Как видите, Clippy снова здесь, с вами, на Masterpro.ws.');
//agent.gestureAt(200,200);
agent.speak('Надеюсь, вы рады меня видеть? алло, а вы где?');
agent.play('Searching');
agent.play('GetAttention');
agent.speak('Ну, в любом случае - я так просто счастлив. :)');
agent.play('EmptyTrash');
document.addEventListener( "click" , function(event) {
let tbody= event.target && event.target.closest('table tbody');
if(!tbody) return;
let box = tbody.getBoundingClientRect();
agent.moveTo(box.left + 100, box.top + 100);
});
window.addEventListener( "resize" , function(event) {
let box = tbody.getBoundingClientRect();
agent.moveTo(box.left+100, box.top + 100);
});
});
Ответить с цитированием
  #8 (permalink)  
Старый 08.12.2020, 19:57
Аспирант
Отправить личное сообщение для ALFRED450 Посмотреть профиль Найти все сообщения от ALFRED450
 
Регистрация: 07.12.2020
Сообщений: 72

Сообщение от рони Посмотреть сообщение
ALFRED450,
ещё вариант, могу только гадать, что вам нужно ...
clippy.load('Clippy', function(agent){
agent.show();
let tbody = document.querySelector('table tbody');
let box = tbody.getBoundingClientRect();
agent.moveTo(box.left + 100, box.top + 100);
agent.speak('Всем привет! Как видите, Clippy снова здесь, с вами, на Masterpro.ws.');
//agent.gestureAt(200,200);
agent.speak('Надеюсь, вы рады меня видеть? алло, а вы где?');
agent.play('Searching');
agent.play('GetAttention');
agent.speak('Ну, в любом случае - я так просто счастлив. :)');
agent.play('EmptyTrash');
document.addEventListener( "click" , function(event) {
let tbody= event.target && event.target.closest('table tbody');
if(!tbody) return;
let box = tbody.getBoundingClientRect();
agent.moveTo(box.left + 100, box.top + 100);
});
window.addEventListener( "resize" , function(event) {
let box = tbody.getBoundingClientRect();
agent.moveTo(box.left+100, box.top + 100);
});
});
Спасибо большое, работает. Попробывал сократить до:
clippy.load('Clippy', function(agent){
agent.show();
let tbody = document.querySelector('table tbody');
let box = tbody.getBoundingClientRect();
agent.moveTo(box.left + 200, box.top + 200);
agent.speak('Всем привет! Как видите, Clippy снова здесь, с вами, на Masterpro.ws.');
//agent.gestureAt(200,200);
agent.speak('Надеюсь, вы рады меня видеть? алло, а вы где?');
agent.moveTo(box.left + 100, box.top + 100);
agent.moveTo(box.left + 300, box.top + 300);
});

и персонаж перемещается по заданным координатам. Большущая благодарность. Если обрезал неверно поправьте меня нуба , т.к. не разбираюсь.
Ответить с цитированием
  #9 (permalink)  
Старый 08.12.2020, 20:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

ALFRED450,

Цитата:
document.querySelector('table tbody');
лучше присвоить нужному элементу class.
Ответить с цитированием
  #10 (permalink)  
Старый 08.12.2020, 20:38
Аспирант
Отправить личное сообщение для ALFRED450 Посмотреть профиль Найти все сообщения от ALFRED450
 
Регистрация: 07.12.2020
Сообщений: 72

Сообщение от рони Посмотреть сообщение
ALFRED450,



лучше присвоить нужному элементу class.
правильно ли будет если:
<tr class="123456789">
то и:
document.querySelector('123456789');
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фоновое выполнение скрипта AleksSergSB Общие вопросы Javascript 2 19.01.2019 13:54
Выполнение скрипта если есть html элемент Янковиц Элементы интерфейса 2 24.10.2017 21:47
Можно ли отключить выполнение скрипта в IE ? dimba jQuery 2 20.11.2014 07:17
Остановить выполнение скрипта Nonam Общие вопросы Javascript 22 04.05.2009 01:45
как прекратить выполнение скрипта ? kefi Общие вопросы Javascript 3 31.03.2009 19:05