изменить размер целевого div на основе ширины клиента другого div, для ширины которого установлено значение auto

Я пытаюсь динамически изменить ширину одного DIV (целевого) на основе clientWidth другого (источника).

Примечание. Стиль CSS исходного DIV — ширина: авто;

1-я проблема: это не работает... это должен быть мой синтаксис или что-то в этом роде?

2-я проблема: необходимо динамически изменять размер, когда пользователь меняет окно браузера (вызов сценария при изменении размера окна). Как ???

Javascript:

<script>

// START RESIZE WIDTH SCRIPT
function resizetarget(){

var resizesource = document.getElementById('section');
var sourcewidth = resizesource.style.clientWidth;
var resizetarget = document.getElementById('collpilewrapper');
var targetwidth = resizetarget.style.clientWidth;

targetwidth = sourcewidth;

}

</script>

CSS:

.section{
    width:auto;
    max-height:75%;
    top:60px;
    bottom:60px;
    margin-bottom:60px;
    left:280px;
    right:0px;
    position:absolute;
    background-color:#FFF;
    white-space:nowrap;
    display:inline-block;
}
.section li{float:left; display: inline; }
.pane{
    overflow:auto;
    clear:left;
    position:relative;
    width:100%;
    height:100%;
    }

#collpilewrapper{
    min-width:900px;
    min-height:100%;
    float:left;
    background-color:#69C;
    display:table-column;
    }

HTML:

<!--start content-->

<div class="section">

<div id="pane-target" class="pane">

<ul class="elements" style="width:16000px">

<!--box 0 -->
<li>
<!-- START landing group -->

    <div id="collpilewrapper">

          <div id="collpile1">
          <img src="images/coll-missy-714x737.jpg" /></div>

          <div id="collpile2">
          <img src="images/coll-girls-602x476.jpg" /></div>

          <div id="collpile3">
          <img src="images/coll-toddler-421x447.jpg" /></div>

    </div>

<!-- END landing group -->

</li>

<!--box 1 -->
<li>
<!-- START missy group -->
<div id="adbox">
<img class="largead" src="images/storypic-na.jpg" />
</div>
<div id="adbox">
<img class="largead" src="images/videostill1.jpg" />
</div>
<!-- END missy group -->

</li>
</ul>     
</div>
</div>

<!--end content-->

html resize getelementbyid dynamic-css
person CharlesNYC    schedule 28.03.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

jsfiddle

Я использовал jQuery, так как мне с ним проще работать. Я заметил пару проблем. Вы нацеливались на элемент по идентификатору, но раздел — это класс, а не идентификатор. style.clientWidth официально не поддерживается, судя по тому, что я видел, когда гуглил. Похоже, это то, что раньше использовал IE (честно говоря, я ничего об этом не знаю).

JQuery

function resizeWidth(source, target){
    var sourcewidth = $(source).width();

    $(target).css({
        "width": sourcewidth
    });
}

$(window).resize(function() {
    resizeWidth("#section", "#collpilewrapper");
});

Какой бы код вы ни разместили внутри этого, он будет выполняться при изменении размера окна.

$(window).resize(function() {

});

resizeWidth() — это функция, которую я сделал сам. Он принимает source и target.

width() даст вам ширину элемента.

css() позволяет нам напрямую изменять CSS.

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

person MiniRagnarok    schedule 11.04.2013