08.12.2020, 11:05
|
|
Аспирант
|
|
Регистрация: 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%;"> </td>
</tr>
</tbody>
</table>
</body>
</html>
При изменении размера страницы пользователем соответственно таблица размещенная по центру имеет разные координаты по отношению от края. Скрипт выполняется по координатам х, у . Как сделать чтобы он (скрипт) работал внутри таблицы и отталкивался от границ самой таблицы?
Последний раз редактировалось ALFRED450, 08.12.2020 в 18:57.
|
|
08.12.2020, 15:17
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
ALFRED450,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
08.12.2020, 15:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от 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);
|
|
08.12.2020, 18:10
|
|
Аспирант
|
|
Регистрация: 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.
|
|
08.12.2020, 18:53
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от ALFRED450
|
где бы агент переместился в две точки с указанными координатами
agent.moveTo(100, 100);
agent.moveTo(200, 200);
|
не понимаю ... замените что вам нужно, на то что вам нужно. |
|
08.12.2020, 19:29
|
|
Аспирант
|
|
Регистрация: 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%;"> </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>
|
|
08.12.2020, 19:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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);
});
});
|
|
08.12.2020, 19:57
|
|
Аспирант
|
|
Регистрация: 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);
});
и персонаж перемещается по заданным координатам. Большущая благодарность. Если обрезал неверно поправьте меня нуба , т.к. не разбираюсь.
|
|
08.12.2020, 20:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
ALFRED450,
|
Цитата:
|
|
document.querySelector('table tbody');
|
лучше присвоить нужному элементу class.
|
|
08.12.2020, 20:38
|
|
Аспирант
|
|
Регистрация: 07.12.2020
Сообщений: 72
|
|
|
Сообщение от рони
|
ALFRED450,
лучше присвоить нужному элементу class.
|
правильно ли будет если:
<tr class="123456789">
то и:
document.querySelector('123456789'); |
|
|
|
