Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z fx.scroll
Forum PHP.pl > Forum > Po stronie przeglądarki
szlipek
Witam mam taki problem!
chcę zrobić coś takiego jak na stronie firefoxa z pluginami że klikająć na daną zakładkę przesunie nam się obiekt i niby mam coś podobnego zrobione ale nie do końca. Mianowicie mam u góry linki do każdej zakładki  i na dole (pod polem gdzie te zakladki się wczytują ) mam 2 przyciski "do przodu" i "do tyłu"  i te 2 przyciski działają (wszystko ładnie płynnie się przesuwa)  a te zakładki co mam u góry nie działają, niby wczytują daną zakładkę ale poprostu podmieniają tekst a nie płynnie przechodzą tak jak to jest na stronie firefoxa 
Oto kod:


HTML:
  1. <div id="demo-bar">
  2. <a href="#news1">Pierwszy news</a> |
  3. <a href="#news2">Drugi news</a> |
  4. <a href="#news3">Trzeci news</a> |
  5. <a href="#news4">Czwarty news</a> |
  6. <a href="#news5">Piaty news</a>
  7. </div>
  8. <div id="scrollinfo">
  9. <div id="flex">
  10. <div class="news"><div id="news1">
  11. <h2>Pierwszy news</h2>
  12. <p>Lorem ipsum dolor sit amet pede. Etiam mollis non, tempor vel, vehicula sit amet eleifend pede dictum wisi semper auctor. Aenean scelerisque, wisi accumsan congue. Donec nonummy sagittis. Nulla eu mi quam, lobortis convallis, dui eu wisi. Sed ornare, erat volutpat.</p>
  13. <a href="http://www.svp.pl" target=_blank>
  14. <img src="svp-logo.jpg" width="151" height="109" border="0"></a>
  15. </div></div>
  16. <div class="news"><div id="news2">
  17. <h2>Drugi news</h2>
  18. <p>Nulla eu mi quam, lobortis convallis, dui eu wisi. Sed ornare, erat volutpat.orci. Sed euismod mi. Aliquam erat eget elit purus, dictum est, viverra elit at arcu. Suspendisse at porta turpis sed eros orci convallis auctor. Aenean vulputate lectus. Phasellus dapibus non, dolor. Aliquam faucibus volutpat, libero wisi, mollis nunc neque, malesuada tristique id, vulputate quam. Maecenas nec cursus eu, purus.</p>
  19. </div></div>
  20. <div class="news"><div id="news3">
  21. <h2>Trzeci news</h2>
  22. <p>Aliquam dolor a auctor non, tristique senectus et accumsan dictum, laoreet feugiat. Cum sociis natoque penatibus et nisl. Morbi id lacus tellus non nibh orci sit amet libero wisi, ullamcorper risus.</p>
  23. </div></div>
  24. <div class="news"><div id="news4">
  25. <h2>Czwarty news</h2>
  26. <p>Vestibulum ante ipsum dolor sit amet, tellus. In nunc fringilla sed, posuere cubilia Curae, Mauris vehicula libero lacinia neque. Maecenas ac enim quis neque nibh porta scelerisque, quam nibh nulla nisl at sapien. In hac habitasse platea dictumst.</p>
  27. </div></div>
  28. <div class="news"><div id="news5">
  29. <h2>Piaty news</h2>
  30. <p>Vestibulum ante ipsum dolor sit amet, tellus. In nunc fringilla sed, posuere cubilia Curae, Mauris vehicula libero lacinia neque. Maecenas ac enim quis neque nibh porta scelerisque, quam nibh nulla nisl at sapien. In hac habitasse platea dictumst</p>
  31. </div></div>
  32. </div>
  33. </div>
  34. <button id="wLewo">&lt;</button>
  35. <button id="wPrawo">&gt;</button>
  36.  
  37.  





