Jump to content

ioprst

Newbie
 View Profile  See their activity

  • Posts

    19

  • Joined

  • Last visited

 Content Type 

Everything posted by ioprst

  1. ioprst
    Написал страничку: На рисунке представлен результат Как таблицу (снизу слева), поднять вверх. Пробовал различные варианты position (+ top), ничего не вышло.
  2. ioprst
    Написал страничку: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>testPrj</title> <style> .wrapper { height: 100%; display: table; width: 100%; } .header { display: table-row; height: 1px; } .main { height: 100%; display: table; width: 100%; } .horizontalbar { display: table-row; height: 0px; } .box { display: table-cell; } .sidebar { width: 0px; } .sidebar table { /*height: 100%;*/ width: 100%; position: relative; top: 0; border-collapse: collapse; /*display: block;*/ } .sidebar table, th, td { border: 1px solid black; } .content { height: 100%; } .content iframe { width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block; } .footer { display: table-row; height:1px; } /* Basic Style*/ * { margin:0; padding:0; } html, body { height: 100%; } </style> </head> <body bgcolor="#FFFFFF"> <div class="wrapper"> <div class="header"> <a href="testTable.html">Untitled</a> </div> <div class="main"> <div class="horizontalbar"></div> <div class="box sidebar"></div> <div class="box content"> <iframe frameborder="0" marginwidth="0" marginheight="0" src="test.svg" id="test_0Id"></iframe> </div> <!--<div class="box sidebar"></div>--> <div class="box sidebar"> <table cellpadding="5"> <caption>Список переменных и их значения</caption> <tr> <th>Переменная</th> <th>Значение</th> </tr> <tr> <td>mon1</td> <td><div contenteditable="true">false</div></td> </tr> <tr> <td>mon2</td> <td><div contenteditable="true">false</div></td> </tr> </table> </div> <div class="horizontalbar"></div> </div> <div class="footer">Footer text</div> </div> <script type="text/javascript" src="test_0.js"></script> </body> </html> На рисунке представлен результат - https://ibb.co/gZAb2A Как таблицу (снизу слева), поднять вверх. Пробовал различные варианты position (+ top), ничего не вышло.
  3. ioprst
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1088 1088" preserveAspectRatio="xMinYMin meet" style="background:#31C184"> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>testPrj</title> <style> body, html {width: 100%; height: 100%; margin: 0; padding: 0} .row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;} .first-row {display: table-row; overflow: auto;} .second-row {display: table-row; height: 100%; overflow: hidden } .second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;} </style> </head> <body bgcolor="#0974F7"> <div class="row-container"> <div class="first-row"> <h1>test</h1> <button onclick='location.href="Auto.html"'>Auto</button> </div> <div class="second-row"> <iframe frameborder="0" marginwidth="0" marginheight="0" width="100%" height="100%" src="Auto.svg" id="AutoId"></iframe> </div> </div> <script type="text/javascript" src="Auto.js"></script> </body> </html> 1) шапка svg 2) html код Может быть пригодится кому-то.
  4. ioprst
    Привет. Подскажите как правильно объявить svg объект, чтобы он занял все свободного пространство экрана и при этом не "вылезал" вниз. Например у меня есть svg (большой код, т.к. в ней просто 17 одинаковых элементов, которые расположены по главной горизонтали): <svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" height="1088px" style="background:#FFFFFF" version="1.1" width="1088px"> <defs> <style type="text/css"> .default_default { fill: #E4801B; stroke: #000000; stroke-width: 1.0px; } </style> </defs> <g id="root" transform="translate(0,0)"> <g id="Auto" class="default_default" transform=" translate(0,0) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c0trumpet"/> <rect y="26" x="3" height="12" width="2" id="c0flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="11" height="12" width="2" id="c0flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="19" height="12" width="2" id="c0flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="27" height="12" width="2" id="c0flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="35" height="12" width="2" id="c0flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="43" height="12" width="2" id="c0flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="51" height="12" width="2" id="c0flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="59" height="12" width="2" id="c0flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> </g> <g id="Auto" class="default_default" transform=" translate(576,576) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c1trumpet"/> <rect y="26" x="3" height="12" width="2" id="c1flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="11" height="12" width="2" id="c1flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="19" height="12" width="2" id="c1flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="27" height="12" width="2" id="c1flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="35" height="12" width="2" id="c1flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="43" height="12" width="2" id="c1flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="51" height="12" width="2" id="c1flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="59" height="12" width="2" id="c1flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> </g> <!-- тут еще 14 групп с id="Auto"--> <g id="Auto" class="default_default" transform=" translate(960,960) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c15trumpet"/> <rect y="26" x="3" height="12" width="2" id="c15flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="11" height="12" width="2" id="c15flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="19" height="12" width="2" id="c15flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="27" height="12" width="2" id="c15flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="35" height="12" width="2" id="c15flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="43" height="12" width="2" id="c15flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="51" height="12" width="2" id="c15flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="59" height="12" width="2" id="c15flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> </g> </g> </svg> Auto.html выглядит следующим образом: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div class="menu"> <a href="Auto.html">Untitled</a> <div> <object id="AutoId" type="image/svg+xml" data="Auto.svg"></object> </div> <script type="text/javascript" src="Auto.js"></script> </div> </body> </html> Таким образом я получаю страницу, которая представлена на рисунке 1. Как видно, не вся svg поместилась на страницу. А хотелось бы получить результат как на второй картинке, т.е. уместить всю svg в область под <a>Untitled</a> так, чтобы вниз страница не прокручивалась.
  5. ioprst
    А где это найти? Вообще я просто в svg файле ссылаюсь на изображение, типа такого: style="background:url(d:\project\u_classes\build\example_of_using_styles\img.jpg)" но вот изображения нет. Я понимаю, что апач блокирует подобные обращения, т.к. дальше /cgi-bin и /htdocs не пускает. Но вот то, что вы предлагаете, нигде не найду в самом апаче.
  6. ioprst
    Привет. Подскажите пожалуйста, что нужно настроить в конфиге apache24, чтобы локальная страничка могла обрабатывать данные с любого места жесткого диска. Сейчас проблема в том, что я пытаюсь на страничке вызвать изображение (указываю полный путь), которое расположено, например, на флешке, но всегда выводит белый фон.
  7. ioprst
    Привет. Подскажите, пожалуйста, как в svg файле (<defs>...</defs>) указать цвета и цвета строк, которые могут использоваться в документе. Например градиент указывается так: <defs> <linearGradient id="linearGradientDefault"> <stop offset="0" stop-color="#808080" stop-opacity="1"/> <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="1"/> <stop offset="1" stop-color="#404040" stop-opacity="1"/> </linearGradient> <linearGradient y2="40" x2="0" y1="24" x1="0" gradientUnits="userSpaceOnUse" id="linearGradientPipe" xlink:href="#linearGradientDefault" inkscape:collect="always"/> </defs> И к нему можно обратиться следующим образом через url: <rect y="24" x="0" height="16" width="64" id="c0trumpet" style="fill:url(#linearGradientPipe);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.18708867"/> А вот как указать просто цвет или цвет строки информации не найду. Вариант "просто указать в элементе fill:#RRGGBB" не подходит.
  8. ioprst
    Решено. var svgDoc; var control_switch; window.onload = function () { svgDoc = document.getElementById("switchid").contentDocument; initClick(); } function initClick() { control_switch = svgDoc.getElementById("switch"); control_switch.onclick = function () { // func text } }
  9. ioprst
    Привет. Подскажите, пожалуйста, почему данный код может не работать: var svgDoc; window.onload = function() { svgDoc = document.getElementById("switchid").contentDocument; } var switch_ = svgDoc.getElementById("switch"); switch_.onclick = function() { current_position = Number(switch_.getAttribute("y")); if(current_position == 32) { // off switch_.setAttribute("y", "9"); switch_.setAttribute("style", "fill:#00ff00"); } else { switch_.setAttribute("y", "32"); switch_.setAttribute("style", "fill:#ff0000"); } } Суть проста. Подключаюсь к svg на странице. И хочу по клику на определенный прямоугольник (id="switch") переводить его из одного положения в другое, ну и цвет меняю. Если все это перенести в функцию события window.onload, то работает, но такой вариант не подходит.
  10. ioprst
    adrey7287, width="100vw" попробовал, ничего не меняется, также мелкая картинка в углу. сама картинке (svg) имеет размеры 64х64px (это та, что truba), но вообще я загружаю на сайд svg которая имеет размеры: height="100%" width="100%".
  11. ioprst
    Ну проблема была в моей неопытности разработки js. Ну и кэш в хроме советую отключать, т.к. он мозги моросит, когда тестирую свое приложение через localhost
  12. ioprst
    Привет. Подскажите, пожалуйста, как растянуть svg на весь экран и возможно ли это вообще. Например, есть svg как в приложении (truba.svg), может быть ситуация, что таких svg будет несколько (естественно, объединенных в одну). svg на страничке отображаю следующим образом: <object id="svg_id" type="image/svg+xml" width="1024" height="768" data="svg_name.svg"></object> Также, если кто знает, подскажите, что можно/нужно почитать для решения следующей проблемы: есть на страничке svg, например, на svg нарисована кнопка, и если нажать на эту кнопку, происходит какое-то событие, на которое js реагирует. Спасибо.
  13. ioprst
    Тема закрыта.
  14. ioprst
    Вкладки переключаются через HTML. У меня data_send это не просто какое-то значение, а список имен переменных, которые я бы хотел обновлять (запрашивать у сервера).
  15. ioprst
    Switch74, не могли бы вы пояснить, 1) что значит "на вкладке можно держать data-send". 2) И что касается "можно вызывать функцию анимации при открытии вкладки", это делается средствами js или html? Спасибо.
  16. ioprst
    Привет. Проблема в следующем. Есть одна страничка, на которой две вкладки, на второй вкладке исполняется js. В firefox'e все как надо, запускаю localhost и на какой-бы вкладке изначально я не оказался, анимация svg (js выполняет) работает, после перехода с 2ой вкладки на первую и обратно, анимация также работает. Что происходит в Хроме: Если я запускаю страницу (перезапускаю) и оказываюсь на второй вкладке, то анимация есть, стоит перейти с 2ой вкладки на 1ю и обратно, анимация пропадает. Суть в том, что в хроме при любом переходе между вкладками js перестает работать, либо проблема в XMLHttpRequest. Привожу js код, который исполняется на второй вкладке: var svgDoc; var xhr; var c1_boolFlow = false; window.onload = function() { svgDoc = document.getElementById("cns2Id").contentDocument; var timer = setInterval(anim, 100); var timerPost = setInterval(setPost, 100); } function anim() { c1anim(); } // Функция отправки запроса function setPost() { xhr = new XMLHttpRequest(); var send = ["c1_boolFlow"]; xhr.open("POST", 'cgi-bin/getVars.py', true); xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8') xhr.onreadystatechange = onResponse; xhr.send(send); } // Функция обработки ответа function onResponse() { if (xhr.readyState != 4) { return; } var respJSON = JSON.parse(xhr.responseText); c1_boolFlow = respJSON.c1_boolFlow; } ...
  17. ioprst
    Спасибо. А что касается того факта, что после переключения между вкладками на странице js перестает работать, есть мысли? Т.е. я даже для теста оставил вообще один js, который анимирует svg на первой вкладке. Запускаю страничку, анимация идет, перехожу на вторую вкладку, снова на первую - анимации нет. Перезагружаю страницу, анимация появляется.
  18. ioprst
    Спасибо за совет. Так уже пробовал. Я тоже полагаю, что вся проблема в JS, т.к. там повторяющиеся блоки, скину пример. JS1: var svgDoc; var xhr; var c0_boolFlow = false; var c0flow; var c0colorLed = "0000ff"; var c0numLed = 0; var c0i = 0; window.onload = function() { svgDoc = document.getElementById("cnsId").contentDocument; var timer = setInterval(anim, 100); var timerPost = setInterval(setPost, 100); } function anim() { c0anim(); } // Функция отправки запроса function setPost() { xhr = new XMLHttpRequest(); var send = [ "c0_boolFlow", ]; xhr.open("POST", 'cgi-bin/getVars.py', true); xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8') xhr.onreadystatechange = onResponse; xhr.send(send); } // Функция обработки ответа function onResponse() { if (xhr.readyState != 4) { return; } var respJSON = JSON.parse(xhr.responseText); c0_boolFlow = respJSON.c0_boolFlow; } function c0anim(){ c0flow = new Array(8); for(var c0i = 0; c0i < c0flow.length; c0i++) { c0flow[c0i] = svgDoc.getElementById("c0flow" + c0i); } if(c0_boolFlow) { for(var c0i = 0; c0i < c0flow.length; c0i++) { if(c0i == c0numLed) { c0flow[c0i].setAttribute("style", "opacity:1;fill:#" + c0colorLed); } else { c0flow[c0i].setAttribute("style", "opacity:0.25;fill:#" + c0colorLed); } } c0numLed++; if(c0numLed > c0flow.length) { c0numLed = 0; } } else { for(var c0i = 0; c0i < c0flow.length; c0i++) { c0flow[c0i].setAttribute("style", "opacity:0.25;fill:#" + c0colorLed); } c0numLed = 0; } } JS2: var svgDoc; var xhr; var c49_boolFlow = false; var c49flow; var c49colorLed = "0000ff"; var c49numLed = 0; var c49i = 0; var c49j = 0; window.onload = function() { svgDoc = document.getElementById("notCnsId").contentDocument; var timer = setInterval(anim, 100); var timerPost = setInterval(setPost, 100); } function anim() { c49anim(); } // Функция отправки запроса function setPost() { xhr = new XMLHttpRequest(); var send = [ "c49_boolFlow", ]; xhr.open("POST", 'cgi-bin/getVars.py', true); xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8') xhr.onreadystatechange = onResponse; xhr.send(send); } // Функция обработки ответа function onResponse() { if (xhr.readyState != 4) { return; } var respJSON = JSON.parse(xhr.responseText); c49_boolFlow = respJSON.c49_boolFlow; } function c49anim(){ c49flow = new Array(6); for(var c49i = 0; c49i < c49flow.length; c49i++) { c49flow[c49i] = svgDoc.getElementById("c49flow" + c49i); } if(c49_boolFlow) { for(var c49i = 0; c49i < c49flow.length / 2; c49i++) { if(c49i == c49numLed) { for (var c49j = 0; c49j < c49flow.length; c49j += 3) { c49flow[c49i + c49j].setAttribute("style", "opacity:1;fill:#" + c49colorLed); } } else { for (var c49j = 0; c49j < c49flow.length; c49j += 3) { c49flow[c49i + c49j].setAttribute("style", "opacity:0.25;fill:#" + c49colorLed); } } } c49numLed++; if(c49numLed > c49flow.length / 2) { c49numLed = 0; } } else { for(var c49i = 0; c49i < c49flow.length / 2; c49i++) { for (var c49j = 0; c49j < c49flow.length; c49j += 3) { c49flow[c49i + c49j].setAttribute("style", "opacity:0.25;fill:#" + c49colorLed); } } c49numLed = 0; } } Я полагаю, что window.onload = function() все и портит мне. Ее можно вызывать только один раз, а для каждого document.getElementById("name").contentDocument создавать свою переменную?
  19. ioprst
    Привет. Подскажите, пожалуйста в чем может быть проблема и, если это возможно, как ее решить. Суть в следующем. Есть одна html страница, на которой реализовано две вкладки. На каждой вкладке отдельном окне, обрамленном с помощью css размещена svg картинка для которой необходимо выполнять JS код. В HTML пытался реализовать подобным образом: <body> <div class="menu1"> <br id="notCns"/> <a href="#cns">cns</a><a href="#notCns">notCns</a> <div> <object id="cnsId" type="image/svg+xml" width="1024" height="768" data="cns.svg"></object> <<script type="text/javascript" src="cns.js"></script> </div> <div> <object id="notCnsId" type="image/svg+xml" width="1024" height="768" data="notCns.svg"></object> <script type="text/javascript" src="notCns.js"></script> </div> </div> </body> Проблема состоит в том, что при запуске страницы запускается только второй скрипт. И если переключиться между вкладками то и второй скрипт перестает работать. Суть скриптов проста: в каждом js в window.onload подключаюсь к svg и с определенным интервалом меняю какие-то значения в svg, например, цвет.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept