Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Slider
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Outside
24.09.2013, 11:27:18
Od dwóch dni szukam rozwiązania w internecie, próbuje przerabiać różne skrypty i nic z tego, a mianowicie mam sobie stronkę
http://ezeszyt.ugu.pl/str i jest tam ranking i terminarz, chciałbym aby to było przesuwane, posiada ktoś może gotowy taki slider, ktory będzie po prostu przesuwał tamto po wcisnieciu strzzałek na bokach?
Na googlach dwa dni przeszukane i poznajdywałem tylko gotowe rozwiązania, które obsługują tylko zdjęcia, a jak wrzucam tam tekst to jest pełno problemów ze stroną..
phpion
24.09.2013, 11:31:42
Chociażby to:
http://jquerytools.org/demos/scrollable/index.html
Korzystam, fajny plugin.
Outside
25.09.2013, 17:10:56
Da rady to przerobic aby uzyc wlasne strzalki do przewijania i gdzie wrzucic ten kod javascript? Miedzy znacznikami <script> </script> w <head> tak?

Jest ktoś w stanie mi pomóc?sad.gif
com
25.09.2013, 17:47:13
wystarczy zajrzeć do źródła strony wink.gif http://jquerytools.org/media/css/scrollable-buttons.css odpowiada za ostylowanie strzałek, żeby tego użyć po pierwsze musisz mieć jQuery a
[JAVASCRIPT] pobierz, plaintext 
  1. $(function() {
  2.   // initialize scrollable
  3.   $(".scrollable").scrollable();
  4. });
[JAVASCRIPT] pobierz, plaintext


Miedzy znacznikami <script> </script> tak jak powiedziałeś nie koniecznie w head ale możesz wink.gif

