Как использовать CSS, чтобы гарантировать, что элементы остаются вне экрана, даже если размер окна изменен? - PullRequest
Новая
       12

Как использовать CSS, чтобы гарантировать, что элементы остаются вне экрана, даже если размер окна изменен?

0 голосов
/ 21 мая 2010

Я пытаюсь реализовать тип слайдера, используя jquery. Однако этот вопрос касается CSS, используемого для достижения функциональности.

Дизайн моего сайта занимает центральную колонку шириной 960 пикселей. В этом макете есть центральный элемент, который я хочу сдвинуть вправо, по нажатию кнопки «Далее», и в то же время другой элемент того же класса скользит слева, чтобы занять освободившееся пространство. Я нарисовал диаграмму того, чего я пытаюсь достичь. alt text http://img714.imageshack.us/img714/692/61886077.png

На этой диаграмме красные блоки - это элемент, который я хочу вставлять и выгружать. Он сгруппирован по элементу div, который перемещается влево для получения эффекта с помощью jQuery

У меня есть 2 основных вопроса:

  1. Как получить правильные значения полей, учитывая, что ширина окна браузера может изменяться и что все элементы, не являющиеся текущим элементом, должны быть вне экрана?

2. Если пользователь должен был изменить размер, поля могли бы быть динамически изменены на основе значений, возвращаемых с помощью события jQuery resize (). Или есть более быстрый способ сделать это с помощью чистого CSS?

Ответы [ 2 ]

2 голосов
/ 21 мая 2010

Создайте в середине элемент div с полем: auto, чтобы он всегда был по центру.Я предполагаю, что ваши (красные) коробки всегда будут одинакового размера?У этого центрированного div с этим размером, и переполнение: скрыто.Затем внутри этого div, создайте три других div, которые будут перемещаться внутри этого фиксированного размера div, а не размера окна браузера.

Что-то вроде: 

<body style="text-align: center">
    <div id="container" style="overflow: hidden; width: 960px; height: 600px; margin: auto; position: relative">
     <div id="slider" style="width: 9999px; position: absolute">
      <div id="first" style="width: 960px; float left;"></div>
      <div id="second" ...></div>
      <div id="third" ...></div>
     </div>
    </div>
</body>

Таким образом, вы перемещаете этот ползунокdiv внутри контейнера слева: 960px, умноженное на количество ящиков

0 голосов
/ 21 мая 2010

Не могли бы вы просто display: none; красные коробки, пока они не были нужны?

Когда им нужно переместиться, вы можете расположить коробки по краю, а затем надеть их на:

http://www.jsfiddle.net/Vsjay/

...