Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Резиновый горизонтальый слайдер, Резиновый горизонтальый слайдер 
:(
    Опции темы
DeMONiZ
Дата 6.7.2011, 13:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет
Здравствуйте форумчане, Сегодня столкнулся с небольшой проблемкой вот и решил попросить помощи у вас.

Есть необходимость сделать горизонтальный слайдер с тремя видимыми ячейками остальные видны при нажатии на стрлочки вправо влево.

js часть написана.

Вопрос вот в чем  не могу сделать так слайдер был резиновым. В данном случае он 900 пикселей а надо чтоб он подстраивался под экран.
Реализация подставления нужной ширины через js не преветствуется.

Прилагаю код:
Код


    <a style="float:left;" onclick="prev()" href="#"><--</a>    
        <div id="s" style="margin-bottom:10px; border:1px solid red; width:900px; float:left; display:block; height:200px; overflow: hidden;">
                <div style="width:1800px;">
                    <div style="border:1px solid red; float:left; width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; float:left; width:298px; height:200px;">2</div>
                    <div style="border:1px solid red; float:left; width:298px; height:200px;">3</div>
                    <div style="border:1px solid red; float:left; width:298px; height:200px;">4</div>
                    <div style="border:1px solid red; float:left; width:298px; height:200px;">5</div>
                    <div style="border:1px solid red; float:left; width:298px; height:200px;">6</div>
                </div>
        </div>
    <a style="float:left;" onclick="next()" href="#">--></a>
PM MAIL WWW   Вверх
mark2011
Дата 6.7.2011, 20:00 (ссылка) | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 174
Регистрация: 28.6.2011

Репутация: нет
Всего: 2
DeMONiZ, 
Вот так вроде бы работает как вам нужно smile

Код

<a style="float:left;" onclick="prev()" href="#"><--</a>    
      <div id="s" style="margin-bottom:10px; border:1px solid red; float:left; height:200px; overflow: hidden;">
      
                <div style="width:auto;">
                    <div style="border:1px solid red; float:left; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; float:left; min-width:298px; height:200px;">2</div>
                    <div style="border:1px solid red; float:left; min-width:298px; height:200px;">3</div>
                    <div style="border:1px solid red; float:left; min-width:298px; height:200px;">4</div>
                    <div style="border:1px solid red; float:left; min-width:298px; height:200px;">5</div>
                    <div style="border:1px solid red; float:left; min-width:298px; height:200px;">6</div>
                </div>
        </div>
    <a style="float:left;" onclick="next()" href="#">--></a>
PM WWW ICQ Skype   Вверх
DeMONiZ
Дата 7.7.2011, 06:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет
Такая реализация не пойдет, да и работать не будет. Если мы ставим ширину блока в авто (width:auto;) то и блоки не вошедшие в экран будут переносится на другую строку то есть вниз а нам нужно расположение блоков паравозиком, чтоб стрелочками прокручивать от одного блока до другого.

А min-width:298px; в данном случае ни как не будет влиять на код.
PM MAIL WWW   Вверх
dma84
Дата 7.7.2011, 19:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет
Код

<a style="float:left;" onclick="prev()" href="#"><--</a>    
      <div id="s" style="width:400px;margin-bottom:10px; border:1px solid red; float:left; height:200px">
      
                <div style="overflow-y: hidden; overflow-x:auto;white-space:nowrap">
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                </div>
        </div>
    <a style="float:left;" onclick="next()" href="#">--></a>


для IE ниже 8-й версии внутренним блокам нужно задать стиль{display:inline;zoom:1}
P.S.: Горизонтальный скролл оставлен для наглядности
Доктайп:
Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Это сообщение отредактировал(а) dma84 - 7.7.2011, 19:54
PM MAIL   Вверх
DeMONiZ
Дата 8.7.2011, 06:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет
Вы видимо не внимательно читали мой первый пост.


Цитата


Есть необходимость сделать горизонтальный слайдер с тремя видимыми ячейками остальные видны при нажатии на стрлочки вправо влево.

js часть написана.

Вопрос вот в чем  не могу сделать так слайдер был резиновым. В данном случае он 900 пикселей а надо чтоб он подстраивался под экран.
Реализация подставления нужной ширины через js не преветствуется.
PM MAIL WWW   Вверх
dma84
Дата 8.7.2011, 10:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет
Да, а ещё я невнимательно посмотрел в ваш код, блок с float:left у вас никогда не будет резиновым

Это сообщение отредактировал(а) dma84 - 8.7.2011, 10:40
PM MAIL   Вверх
DeMONiZ
Дата 8.7.2011, 11:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет
Вы говорите глупость вот вам два блока с флотом

Код


<div style="float:left; width:49%; border:1px solid red;">1</div>
<div style="float:left; width:49%; border:1px solid red;">2</div>
PM MAIL WWW   Вверх
dma84
Дата 8.7.2011, 11:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет
Код

<style type="text/css">
  #s{border:1px blue solid}
  #s div{border:1px solid red; display:inline-block; width:298px; height:200px;}
  *html #s div{display:inline !important;zoom:1}
  *+html #s div{display:inline !important;zoom:1}
  *html a.left{left:-20px !important}
 </style>
 <div id="main" style="position:relative;white-space:nowrap;border:1px green solid;overflow:hidden;padding:0 20px">
  <a class="left" style="display:inline-block;position:absolute;left:0;top:0;margin-top:100px" onclick="prev()" href="#"><--</a>
                <div id="s" style="width:100%;display:inline-block;overflow-x:auto;overflow-y:hidden;white-space:nowrap;height:200px">
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                </div>
    <a style="display:inline-block;position:absolute;right:0;top:0;margin-top:100px" onclick="next()" href="#">--></a>
 </div>


короче вот
PM MAIL   Вверх
DeMONiZ
Дата 8.7.2011, 11:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет
Да и я без проблем уберу из своего когда float

Вот код:
Код


    <a style="float:left;" class="arrow-left" onclick="prev()" href="#"></a>    

    <a style="float:right;" class="arrow-right" onclick="next()" href="#"></a>
    
        <div id="s" style=" border:0px solid silver; margin-right:20px; margin-left:20px; display:block; height:200px; overflow: hidden;">
                <div style="width:<?=konsult('1');?>px;">
                    <?=konsult()?>
                </div>
        </div>
PM MAIL WWW   Вверх
dma84
Дата 8.7.2011, 11:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет
Цитата(DeMONiZ @ 8.7.2011,  11:30)
Вы говорите глупость вот вам два блока с флотом

Код


<div style="float:left; width:49%; border:1px solid red;">1</div>
<div style="float:left; width:49%; border:1px solid red;">2</div>


В примере ТС, если блоку задать ширину 100%, ссылки улетят на другие строки, тупо подгонять процентами типа 96% не вариант

Проще говоря, если на строке присутствуют 3 блока, то задав одному блоку float:left и width:100% он займёт всё пространство строки, вытеснив другие 2 блока

Это сообщение отредактировал(а) dma84 - 8.7.2011, 11:42
PM MAIL   Вверх
DeMONiZ
Дата 8.7.2011, 11:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет
Вот это уже болеее походит на истину
PM MAIL WWW   Вверх
dma84
Дата 8.7.2011, 11:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет
Цитата(DeMONiZ @ 8.7.2011,  11:35)
Да и я без проблем уберу из своего когда float

Вот код:
Код


    <a style="float:left;" class="arrow-left" onclick="prev()" href="#"></a>    

    <a style="float:right;" class="arrow-right" onclick="next()" href="#"></a>
    
        <div id="s" style=" border:0px solid silver; margin-right:20px; margin-left:20px; display:block; height:200px; overflow: hidden;">
                <div style="width:<?=konsult('1');?>px;">
                    <?=konsult()?>
                </div>
        </div>


и что этот код даёт?
PM MAIL   Вверх
DeMONiZ
Дата 8.7.2011, 11:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет
Но блока должно влезать всего 3 внезависисмости от того какое разрешение
PM MAIL WWW   Вверх
dma84
Дата 8.7.2011, 11:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет
Цитата(DeMONiZ @ 8.7.2011,  11:38)
Но блока должно влезать всего 3 внезависисмости от того какое разрешение

ваши предложения?
PM MAIL   Вверх
DeMONiZ
Дата 8.7.2011, 11:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет
Все мои предложения и варианты оказались провалом потому я и создал тему, у меня есть одно предложение которым бы не хотелось пользоваться это js
PM MAIL WWW   Вверх
dma84
Дата 8.7.2011, 11:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет
Если блоков должно быть 3 в прокручиваемом блоке, то ставим им ширину 33.3%, как-то так:

Код

<style type="text/css">
  #s{border:1px blue solid}
  #s div{border:1px solid red; display:inline-block;width:33.3%;height:200px;}
  *html #s div{display:inline !important;zoom:1}
  *+html #s div{display:inline !important;zoom:1}
  *html a.left{left:-20px !important}
 </style>
 <div id="main" style="position:relative;white-space:nowrap;border:1px green solid;overflow:hidden;padding:0 20px">
  <a class="left" style="display:inline-block;position:absolute;left:0;top:0;margin-top:100px" onclick="prev()" href="#"><--</a>
                <div id="s" style="width:100%;display:inline-block;overflow-x:auto;overflow-y:hidden;white-space:nowrap;height:200px">
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                </div>
    <a style="display:inline-block;position:absolute;right:0;top:0;margin-top:100px" onclick="next()" href="#">--></a>
 </div>


Это сообщение отредактировал(а) dma84 - 8.7.2011, 11:50
PM MAIL   Вверх
DeMONiZ
Дата 11.7.2011, 05:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет
Вот спасибо, работает спасибо за момощь!

Хотя с текстом блоки ведут себя непонятно....

Код

<style type="text/css">
  #s{border:1px blue solid}
  #s div{border:1px solid red; display:inline-block;width:33.3%;height:200px;}
  *html #s div{display:inline !important;zoom:1}
  *+html #s div{display:inline !important;zoom:1}
  *html a.left{left:-20px !important}
 </style>
 <div id="main" style="position:relative;white-space:nowrap;border:1px green solid;overflow:hidden;padding:0 20px">
  <a class="left" style="display:inline-block;position:absolute;left:0;top:0;margin-top:100px" onclick="prev()" href="#"><--</a>
                <div id="s" style="width:100%;display:inline-block;overflow-x:auto;overflow-y:hidden;white-space:nowrap;height:200px">
                    <div>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст ТекстТекст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                </div>
    <a style="display:inline-block;position:absolute;right:0;top:0;margin-top:100px" onclick="next()" href="#">--></a>
 </div>


Это сообщение отредактировал(а) DeMONiZ - 11.7.2011, 06:01
PM MAIL WWW   Вверх
Страницы: (2) [Все] 1 2 
 Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0903 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.