почему не работает scrollable() ??
<!DOCTYPE HTML>
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scrollable.js"></script> <script type="text/javascript" src="mousewheel.js"></script> <style> .scrollable { position:relative; overflow:hidden; width: 660px; height:90px; } .scrollable .items { width:20000em; position:absolute; } .items div { float:left; } </style> </head> <body> <div style="margin:0 auto; width: 634px; height:120px;"> <!-- "previous page" action --> <a class="prev browse left"></a> <!-- root element for scrollable --> <div class="scrollable" id="scrollable"> <!-- root element for the items --> <div class="items"> <!-- 1-5 --> <div> <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /> <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /> <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /> </div> <!-- 5-10 --> <div> <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" /> <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" /> <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" /> <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" /> </div> <!-- 10-15 --> <div> <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" /> <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" /> <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" /> <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" /> </div> </div> </div> <!-- "next page" action --> <a class="next browse right"></a> </div> <script type="text/javascript"> $(function() { $("#scrollable").scrollable({horizontal:true}); }); </script> </body> </html> |
gpg10,
сделайте пример с рабочими ссылками на скрипты и Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
<style> .scrollable { position:relative; overflow:hidden; width: 660px; height:90px; } .scrollable .items { width:20000em; position:absolute; } .items div { float:left; } </style> <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scrollable.js"></script> <script type="text/javascript" src="mousewheel.js"></script> </head> <body> <div style="margin:0 auto; width: 634px; height:120px;"> <!-- "previous page" action --> <a class="prev browse left"></a> <!-- root element for scrollable --> <div class="scrollable" id="scrollable"> <!-- root element for the items --> <div class="items"> <!-- 1-5 --> <div> <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /> <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /> <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /> </div> <!-- 5-10 --> <div> <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" /> <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" /> <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" /> <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" /> </div> <!-- 10-15 --> <div> <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" /> <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" /> <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" /> <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" /> </div> </div> </div> <!-- "next page" action --> <a class="next browse right"></a> </div> </body> </html> <script type="text/javascript"> $(function() { $("#scrollable").scrollable({horizontal:true}); }); </script> |
gpg10,
ок уже лучше, но можно было прежнее сообщение отредактировать ... но хотелось бы так как ниже с полными путями ... в jquery тут особой необходимости нет ... всё работает, кроме скролинга колёсиком мышки в ие ... но это вопрос к создателям плагина <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="http://jquerytools.org/media/css/scrollable-horizontal.css" /> <link rel="stylesheet" type="text/css" href="http://jquerytools.org/media/css/scrollable-buttons.css" /> <style type="text/css"> /* стиль для видимой части скроллера */ .scrollable { position: relative; overflow: hidden; width: 416px; height: 120px; } /* стиль враппера со всеми элементами */ .scrollable .items { width: 20000em; position: absolute; } </style> <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://brandonaaron.github.io/jquery-mousewheel/jquery.mousewheel.js"></script> --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> <script> $(function() { // initialize scrollable $(".scrollable").scrollable({circular: true,mousewheel: true}); }); </script> </head> <body> <div style="margin:0 auto; width: 500px; height:122px; background-color: #F4A460"> <!-- "previous page" action --> <a class="prev browse left"></a> <!-- root element for scrollable --> <div class="scrollable" id="scrollable"> <!-- root element for the items --> <div class="items"> <!-- 1-5 --> <div> <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /> <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /> <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /> </div> <!-- 5-10 --> <div> <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" /> <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" /> <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" /> <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" /> </div> <!-- 10-15 --> <div> <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" /> <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" /> <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" /> <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" /> </div> </div> </div> <!-- "next page" action --> <a class="next browse right"></a> </div> </body> </html> |
тоесть ошибка была в том, что я не указал параметры в scrollable({circular: true,mousewheel: true});
? |
gpg10,
я незнаю про вашу ошибку ничего -- нет кода того, что вы использовали -- могу только предполагать что у вас старая версия scrollable для которой нужно старое jquery - сейчас этот плагин входит в состав библиотеки jquery.tools и работет даже без jquery -- подробнее тут http://jquerytools.org/ |
Спасибо )
|
Часовой пояс GMT +3, время: 15:01. |