Javascript.RU

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

Задать зависимость отступа одного элемента от длины другого
Добрый день!
Не могу никак решить простую задачу. Есть два блока. Первый обтекает второй. Надо задать, что если второй имеет ширину 0, то ширина первого равна 100%, в если второй имеет ширину>0 то у первого ширина = 100%-(ширина второго), отступ от края = ширина второго.

Можно это как-то сделать??
Ответить с цитированием
  #2 (permalink)  
Старый 16.11.2012, 15:21
Аватар для dmitry111
Профессор
Отправить личное сообщение для dmitry111 Посмотреть профиль Найти все сообщения от dmitry111
 
Регистрация: 26.03.2012
Сообщений: 823

<!DOCTYPE HTML>
<html>
  <head> 
    <style>
      #a,#b {
        height: 100px;
      }
      #a {
        background: #f00;
        float: left;
        width: 50%;
      }
      #b {
        background: #0f0;
        margin-left: 50%;
      }
    </style>
  </head>
  <body>

    <div id="a"></div>
    <div id="b"></div>

    <input id="size" type="range" min="0" max="100" value="50">
        
    <script>
      document.getElementById("size").onmousedown = function () {
      
        this.onmousemove = function () {
        
          document.getElementById("a").style.width = this.value + "%";
          document.getElementById("b").style.marginLeft = this.value + "%";
          
        };
        
      };  
    </script>
  </body>
</html>


Двигай ползунок

Последний раз редактировалось dmitry111, 16.11.2012 в 15:37.
Ответить с цитированием
  #3 (permalink)  
Старый 16.11.2012, 15:28
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от dmitry111
Главное чтобы ширина первого == отступу второго
Осталось только понять как у ТС формируется та ширина...
Ответить с цитированием
  #4 (permalink)  
Старый 16.11.2012, 15:32
Новичок на форуме
Отправить личное сообщение для Мария86 Посмотреть профиль Найти все сообщения от Мария86
 
Регистрация: 16.11.2012
Сообщений: 5

Немного не правильно поняли. Я не могу справиться и написать сама скрипт, который бы проверял ширину второго блока (а ширина соответственно = 0+ в зависимости от содержимого), и присваивал бы это значение отступу первого блока.

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


Хотя нет, правильно поняли, очень правильно.
Смысл такой. Сейчас попробую под свой документ переделать.

Последний раз редактировалось Мария86, 16.11.2012 в 15:37.
Ответить с цитированием
  #5 (permalink)  
Старый 16.11.2012, 15:40
Новичок на форуме
Отправить личное сообщение для Мария86 Посмотреть профиль Найти все сообщения от Мария86
 
Регистрация: 16.11.2012
Сообщений: 5

Сообщение от ksa Посмотреть сообщение
Осталось только понять как у ТС формируется та ширина...
Это, значит, надо еще что-то дописать, что бы определяло ширину второго блока (она будет меняться в зависимости от содержимого)? Так, наверное?
Ответить с цитированием
  #6 (permalink)  
Старый 16.11.2012, 15:46
Аватар для dmitry111
Профессор
Отправить личное сообщение для dmitry111 Посмотреть профиль Найти все сообщения от dmitry111
 
Регистрация: 26.03.2012
Сообщений: 823

Мария86,

ширина второго блока (как и любого блочного элемента) по умолчанию равна 100%.

В примере выше вы не манипулируете шириной элемента #b, вы меняете его отступ слева, тем самым изменяя его ширину
Ответить с цитированием
  #7 (permalink)  
Старый 16.11.2012, 20:53
Новичок на форуме
Отправить личное сообщение для Мария86 Посмотреть профиль Найти все сообщения от Мария86
 
Регистрация: 16.11.2012
Сообщений: 5

Все равно не получается.
Допустим есть такая структура документа
Код:
<!DOCTYPE HTML>
<html>
  <head> 
    <style>
      .main {
      height: 100px;
      width: 100%; 
      }   
      #a {
        background: #f00;
        float: left;        
      }
      #b {
        background: #0f0;
      }
      .c {
         height: 50px;
         width: 50px;
         padding: 10px;
       }
    </style>
  </head>
  <body>
 <div class="main">
    <div id="a">
       <div class='c'></div>
    </div>
    <div id="b">        
    </div>
 </div>
  </body>
</html>
но у дива 'a' не задана ширина. Просто в нем или есть (div.c), или нет содержания и от этого определяется его ширина. Как при таких показателях задать ширину и отступ? Т.е. если есть div.c!=0 по высоте и ширине, то эти высота и ширина присваиваются 'a'. И следовательно отступ слева у 'b' = равен ширине 'a'. И 'b' обтекает слева 'a'.
Все, у меня сейчас мозг взорвется.
Ответить с цитированием
  #8 (permalink)  
Старый 16.11.2012, 22:49
Новичок на форуме
Отправить личное сообщение для Мария86 Посмотреть профиль Найти все сообщения от Мария86
 
Регистрация: 16.11.2012
Сообщений: 5

<script> 
				window.onload = function() {
				var awidth=document.getElementById('a').offsetWidth;
				var bmargin;
				bmargin=awidth;
document.getElementById('b').style.marginRight=bmargin+"px";
}
</script>

У меня работает!!! Работает!!!
Спасибо всем, кто принимал участие!
Ответить с цитированием
  #9 (permalink)  
Старый 17.11.2012, 02:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Как же вы любите забивать гвозди микроскопом.

Учитесь

Последний раз редактировалось danik.js, 17.11.2012 в 02:59.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменить высоту одного элемента вычтя ее из другого newcoder jQuery 4 09.02.2015 00:06
Как сделать выборку среди детей одного элемента Почемучкин jQuery 4 29.08.2012 00:51
перемещение элемента на место другого и замена одного на другой? SunYang Элементы интерфейса 1 03.07.2012 09:03
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 19:03
Центрирование элемента относительно центра другого элемента idrozd jQuery 1 27.01.2010 13:32