Na marginesie popraw sobie kodowanie na stronie wink.gif a & wstawiaj za pomocą znacznika &amp; wink.gif
Outside
25.09.2013, 18:33:30
Wszystko wstawiłem jak trzeba, kod jest poniżej, a mimo to nie działa.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. 	"http://www.w3.org/TR/html4/DTD/strict.dtd">
  3. <html>
  4. <head>
  5. <title>Polish Summer League</title>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  8.  
  9. <script type="text/javascript">
  10. $(function() {
  11.   // initialize scrollable
  12.   $(".scrollable").scrollable();
  13. });
  14. </script>
  15.  
  16.  
  17.  <style type="text/css">
  18.  /*
  19. root element for the scrollable.  when scrolling occurs this
  20. element stays still.
  21. */
  22. .scrollable {
  23.   /* required settings */
  24.   position:relative;
  25.   overflow:hidden;
  26.   width: 660px;
  27.   height:90px;
  28. }
  29.  
  30. /*
  31. root element for scrollable items. Must be absolutely positioned
  32. and it should have a extremely large width to accommodate scrollable
  33. items.  it's enough that you set width and height for the root element
  34. and not for this element.
  35. */
  36. .scrollable .items {
  37.   /* this cannot be too large */
  38.   width:20000em;
  39.   position:absolute;
  40. }
  41.  
  42. /*
  43. a single item. must be floated in horizontal scrolling.  typically,
  44. this element is the one that *you* will style the most.
  45. */
  46. .items div {
  47.   float:left;
  48. }
  49.  
  50. /* this makes it possible to add next button beside scrollable */
  51. .scrollable {
  52.     float:left;
  53. }
  54.  
  55. /* prev, next, prevPage and nextPage buttons */
  56. a.browse {
  57.     background:url(left-mini.png) no-repeat;
  58.     display:block;
  59.     width:30px;
  60.     height:30px;
  61.     float:left;
  62.     margin:40px 10px;
  63.     cursor:pointer;
  64.     font-size:1px;
  65. }
  66.  
  67. /* right */
  68. a.right {   background-position: 0 -30px; clear:right; margin-right: 0px;}
  69. a.right:hover { background-position:-30px -30px; }
  70. a.right:active { background-position:-60px -30px; }
  71.  
  72. /* left */
  73. a.left { margin-left: 0px; }
  74. a.left:hover  { background-position:-30px 0; }
  75. a.left:active { background-position:-60px 0; }
  76.  
  77. /* up and down */
  78. a.up, a.down  {
  79.     float: none;
  80.     margin: 10px 50px;
  81. }
  82.  
  83. /* up */
  84. a.up:hover { background-position:-30px 0; }
  85. a.up:active { background-position:-60px 0; }
  86.  
  87. /* down */
  88. a.down { background-position: 0 -30px; }
  89. a.down:hover { background-position:-30px -30px; }
  90. a.down:active { background-position:-60px -30px; }
  91.  
  92.  
  93. /* disabled navigational button */
  94. a.disabled {
  95.     visibility:hidden !important;
  96. }
  97. /*
  98.   root element for the scrollable.
  99.   when scrolling occurs this element stays still.
  100.   */
  101. .scrollable {
  102.  
  103.     /* required settings */
  104.     position:relative;
  105.     overflow:hidden;
  106.     width: 550px;
  107.     height:120px;
  108.  
  109.     /* custom decorations */
  110.     border:1px solid #ccc;
  111.     background:url(/media/img/gradient/h300.png) repeat-x;
  112. }
  113.  
  114. /*
  115.    root element for scrollable items. Must be absolutely positioned
  116.    and it should have a extremely large width to accomodate scrollable
  117.    items.  it's enough that you set the width and height for the root
  118.    element and not for this element.
  119. */
  120. .scrollable .items {
  121.     /* this cannot be too large */
  122.     width:20000em;
  123.     position:absolute;
  124.     clear:both;
  125. }
  126.  
  127. .items div {
  128.     float:left;
  129.     width:680px;
  130. }
  131.  
  132. /* single scrollable item */
  133. .scrollable img {
  134.     float:left;
  135.     margin:20px 5px 20px 21px;
  136.     background-color:#fff;
  137.     padding:2px;
  138.     border:1px solid #ccc;
  139.     width:100px;
  140.     height:75px;
  141.  
  142.     -moz-border-radius:4px;
  143.     -webkit-border-radius:4px;
  144. }
  145.  
  146. /* active item */
  147. .scrollable .active {
  148.     border:2px solid #000;
  149.     position:relative;
  150.     cursor:default;
  151. }
  152.  
  153. </style>
  154. </head>
  155. <body>
  156.  
  157. <div style="margin:0 auto; width: 634px; height:120px;">
  158. <!-- "previous page" action -->
  159. <a class="prev browse left"></a>
  160.  
  161. <!-- root element for scrollable -->
  162. <div class="scrollable" id="scrollable">
  163.  
  164.   <!-- root element for the items -->
  165.   <div class="items">
  166.  
  167.     <!-- 1-5 -->
  168.     <div>
  169.       <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
  170.       <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
  171.       <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
  172.       <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
  173.     </div>
  174.  
  175.     <!-- 5-10 -->
  176.     <div>
  177.       <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
  178.       <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
  179.       <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
  180.       <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
  181.     </div>
  182.  
  183.     <!-- 10-15 -->
  184.     <div>
  185.       <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
  186.       <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
  187.       <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
  188.       <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
  189.     </div>
  190.  
  191.   </div>
  192.  
  193. </div>
  194.  
  195. <!-- "next page" action -->
  196. <a class="next browse right"></a>
  197. </div>
  198.  
  199.  
  200.  
  201.  
  202. </body>
  203. </html>
[HTML] pobierz, plaintext
com
25.09.2013, 18:41:35
daj tam zamiast 
[HTML] pobierz, plaintext 
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
[HTML] pobierz, plaintext

to
[HTML] pobierz, plaintext 
  1. <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
[HTML] pobierz, plaintext



a
Kod
<script type="text/javascript">
$(function() {
// initialize scrollable
$(".scrollable").scrollable();
});
</script>

najlepiej po 
[HTML] pobierz, plaintext 
  1. <!-- "next page" action -->
  2. <a class="next browse right"></a>
  3. </div>
[HTML] pobierz, plaintext


btw priv nie służy do rozwiązywania problemów wink.gif
Outside
25.09.2013, 18:49:18
Jest jescze jeden problem, pomimo tego, że dobrze znam css to nie mam bladego pojęcia jak to rozwiązać.
Strzałki są tam zrobione takim zdjęciem

W jaki sposób mogę umieścić tam swoje strzałki na lewo i prawo?
com
25.09.2013, 18:55:12
poczytaj na temat sprite css to rozwiąże twój problem wink.gif nie żebym się prosił ale mogę liczyć na pomógł? tongue.gif dlatego właśnie nie rozwiązuje się problemów na priv, ale to na przyszłość wink.gif
Outside
25.09.2013, 18:59:28
Oczywiscie, ze tak. juz dane smile.gif
O sprite css nie wiedzialem, ale sie wlasnie dowiedzialem i wielkie dzieki za to, pozniej stestuje to wszystko jeszcze raz, dziekuje bardzo za pomoc smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.