Динамическое создание элементов и Футер
Вложений: 1
Должен предупредить, что тут также будет присутствовать css.
Итак, первое: футер почему-то вылазиет за рамки окна (пришлось вложить рисунок, а то тут только ссылку требует) И второе, когда создавать динамически дополнительные элементы, они могут лезть прямо под футер и дальше, он не отсовывается. Можно ли как-то это ипсравить? Прилагаю сам css-файл (если надо, то и js вложу, но думаю, не в нём проблема): (здесь есть класс footer) Код:
fieldset.login { position: absolute; top: 25%; left: 35%; width: 30% } |
|
Это помогло выровнять футер, чтоб за края не лез. Но, при динамическом создании элементов, он по прежнему не отсовывается, а объекты "пролазиют" под ним
не знаю, чем поможет мой хтмл, если объекты создаются динамически (вот тем скриптом, что вы видели в прошлой моей теме, вы на него отписались пару раз) |
Чем поможет - тем, что можно сразу приступить к ковырянию в проблемном коде. А не стыковать вручную у себя css из одной темы, js из другой, html из головы. Мне лично лень этим заниматься. Как и большинству людей, что потенциально могут тебе помочь. Хочешь получить ответ быстро и по делу - позаботься о том чтобы для других это было не в напряг.
|
Ну ок, только не обращайте внимание тогда на ${records_table} и т.п, туда подставляются строки (пайтон на стороне сервера).
<html> <head> <title>Family budget. Main page</title> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> <link rel="stylesheet" href="/static/css/styles.css" type="text/css" /> <script type="text/javascript" src="/static/js/scripts.js"></script> </head> <body> <header> <div id="user_header"> ${username} <a href="/family_budget/logout">logout</a> </div> </header> <h4>Recent records</h4> <!-- Here must be table with records --> ${records_table} <br> <input type="button" value="Add record" onclick="show_add_form()" /> <input type="button" value="Select records" onclick="show_select_form()" /> <input type="button" value="Delete records" onclick="show_delete_form()" /> <input type="button" value="Show statistics" onclick="show_statistics()" /> <br /> <br /> <form id="action_form" action="/family_budget/main_page" onsubmit="return validateForm()" method="post"> </form> <footer> <div id="user_footer"> Powered by Bottle </div> </footer> </body> </html> Date.prototype.yyyymmdd = function() { var yyyy = this.getFullYear().toString(); var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based var dd = this.getDate().toString(); return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]); }; var validateForm = function() { return true; }; var show_add_form = function () { var form = document.getElementById("action_form"); var date = document.createElement("input"); date.type = "text"; date.id = "date"; date.name = "date"; date.setAttribute("class","date"); d = new Date(); date.value = d.yyyymmdd(); form.appendChild(date); var amount = document.createElement("input"); amount.type = "text"; amount.id = "amount"; amount.name = "amount"; amount.setAttribute("class","amount"); amount.placeholder="money"; form.appendChild(amount); var select = document.createElement("select"); select.id = "type"; select.name = "type"; form.appendChild(select); var option = document.createElement("option"); option.text = "choose one"; select.appendChild(option); var option = document.createElement("option"); option.text = "income"; select.appendChild(option); var option = document.createElement("option"); option.text = "outcome"; select.appendChild(option); var description = document.createElement("input"); description.type = "text"; description.id = "desc"; description.name = "desc"; description.setAttribute("class","description"); description.placeholder="description of money operation"; form.appendChild(description); var br = document.createElement("br"); form.appendChild(br); var submit = document.createElement("input"); submit.type = "submit"; submit.id = "submit"; submit.value = "submit"; form.appendChild(submit); var cancel = document.createElement("input"); cancel.type = "button"; cancel.id = "cancel"; cancel.value = "cancel"; cancel.onclick = function() { hide_action_form(); }; form.appendChild(cancel); }; var show_select_form = function() { var form = document.getElementById("action_form"); var fieldset = document.createElement("fieldset"); fieldset.id = "selects"; var fieldset = document.createElement("fieldset"); var legend = document.createElement("legend"); legend.innerHTML = "Choose one of select queries: "; fieldset.appendChild(legend); var create_option = function(labeltext, id) { var option = document.createElement("input"); option.type = "radio"; option.name = "select_query"; option.id = id var label = document.createElement("label"); label.setAttribute('for', id); label.innerHTML = labeltext fieldset.appendChild(option); fieldset.appendChild(label); var linebreak = document.createElement("br"); fieldset.appendChild(linebreak); }; create_option('SELECT all records', 'opt1'); create_option('SELECT all records with date from to', 'opt2'); create_option('SELECT all records with amount from to', 'opt3'); create_option('SELECT all records with description, which contains', 'opt4'); create_option('SELECT all income records', 'opt5'); create_option('SELECT all outcome records', 'opt6'); form.appendChild(fieldset); var br = document.createElement("br"); form.appendChild(br); var submit = document.createElement("input"); submit.type = "submit"; submit.id = "submit"; submit.value = "submit"; form.appendChild(submit); var cancel = document.createElement("input"); cancel.type = "button"; cancel.id = "cancel"; cancel.value = "cancel"; cancel.onclick = function() { hide_action_form(); }; form.appendChild(cancel); }; var hide_action_form = function() { document.getElementById("action_form").innerHTML = ""; }; |
Вообще, злоупотреблять созданием элементов в js не надо. Данные должны быть отделены от кода, это во-первых, во-вторых, на чистом js создание элементов весьма геморно, как ты мог заметить - то, что в hmtl описываются одной строкой, в js создается тремя и выше.
Есть три варианта по упрощению. Первый - использовать jQuery. Он упрощает создание и работу с элементами: $("<input type='button' id='cancel' value='cancel'>").bind("click", hide_action_form).appendTo(form); //Либо $("<input>", { type: button, id: cancel, value: cancel }).click(hide_action_form).appendTo(form); //click - это то же, что и bind("click"), повесить обработчик //Либо $("<input type='text'>").val("submit").attr("id", "submit").click(hide_action_form).appendTo(form); Второй - описывать все элементы прямо в html и скрывать их ровно до тех пор, пока они не понадобятся (style="display: none;"). Третий - это использовать шаблоны. |
Цитата:
|
.setAttribute("class","description") можно заменить на .className = "description" для единообразия.) (class зарезервированное слово, потом со свойством пришлось извращаться)
P.S. Вы так и не поняли, что я имел ввиду под "полноценным примером".=\ |
Цитата:
П.С. Я уже нашел статейку на хабре |
Надо было одним целым рабочим примером. Нажал на кнопку и смотришь, а н собираешь разрозненные куски кода.
|
Часовой пояс GMT +3, время: 18:11. |