Reply to this topicStart new topicStart Poll

фрейм но не фрейм

dudeonthehorse
Отправлено: May 14 2010, 07:49 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09



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

суть:
CODE
<style>
div.frame
{
width:600px;
height:600px;
position:absolute;
top:50%;
left:50%;
margin:300px 0 0 300px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
background:#fff;
overflow:hidden;
}
</style>
<div class="frame">
     <!-- контент -->
</div>

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

задача: присобачить что то а-ля скроллбар к этому диву и при перетаскивании язычка прокручивать контент в этом диве.

я так понимаю, что на язычок мы вешаем jquery draggable(), но вот не в курсе можно ли это прикрутить так чтобы перетаскивание язычка по этой ф-ии было только по вертикали, и вместе с этим двигался и контент в нашем псевдофрейме

и наконец, самое трудное:
1. синхронизировать движение язычка с прокруткой контента, в соответствии с длиной самого контента относительно высоты нашего дива (принцип скроллбара)
2. не представляю как, но полагаю что возможно давать ступор язычку и контенту в начале и в конце прокрутки

з.ы. задача поставлена больше в целях саморазвития и спортивного интереса, потому буду рад любым мыслям на этот счет smile.gif я знаю что на флеше такое есть. но вот хотелось бы сверстать

з.ы.ы ну а если кто то уже видел решение этой задачи, жму руку, и прошу линку smile.gif
PMEmail PosterICQ
Top
Матроскин
Отправлено: May 15 2010, 11:18 AM
Quote Post


  Генерал
*

Группа: Members
Сообщений: 245
Пользователь №: 2581
Регистрация:
9-June 09



Может я недопонял сути задачи, но согласно тому, как я понял, реализуется а-ля фрейм со скроллом просто:
CODE
<style>
div.frame
{
width:600px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -300px;
background:#fff;
overflow:auto;
border:1px solid red;
padding:10px;
}
</style>

<div class="frame">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a metus nulla.
Nulla mollis mauris nec est commodo a ornare urna suscipit. Vestibulum porttitor
viverra justo, a vehicula magna gravida quis. Donec interdum condimentum est, sed
fermentum tellus condimentum id. Fusce porttitor, risus a convallis blandit,
sapien eros iaculis nisl, a sodales urna sapien at nisi. Nam vitae nulla suscipit
tortor tincidunt rhoncus. Morbi sapien magna, feugiat vitae sodales sit amet,
pulvinar ut tortor. Aliquam condimentum pretium urna eu gravida. Vestibulum ut
purus mi. Nulla ac magna sed odio elementum consectetur sed eget urna. Quisqueac
tincidunt dui. Etiam accumsan ullamcorper dui, at fringilla tellus tempor vitae.
Duis a lorem lectus, at pellentesque augue. Ut interdum condimentum pellentesque.
Vestibulum lacinia, tellus eget suscipit consectetur, augue diam rutrum est, sit
amet auctor est lectus nec est. Nam sit amet cursus nunc. Sed id nisi leo. Ut
neque metus, varius vitae mollis id, sodales et metus. Fusce ornare tincidunt mi,
sed tempus arcu vehicula eget.</p>
</div>


--------------------
PMEmail PosterUsers Website
Top
dudeonthehorse
Отправлено: May 15 2010, 11:59 AM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09



мдя! smile.gif как все просто, а главное частично решает задачу, НО встает извечный вопрос стилизования скроллбара.... да и хотелось бы плавно и красиво прокручивать контент
PMEmail PosterICQ
Top
Матроскин
Отправлено: May 15 2010, 01:31 PM
Quote Post


  Генерал
*

Группа: Members
Сообщений: 245
Пользователь №: 2581
Регистрация:
9-June 09



Ну, по вопросу стилизования скроллбара, то тут даже не знаю чем помочь - стандартные средства (css) здесь годятся только для ИЕ, а в Мозилле они уже не катят. Ну а плавно и красиво прокручивать контент - это однозначно можно, но тут я не специалист ибо плохо разбираюсь в яваскрипт rolleyes.gif

P.S. Кстати, вот здесь нашел как поменять вид скролла с помощью скрипта...


--------------------
PMEmail PosterUsers Website
Top
dudeonthehorse
Отправлено: May 15 2010, 04:40 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09



Матроскин, спасибо!
PMEmail PosterICQ
Top
Матроскин
Отправлено: May 15 2010, 08:45 PM
Quote Post


  Генерал
*

Группа: Members
Сообщений: 245
Пользователь №: 2581
Регистрация:
9-June 09



Усегда велкам beer.gif


--------------------
PMEmail PosterUsers Website
Top

Topic Options Reply to this topicStart new topicStart Poll

 



[ Script Execution time: 0.0188 ]   [ 10 queries used ]   [ GZIP выключен ]