Форум

Axios · #1 (**permalink**) 27.01.2012, 12:38

Все привет, как сделать так, что при заполнении блока его длинная изменялась на какую-то определенную длину например 20 пикселей

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

Все спасибо за помощь кто ответит

Pavel M. · #2 (**permalink**) 27.01.2012, 12:45

что значит "при заполнении блока"
как он заполняется ?
динамически javascript-ом ?

Axios · #3 (**permalink**) 27.01.2012, 14:01

ну там просто менюшка будет, т.е. если клиент захочет добавить еще один пункт меню, то у него блок ровненько раздвинется.

Изменение длинны кратное 13ти

dmitriymar · #4 (**permalink**) 27.01.2012, 14:55

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

ну там просто менюшка будет, т.е. если клиент захочет добавить еще один пункт меню, то у него блок ровненько раздвинется.

у блоков есть высота и ширина. что такое "длинна блока "-наверное никто не знает

Pavel M. · #5 (**permalink**) 27.01.2012, 15:06

если я правильно понял это надо?
кратное 100 сделал
на jquery для быстроты

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  div {
    float:left;
    clear: left;
    height: 50px;
    margin-bottom: 5px;
    background: url(http://placehold.it/100x25) repeat-x left bottom;
    border: 1px solid;
  }
  </style>
</head>
<body>
  <div class="menu">Пункт1</div>
  <div class="menu">Пункт1 - Пункт222222</div>
  <div class="menu">Пункт1 - Пункт2 - Пункт3333333333333</div>
  <div class="menu">Пункт1 - Пункт2 - Пункт3333333333333 - Пункт4444444</div>
<script>

$(function () {
  var step = 100;
  $('.menu').each(function () {
      var jEl = $(this);
      jEl.width(Math.ceil(jEl.width() / step) * step);
  });
});
</script>
</body>
</html>

Pavel M. · #6 (**permalink**) 27.01.2012, 15:25

здесь еще по теме было на css http://habrahabr.ru/blogs/css/134442/

Axios · #7 (**permalink**) 27.01.2012, 15:56

Спасибо огромное, буду тестить

Форум

Справочник

Discord чат

Курсы javascript