Форум

Master_Sergius · #1 (**permalink**) 25.08.2014, 21:14

Должен предупредить, что тут также будет присутствовать css.
Итак, первое: футер почему-то вылазиет за рамки окна (пришлось вложить рисунок, а то тут только ссылку требует)

И второе, когда создавать динамически дополнительные элементы, они могут лезть прямо под футер и дальше, он не отсовывается. Можно ли как-то это ипсравить?

Прилагаю сам css-файл (если надо, то и js вложу, но думаю, не в нём проблема):
(здесь есть класс footer)

Код:

fieldset.login { position: absolute; top: 25%; left: 35%; width: 30% }
header { height: 30px; width: 100%; background: #00CCFF }
body { height : 100%; bottom-margin: 30px }
footer { height: 30px; position: absolute; bottom: 0; width: 100%; background: #00CCFF }
#user_header { position: relative; float: right }
#user_footer { position: relative; float: right }
table.records_table { border: 1px solid black; width: 50%; }
th { border: 1px solid black; text-align: center; background-color: #333333; color: #FFFFFF }
td { border: 1px solid black; text-align: center; }
tr.income { background-color: #00FF33 }
tr.outcome { background-color: #FF3300 }

input.date { width: 100px }
input.amount { width: 100px }
input.description { width: 300px }

Aetae · #2 (**permalink**) 25.08.2014, 21:50

1. попробуй:

* {margin:0 padding:0;}

2. Без полноценного html примера не разберёшься. Сделай тестовую страничку в песочнице или jsfiddle.

Master_Sergius · #3 (**permalink**) 25.08.2014, 22:06

Это помогло выровнять футер, чтоб за края не лез. Но, при динамическом создании элементов, он по прежнему не отсовывается, а объекты "пролазиют" под ним

не знаю, чем поможет мой хтмл, если объекты создаются динамически (вот тем скриптом, что вы видели в прошлой моей теме, вы на него отписались пару раз)

Aetae · #4 (**permalink**) 26.08.2014, 00:00

Чем поможет - тем, что можно сразу приступить к ковырянию в проблемном коде. А не стыковать вручную у себя css из одной темы, js из другой, html из головы. Мне лично лень этим заниматься. Как и большинству людей, что потенциально могут тебе помочь. Хочешь получить ответ быстро и по делу - позаботься о том чтобы для других это было не в напряг.

Master_Sergius · #5 (**permalink**) 26.08.2014, 00:43

Ну ок, только не обращайте внимание тогда на ${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} &nbsp;<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 = "";
};

Erolast · #6 (**permalink**) 26.08.2014, 06:34

Вообще, злоупотреблять созданием элементов в 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;").
Третий - это использовать шаблоны.

Erolast · #7 (**permalink**) 26.08.2014, 06:44

Цитата:

Но, при динамическом создании элементов, он по прежнему не отсовывается, а объекты "пролазиют" под ним

Я не понял, что значит "отсовывается", но пролазят элементы под футером потому, что у него стоит position: absolute. Элементы с абсолютным позиционированием вырываются из общего порядка отображения и отрисовываются поверх всех остальных. Для модальных окон/перетаскиваемых элементов используется именно абсолютное позиционирование.

Aetae · #8 (**permalink**) 26.08.2014, 11:04

.setAttribute("class","description") можно заменить на .className = "description" для единообразия.) (class зарезервированное слово, потом со свойством пришлось извращаться)

P.S. Вы так и не поняли, что я имел ввиду под "полноценным примером".=\

Master_Sergius · #9 (**permalink**) 26.08.2014, 17:19

Сообщение от Aetae

P.S. Вы так и не поняли, что я имел ввиду под "полноценным примером".=\

А что надо было весь проэкт выложить? Там почти 1000 строк кода в общем, около 10 файлов.

П.С. Я уже нашел статейку на хабре

Aetae · #10 (**permalink**) 26.08.2014, 19:00

Надо было одним целым рабочим примером. Нажал на кнопку и смотришь, а н собираешь разрозненные куски кода.

Форум

Справочник

Discord чат

Курсы javascript