Перейти к публикации

Горизонтальный Scroll bar новостей, видел ли кто?


Рекомендованные сообщения

Понравилась горизонтальная прокрутка реализованная тут http://ocs.ru/ (в верхней части идет прокрутка производителей, сразу под верхним большим баннером)

Погуглил, но ничего путного не нашел :(

Ссылка на сообщение
Поделиться на других сайтах

не там ищете. http://valums.com/scroll-menu-jquery/ вот неплохой вариант, даже лучше вашего примера, просто наберите в яндухе "скрол jQuery" вариантов масса

Ссылка на сообщение
Поделиться на других сайтах

Вот еще интересное решение. Собственно о нем получается я изначально спрашивал ;)

http://jscrollpane.kelvinluck.com/

Немного пришлось повозиться для кроссбраузного решения при резиновой верстке и неопределенной ширине контента (т.к. идет выборка из новостей)

Сам шаблон:

<div class="wrapper_clb">

    <div id="clients_bar">

	    <div class="scroll-pane horizontal-only ">

		    <ul>    

			    <table border="0" cellspacing="0" cellpadding="0"><tr>

				    {custom category="22,1,2,3,4,5,6,7,8,9" template="slaider" aviable="global" from="0" limit="100" cache="no"}

			    </tr></table>

		   </ul>

	    </div>	    

    </div>  

</div>
Файл стилей:

.wrapper_clb {

max-width: 1500px;

text-align: center;

width:  98%; /* НЕ ТРОГАТЬ ЗНАЧЕНИЕ!!!*/

margin: 0 auto;

}

.scroll-pane

{

width: 100%;

height: 200px;

overflow: auto;

}

.horizontal-only

{

height: auto;

max-height: 150px;

}

#clients_bar  {

position:relative;

margin: 15px auto;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}

#clients_bar .left_part {

    height: 50px;

    left: 0;

    position: absolute;

    top: 0;

    width: 30px;

    z-index: 10;

}

#clients_bar .right_part {

    height: 50px;

    position: absolute;

    right: 0;

    top: 0;

    width: 30px;

    z-index: 10;

}

#clients_bar ul {

    list-style: none outside none;

    margin: 0;

    padding: 0;

    white-space: nowrap;

width:100%;

}

#clients_bar table {

    list-style: none outside none;

    margin: 0;

    padding: 0;

    white-space: nowrap;

position:absolute;

}

#clients_bar li {

    background: none repeat scroll 0 0 transparent;

    display: inline;

    float: left;

    margin: 0 10px 0 10px;

    overflow: hidden;

    padding: 0;

    position: relative;

    text-align: center;

}

#clients_bar li img {

    left: 0;

max-height: 25px;

    top: 0;

}

Скрипт JS

  <script type="text/javascript" id="sourcecode">

   $(function()

   {

    $('.scroll-pane').each(

	 function()

	 {

	  $(this).jScrollPane(

	   {

	    maintainPosition: true, horizontalDragMinWidth: 210, horizontalDragMaxWidth: 210, autoReinitialise: true, autoReinitialiseDelay: 0

	   }

	  );

	 }

    )

   });

  </script>

Возможно кому-то пригодится. Долго пришлось возиться самому....

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...