Scroller na JS - Wersja do druku

Scroller na JS - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Scroller na JS (/thread-scroller-na-js)

Scroller na JS - Dombas - 14-07-2009

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

RE: Scroller na JS - Sajam - 14-07-2009

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

RE: Scroller na JS - Dombas - 14-07-2009

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