Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Scroller na JS
#1
Witam,
Znalazłem ostatnio ciekawy skrypt:
http://www.twinhelix.com/dhtml/hvscroll/
Wszystko byłoby piękne, gdyby nie fakt że muszę go użyć w kilku miejscach na raz na jednej stronie. W prawdzie autor skryptu pisze: "Object-orientated script means several scrollers can run on one page" ale nie wiem, czy nie chodzi tutaj o odpalanie w tym samym miejscu kilku różnych "scrollerów"...
Jeśli ktoś zna lepiej JS bardzo proszę o pomoc jak umieścić kilka działających niezależnie pól przewijania na jednej stronie. Dodam, że nadawałem unikalne nazwy każdemu z kolejnych "scrollerów" i niestety nic Sad
--
Pozdrawiam
Łukasz
#2
Chodzi o to, że skrypt jest zorientowany obiektowo i może być użytych wiele instancji na jednej stronie. Czyli dla Ciebie pasuje idealnie.

1. Po pierwsze załączasz skrypt:
Kod:
<script type="text/javascript" language="JavaScript1.2" src="hvscroll.js"></script>

2. Każdy scroller definiujesz w JS w taki sposób:
Kod:
<script type="text/javascript">
var scrollerName = new InlineScrollbox('scrollerName', 'Page1');
</script>
stąd winika, że scrollerName musi być inne dla każdego scrollera (var scrollerName i 'scrollerName').

3. Później tworzysz pojemniki na treść (zwróć uwagę na atrybut "name"), gdzie ustalasz szerokość/wysokość (0, 0, 300, 200):
Kod:
<ilayer name="scrollerName-Container" clip="0, 0, 300, 200">
<script type="text/javascript" language="JavaScript1.2"><!--
if (!isNS4) scr.startArea(300, 200);
//--></script>

<script type="text/javascript" language="JavaScript1.2"><!--
if (!isNS4) scr.endArea();
//--></script>

</ilayer>

4. Teraz do pojemnika dodajesz strony. Każda kolejna ma mieć ustawiony atrybut visibility na hidden, oprócz pierwszej.
Kod:
<ilayer name="scrollerName-Container" clip="0, 0, 300, 200">
<script type="text/javascript" language="JavaScript1.2"><!--
if (!isNS4) scr.startArea(300, 200);
//--></script>

    <layer name="scrollerName-Page1" visibility="visible">

       <script type="text/javascript" language="JavaScript1.2"><!--
       if (!isNS4) scr.startPage('Page1');
       //--></script>
      
       treść...

       <script type="text/javascript" language="JavaScript1.2"><!--
       if (!isNS4) scr.endPage();
       //--></script>

    </layer>

    <layer name="scrollerName-Page2" visibility="hidden">

       <script type="text/javascript" language="JavaScript1.2"><!--
       if (!isNS4) scr.startPage('Page2');
       //--></script>
      
      treść...

       <script type="text/javascript" language="JavaScript1.2"><!--
       if (!isNS4) scr.endPage();
       //--></script>

    </layer>

<script type="text/javascript" language="JavaScript1.2"><!--
if (!isNS4) scr.endArea();
//--></script>

</ilayer>

5. Dodajesz sterowanie:
Kod:
<a href="javascript:void(0)"
onmouseover="scrollerName.setScroll(0, -4, 4)"
onmousedown="scrollerName.setScroll(0, -10, 8); return false"
onmouseup="scrollerName.setScroll(0, -4, 3); return false"
onmouseout="scrollerName.setScroll(0, 0, 2)">Up</a>

<a href="javascript:void(0)"
onmouseover="scrollerName.setScroll(0, 4, 4)"
onmousedown="scrollerName.setScroll(0, 10, 8); return false"
onmouseup="scrollerName.setScroll(0, 4, 3); return false"
onmouseout="scrollerName.setScroll(0, 0, 2)">Down</a>
(dodałem tylko sterowanie up/down).

Powinno działać, powodzenia Tongue
#3
Ok. Wszystko gra Smile
Początkowo pozmieniałem nazwy dla konkretnych pól do przewijania, ale zapomniałem o zmianie nazwy przy linkach strzałek Tongue


Skocz do:


Użytkownicy przeglądający ten wątek:
Sponsorzy i przyjaciele
SeoHost.pl