a tu JS 

  1.  
  2. window.addEvent("load",function(){
  3. var przewijanie = new Fx.Scroll("scrollinfo");
  4. var el_tab = [];
  5. var aktualny_div = 0;
  6.  
  7. $$("#scrollinfo div.news").each(function(element,index){
  8. el_tab[index] = element;
  9. });
  10.  
  11. $("wLewo").addEvent("click",function(){
  12. if(aktualny_div == 0){
  13. aktualny_div = 4;
  14. przewijanie.toRight();
  15. }
  16. else{
  17. aktualny_div--;
  18. przewijanie.toElement(el_tab[aktualny_div]);
  19. }
  20. });
  21.  
  22. $("wPrawo").addEvent("click",function(){
  23. if(aktualny_div == 4){
  24. aktualny_div = 0;
  25. przewijanie.toLeft();
  26. }
  27. else{
  28. aktualny_div++;
  29. przewijanie.toElement(el_tab[aktualny_div]);
  30. }
  31. });
  32. });
  33.  
  34.  


Bardzo prosze o pomoc jak to zrobić

skowron-line
Napewno to cały kod questionmark.gif Bo mi nie działa.
Pokaż stronę ff żeby było wiadomo o co chodzi dokładnie.
I strzelam odpowiedz Fx.Accordion.
szlipek
no jeszcze jest biblioteka mootools oto link

Kod
http://dziudek.ovh.org/mootools/fx_scroll_js/mootools.js


no i plik ze stylami

  1.  
  2. #scrollinfo{
  3. width: 600px;
  4. height: 350px;
  5. border: 2px solid #CCC;
  6. overflow: hidden;
  7. }
  8.  
  9. #flex{
  10. width: 3000px;
  11. }
  12.  
  13. div.news{
  14. width: 530px;
  15. height: 240px;
  16. float: left;
  17. padding: 30px;
  18.  
  19. }
  20.  
  21. div.news h2{
  22. font-family: "Trebuchet MS";
  23. font-size: 24px;
  24. color: #666;
  25. }
  26.  
  27. div.news p{
  28. font-family: "Trebuchet MS";
  29. font-size: 16px;
  30. color: #333;
  31. }
  32.  
  33.  





i nie mam tego nigdzie na serwerze żeby to zaprezentować

skowron-line
Mootools to wiedziałem.
Ja osobiście zrobiłbym jedna funkcję do której bym przekazywał 2 parametry.
1 - + / - w zaleznosci od tego czy w lewo czy w prawo
2 - liczba którą będziesz przekazywać z linków nad na podstawie tych liczb bym określał ( porównując z bieżącą zakładką ) 1 parametr czy dodać czy odjąć i o ile odjąć i o ile dodać.
szlipek
Niby fajnie ale jak ja mam tego dokonać bo nie za bardzo wiem jak masz może gdzies jakiś przykład albo chociaż nazwę funkcji jaką mam użyć
skowron-line
Cytat(szlipek @ 19.01.2010, 14:21:17 ) *
albo chociaż nazwę funkcji jaką mam użyć

Tą funkcję sam musisz napisać.
Damonsson
a " qscroller "?


http://www.latenight-coding.com/mootools/c.../qscroller.html

szczególnie looknij to przesuwanie telefonów...troche przeróbki i chyba ogarnie Twoje zadanie.

w JS, jestem typowym Script kiddies...ale się uczę ;D
skowron-line
Cytat(Damonsson @ 19.01.2010, 17:39:32 ) *
w JS, jestem typowym Script kiddies...ale się uczę ;D

Ja już jestem starszy pan więc możesz mi wytłumaczyć co oznacza
"Script kiddies" questionmark.gif
Damonsson
Script kiddie (ang. skryptowy dzieciak), skrypciarze - w żargonie komputerowym pejoratywne określenie niedoświadczonych crackerów, którzy używają programów i skryptów napisanych przez innych bez znajomości zasad ich działania.
za wikipedia.pl

"crackerów" zamień na "osób", skreśl "PROGRAMÓW I".

I wyjdzie idealna definicja.


Po za tym co to ma do tematu?
skowron-line
Cytat(Damonsson @ 20.01.2010, 14:54:44 ) *
Po za tym co to ma do tematu?

Nijak. Byłem ciekawy co to znaczy.
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.