clip:rect(... ... ... ...);

[stweet]

написал простенький пример, хочу сотворить что то типа фрейма со скролом.

<div id="mask" style="position:absolute; clip:rect(auto, 300px, 200px, auto); border:#F00 1px solid;">
<div id="target" style="width:inherit; height:inherit;">
text<br>
text<br>
text<br>
text<br>
....
<!-- мнОго -->
</div>
</div>

Суть проблемы в том что "clip:rect()" скрывает только текст а хотелось что бы и размеры контейнера "mask" возвращать.

Если кто знаком с иными языками программирования, знаком и с таким методам как "override". Вот и тут я пытаюсь переопределить размеры маски - контейнера,

чтобы не возвращали мне размеры содержимого "таргета" а возвращались размеры маски.

У меня выходит, если объект "таргет" превышает размеры браузера не взирая на то что отображается только 300х200 рх, появляется скрол-бар чего по идее быть не должно,

т.к. рассчитывал что "маска" не только скрывает текст но и переопределяет размеры контейнера.

Т.е. что бы я не добавлял в "маску" размеры объекта считались бы "300х200" как указанно в настройках "clip:rect()";

Если есть такое решение, подскажите, надеюсь не все способы перепробовал.

заранее благодарен.

Edited January 21, 2012 by stweet

[Softlink]

Как-то не очень я все понял. Надо сделать блок со скроллом?

[stweet]

  On 1/21/2012 at 5:02 AM, Softlink said:

Как-то не очень я все понял. Надо сделать блок со скроллом?

не совсем но, цель она самая.

Вот есть понятие "маска" - скрывает то что выходит за её пределы а т.е. показывает только то что в ней.

У неё есть размеры, к примеру 100 на 100 пикселей.

Есть некий объект "див" размером 500 на 500 пикселей.

Если использовать "clip:rect();" он выступит в роли маски и отобразит только 100 на 100 пикселей объекта "див".

Но! Если окно браузера уменьшить хотя бы до 300 на 300 пикселей, появляется скролл бар которого по идее быть не должео, это видно на скрине.

Бляха, я не знаю как ещё объяснить)))

Во! В справочнике(на данном сайте) по "css" или "html" слева есть навигатор по тегам, вот там скролл бар, вот я добиваюсь сделать тоже самое.

[Softlink]

stweet, насколько я понял вопрос, то это решается через overflow:auto; И на сайте это сделано именно таким образом.

[stweet]

  On 1/21/2012 at 5:17 AM, Softlink said:

stweet, насколько я понял вопрос, то это решается через overflow:auto; И на сайте это сделано именно таким образом.

Да да, я это уже по исходному понял))) Но меня интересует смена дизайна самого скролл бара.

т.е. я сделал сам скролл бар и теперь хочу сделать сам фрем к нему.

Просто я не знаю как это объяснить на "сss" языке)))

<div style="width:100px; height:100px; position:absolute; clip:rect(0px 100px 100px 0px);"> <!-- играет роль маски для нижнего дива. -->
    <div style="width:500ox; height:500px">
        картинка с размера 500 на 500 пикселей.
    </div>
    <div></div> <!-- допустим скролл бар для верхнего дива. -->
</div>
<!--
так вот, если данный код открыть в браузере мы увидим объект размером в 100 на 100 пикселей.
если мы решим уменьшить окно браузера(resize) до размеров 200 на 200 пикселей, браузер отобразит
скрол бар, т.е. браузер знает то что в документе присутствует объект размером 500 на 500 пикселей.
Я добиваю того что бы не зависимо какого размера объект, браузер знал только о размерах маски.
И, к примеру, браузер отображал скролл бар только в том случае если его окно меньше 100 на 100 пикселей.
Блин, как изложить идею хз. =(((
-->

[stweet]

Вот тут прекрасно видно чего я пытаюсь избежать.

[buddah]

Я не совсем понимаю, зачем там clip нужен, но посмотри сюда (в примерах), возможно натолкнет на мысль.

[stweet]

  On 1/21/2012 at 6:26 AM, buddah said:

Я не совсем понимаю, зачем там clip нужен, но посмотри сюда (в примерах), возможно натолкнет на мысль.

О спасибо! То что доктор прописал))) Огромное спасибо!

[Softlink]

Если надо стилизовать скролл, то еще такой скрипт неплох.

[stweet]

Там используют "jQuery" а нет ли на чистом "js" подобных примеров?