Выполнение скрипта в границах таблицы
Здравствуйте, прошу помощи в подсказке, как правильно сделать, чтобы скрипт работал в рамках таблицы, а не на всей странице.
<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,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
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');
});
});
|
Цитата:
Вы в примере предложили одну команду с разными значениями agent.moveTo(box.top, box.left); agent.moveTo(event.clientX, event.clientY); не могли бы вы упростить для безграмотного и привести пример, где бы агент переместился в две точки с указанными координатами agent.moveTo(100, 100); agent.moveTo(200, 200); в составе вышепредложенного вами кода если присвоен class <tr class="123456789"> |
Цитата:
|
Цитата:
вот на этой странице есть пример 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>
|
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);
});
и персонаж перемещается по заданным координатам. Большущая благодарность. Если обрезал неверно поправьте меня нуба , т.к. не разбираюсь. |
ALFRED450,
Цитата:
|
Цитата:
<tr class="123456789"> то и: document.querySelector('123456789'); |
| Часовой пояс GMT +3, время: 08:46. |