Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.07.2014, 03:14
Интересующийся
Отправить личное сообщение для krakoss Посмотреть профиль Найти все сообщения от krakoss
 
Регистрация: 22.03.2013
Сообщений: 25

Подскажите как реализовать
Прошу подсказать как реализовать создание данного интерфейса
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;
}

а вот по второму ничего не могу понять
Ответить с цитированием
  #2 (permalink)  
Старый 02.07.2014, 17:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Фиксация строки в пределах блока при прокрутке страницы
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>
Ответить с цитированием
  #3 (permalink)  
Старый 02.07.2014, 19:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

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>
Ответить с цитированием
  #4 (permalink)  
Старый 03.07.2014, 08:14
Интересующийся
Отправить личное сообщение для krakoss Посмотреть профиль Найти все сообщения от krakoss
 
Регистрация: 22.03.2013
Сообщений: 25

рони,
а как реализовать эту задачу
Динамическое создание поля ввода и кнопок Сохранить Удалить

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
Ответить с цитированием
  #6 (permalink)  
Старый 03.07.2014, 10:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

krakoss,
по первому вопросу тоже есть примеры на форуме ... если очень надо то раздел работа ... но у вас и самого всё неплохо получается
Ответить с цитированием
  #7 (permalink)  
Старый 03.07.2014, 12:04
Интересующийся
Отправить личное сообщение для krakoss Посмотреть профиль Найти все сообщения от krakoss
 
Регистрация: 22.03.2013
Сообщений: 25

рони,
спасибо буду разбираться ...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не правильно работает прокрутка, подскажите как сделать правильно? denfer12 Общие вопросы Javascript 0 09.05.2012 00:34
Как это реализовать на JS Bezlyj Общие вопросы Javascript 6 06.03.2012 09:20
Как реализовать отключения JS кода через админку ? lamer Серверные языки и технологии 4 08.02.2012 17:23
как реализовать свою функцию к переменной czp Общие вопросы Javascript 2 01.01.2012 19:52
как реализовать передачу функции в функцию?? czp Общие вопросы Javascript 10 29.11.2011 19:21