Javascript-форум - Подскажите как реализовать

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Подскажите как реализовать (https://javascript.ru/forum/dom-window/48390-podskazhite-kak-realizovat.html)

Подскажите как реализовать

Прошу подсказать как реализовать создание данного интерфейса
1. Если добавить много строчек так чтобы появилась вертикальная прокрутка значении "ИТОГО" должно прилипнуть к нижней границе браузера вокруг него должно появиться рамка.
2. Когда прокручиваем до самого низа и строчка "ИТОГО" ничего не перекрывает - рамка исчезает
Первый пункт реализовал так

/*----------------------------------------------------------------------------------
  Если добавить много строчек так чтобы появилась вертикальная прокрутка 
  значение "ИТОГО" должно прилипнуть к нижней границе браузера вокруг него должно появиться рамка. 
  -----------------------------------------------------------------------------------*/
function getsize() {
    poscont = getElementPosition('cont');
    var topcont = poscont.top;//положение от вержнего края
    var heightcont = poscont.height;//высота ДИВа с добавлениями
   
    var heightresdiv = posresdiv.height;//высота Итого
    heightClient = getClientHeight();//высота клиентской (рабочей) области окна браузера
    bottomcont = parseInt(topcont) + parseInt(heightcont) + parseInt(heightresdiv);//положение от вержнего края + высота
    //lblresult.value = heightClient + "  Итого (низ:" + bottomcont + ")";
    /*--------------------------------------------------------------------------------
    вычислить разность между heightClient - bottomcont
    если отрицательная - то изменить CSS resdiv на рамку
    }
    --------------------------------------------------------------------------------*/
    resultcss = heightClient - bottomcont;
    if (resultcss <= 0)        
        resdiv.className = "border";
    else resdiv.className = " ";
}
//Как узнать положение элемента на странице (определение координат элемента)?
function getElementPosition(elemId) {
    var elem = document.getElementById(elemId);

    var w = elem.offsetWidth;
    var h = elem.offsetHeight;

    var l = 0;
    var t = 0;

    while (elem) {
        l += elem.offsetLeft;
        t += elem.offsetTop;
        elem = elem.offsetParent;
    }

    return { "left": l, "top": t, "width": w, "height": h };
}
//IE5+, Mozilla 1.0+, Opera 7+ 
//Как узнать ширину и высоту клиентской (рабочей) области окна браузера?
//http://www.cyberguru.ru/web/html/javascript-samples-page2.html
/*--------------------------------------------------------------------------
var t = document.getElementById('test');
t.style.width = getDocumentWidth() + 'px';
t.style.height = getDocumentHeight() + 'px';
-------------------------------------------------------------------------------*/
function getClientWidth() {
    return document.compatMode == 'CSS1Compat' && !window.opera ? document.documentElement.clientWidth : document.body.clientWidth;
}
function getClientHeight() {
    return document.compatMode == 'CSS1Compat' && !window.opera ? document.documentElement.clientHeight : document.body.clientHeight;
}

а вот по второму ничего не могу понять :-/

Фиксация строки в пределах блока при прокрутке страницы

krakoss,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #fix{height:700px;background:#FF3}
  #cont{width:200px;height:30px;background:#0C0}
  .border{border:#FF3333 3px solid;position:absolute;z-index:100;top:100px}
  body{position:relative;height:1000px;background:#DDD}
  p{margin:0px}
  .win{height:500px}
  </style>
  <script>
window.onload = window.onscroll = window.onresize = function () {
    var a = document.getElementById("cont"),
        b = document.getElementById("fix").getBoundingClientRect(),
        b = b.top + (a.scrollHeight + 6) < document.documentElement.clientHeight && b.bottom + (a.scrollHeight + 6) > document.documentElement.clientHeight;
    a.style.top = document.documentElement.clientHeight + (window.pageYOffset || document.documentElement.scrollTop) - (a.scrollHeight + 15) + "px";
    a.className = b ? "border" : ""
  };
  </script>
</head>

<body>
  <p class="win"></p>
  <p id="fix">1<br>2<br></p>
  <p id="cont">Итого</p>
  <p class="win"></p>
</body>
</html>

krakoss,
Вариант покороче ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #fix{height:700px;background:#FF3}
  #cont{width:200px;height:30px;background:#0C0}
  .border{border:#FF3333 3px solid;position: fixed;z-index:100; bottom: 0px}
  body{position:relative;height:1000px;background:#DDD}
  p{margin:0px}
  .win{height:500px}
  </style>
  <script>
window.onload = window.onscroll = window.onresize = function () {
    var a = document.getElementById("cont"),
        b = document.getElementById("fix").getBoundingClientRect(),
        b = b.top + a.scrollHeight + 6 < document.documentElement.clientHeight && b.bottom + a.scrollHeight + 6 > document.documentElement.clientHeight;
        a.classList[b ? "add" : "remove"]("border");
  };
  </script>
</head>

<body>
  <p class="win"></p>
  <p id="fix">1<br>2<br></p>
  <p id="cont">Итого</p>
  <p class="win"></p>
</body>
</html>

рони,
а как реализовать эту задачу
http://javascript.ru/forum/dom-windo...it-udalit.html

P.S. Эта задача ни как не связана с сайтом на котором выложены рисунки - там все написано на c#. кому интересно логин и пароль - kkk тестовый режим.
P.S.S. Защита на входе реализована на c# http://msdn.microsoft.com/ru-ru/libr...v=vs.110).aspx

В целях обучения хочу понять и научиться как создавать интерфейсы на javascrip
На c# всё уже есть в visual studio 2013 в частности как отформатировать строку для отображения чисел в том формате как на рисунке
не 55555
а 55 555

Разделение числа на разряды

krakoss,
по первому вопросу тоже есть примеры на форуме ... если очень надо то раздел работа ... но у вас и самого всё неплохо получается

рони,
спасибо буду разбираться ...