Toon posts:

[JS] Verticaal scrollen layer (nee geen scrollbar :)

Pagina: 1
Acties:

vrijdag 27 augustus 2004 18:51

Acties:
  • [FrEEzEr]
  • Registratie: April 2000
  • Laatst online: 29-10-2025

[FrEEzEr]

Topicstarter
Ben een beetje bezig met javascript en nu wil ik het volgende maken:

Een layer die doormiddel van linkjes verticaal naar beneden en naar boven scrollt.
Dit doet hij van snel naar langzaam totdat hij op het goede kopje komt.


Nu is me dit gelukt voor het naar beneden scrollen, maar naar boven lukt het me niet :(

Met de search kan ik niks vinden en ook op op google kan ik niks vinden. Dus nu hoop ik dat jullie me verder kunnen helpen :)

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--

function mover(targetY) {

    var currentY = document.getElementById('Layer2').style.top.split("px");
    
    if( currentY[0] != targetY ){
        var y = targetY-currentY[0];
        var newY = eval(currentY[0]+(y/10));
        document.getElementById('Layer2').style.top = newY+'px';

        if( (currentY[0]-targetY) > 10 ){
            setTimeout('mover('+targetY+')',20);
        }
        if( (currentY[0]-targetY) < 10 ){
            document.getElementById('Layer2').style.top = targetY+'px';
        }

    }
    
}

//-->
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; left:349px; top:81px; width:436px; height:200px; z-index:1; overflow: hidden; background-color: #FF00FF; layer-background-color: #FF00FF; border: 1px none #000000;">
<div id="Layer2" style="position:relative; left:25px; top:5px; width:391px; height:282px; z-index:2; border: 1px none #000000;">
  <p>Tekst 1</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>&nbsp;</p>
  <p>Tekst 2</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>&nbsp;</p>
  <p>Tekst 3</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>&nbsp;</p>
  <p>Tekst 4</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
</div></div>
<div id="Layer3" style="position:absolute; left:25px; top:17px; width:187px; height:177px; z-index:2">
<a href="javascript:mover('1');">Tekst 1</a><br />
<a href="javascript:mover('-190');">Tekst 2</a><br />
<a href="javascript:mover('-380');">Tekst 3</a><br />
<a href="javascript:mover('-560');">Tekst 4</a><br />
</div>
</body>
</html>

iMac i7, 8GB | MacMini (2,0-GHz/4GB) | Playstation3 | Wii | Panasonic 42pz85

vrijdag 27 augustus 2004 19:44

Acties:
  • REDFISH
  • Registratie: Augustus 2001
  • Laatst online: 22-05 15:27

REDFISH

beetje vreemd en niet lekker

kijk es op www.projectseven.com die hebben een hele zooi aan extensions voor dreamweaver voor het moven van layers.

Ik hoop dat ik begrijp wat je bedoelt dat je als de muis over de ene link gaat layer 1 omlaag beweegt gaat d emuis over de andere link dan gaat d elayer omhoog? Moet toch niet zo moeilijk te doen zijn.

vrijdag 27 augustus 2004 19:50

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 01:12

crisp

Devver

Pixelated

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function mover(targetY) {

    var layer = document.getElementById('Layer2');
    var currentY = parseInt(layer.style.top, 10);
    
    var y = targetY - currentY;
    var newY = Math.floor(currentY+(y/10));

    if (Math.abs(y) > 10) {

        layer.style.top = newY + 'px';
        setTimeout('mover(' + targetY + ')', 20);

    } else {

        layer.style.top = targetY + 'px';

    }

}

Intentionally left blank

vrijdag 27 augustus 2004 21:47

Acties:
  • [FrEEzEr]
  • Registratie: April 2000
  • Laatst online: 29-10-2025

[FrEEzEr]

Topicstarter
Geweldig het werkt!

Bedankt voor de reacties en nu ga ik ff de javascript handleiding erop naslaan waarom jouw script werkt :)

iMac i7, 8GB | MacMini (2,0-GHz/4GB) | Playstation3 | Wii | Panasonic 42pz85

vrijdag 27 augustus 2004 22:06

Acties:
  • nuclear waste
  • Registratie: December 2003
  • Laatst online: 14-06-2023

nuclear waste

<onzin>

Kan je dit script op een of andere manier aanpassen dat het zelf de currentY en de targetY uitzoekt zodat je geen y waardes moet aangeven bij de links?

</onzin>

vrijdag 27 augustus 2004 22:13

Acties:

Verwijderd

nuclear waste schreef op 27 augustus 2004 @ 22:06:
Kan je dit script op een of andere manier aanpassen dat het zelf de currentY en de targetY uitzoekt zodat je geen y waardes moet aangeven bij de links?
Heb je enig idee wat een variabele is?

vrijdag 27 augustus 2004 22:48

Acties:
  • [FrEEzEr]
  • Registratie: April 2000
  • Laatst online: 29-10-2025

[FrEEzEr]

Topicstarter
Heb het script iets aangepast zodat de targetY nu bepaald wordt door een transparantepixel (dus hoef je geen y coordinaat in te vullen).

Het zal vast wel korter/makkelijker kunnen, maar goed het werkt :)

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<script language="JavaScript" type="text/JavaScript">
<!--

function mover(targetNumber, targetY) {

    var targetY = -(eval('tekst'+targetNumber).offsetTop);
    var layer = document.getElementById('Layer2');
    var currentY = parseInt(layer.style.top, 10);
    
    var y = targetY - currentY;
    var newY = Math.floor(currentY+(y/10));

    if (Math.abs(y) > 10) {

        layer.style.top = newY + 'px';
        setTimeout('mover(' + targetNumber + ', ' + targetY + ')', 20);

    } else {

        layer.style.top = targetY + 'px';

    }

}

//-->
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; left:349px; top:81px; width:436px; height:200px; z-index:1; overflow: hidden; background-color: #FF00FF; layer-background-color: #FF00FF; border: 1px none #000000;">
<div id="Layer2" style="position:relative; left:25px; top:5px; width:391px; height:282px; z-index:2; border: 1px none #000000;">
  <p>[img]"pixel.gif"[/img]Tekst 1</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>&nbsp;</p>
  <p>[img]"pixel.gif"[/img]Tekst 2</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>&nbsp;</p>
  <p>[img]"pixel.gif"[/img]Tekst 3</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>&nbsp;</p>
  <p>[img]"pixel.gif"[/img]Tekst 4</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
</div></div>
<div id="Layer3" style="position:absolute; left:25px; top:17px; width:187px; height:177px; z-index:2">
<a href="javascript:mover('1','0');">Tekst 1</a><br />
<a href="javascript:mover('2','0');">Tekst 2</a><br />
<a href="javascript:mover('3','0');">Tekst 3</a><br />
<a href="javascript:mover('4','0');">Tekst 4</a><br />
</div>
</body>
</html>


Edit:

Script werkt nu niet meer in firefox :'(

[ Voor 27% gewijzigd door [FrEEzEr] op 27-08-2004 22:51 ]

iMac i7, 8GB | MacMini (2,0-GHz/4GB) | Playstation3 | Wii | Panasonic 42pz85

vrijdag 27 augustus 2004 23:07

Acties:
  • nuclear waste
  • Registratie: December 2003
  • Laatst online: 14-06-2023

nuclear waste

<onzin>

Verwijderd schreef op 27 augustus 2004 @ 22:13:
[...]


Heb je enig idee wat een variabele is?
sry maar ik ben echt niet goed in scripts, als ik ze zie begrijp ik ze maar zelf een samensteken kan ik nog niet. Ik weet dat scriptrequests hier niet welkom zijn maar ik dacht dat dit wel handig zou zijn voor de TS en andere users.

</onzin>

vrijdag 27 augustus 2004 23:48

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 01:12

crisp

Devver

Pixelated

eval :r en ja, alleen IE stopt elementen met een ID in de global namespace :r
zal wel te maken hebben met backwardscompatibility voor het document.all model...

JavaScript:
1

var targetY = -document.getElementById('tekst'+targetNumber).offsetTop;


en waarom een transparante pixel gebruiken? zet die id gewoon op je paragraph...

en als je toch bezig bent:
- die <!-- --> dingen kan je weglaten; niemand gebruikt meer een browser die struikelt over een stukje script
- het language-attribuut in de script-tag is deprecated; ook weglaten dus
- zet javascript functiecalls liever in een eventhandler ipv in een href

[ Voor 62% gewijzigd door crisp op 27-08-2004 23:57 ]

Intentionally left blank

vrijdag 27 augustus 2004 23:59

Acties:
  • [FrEEzEr]
  • Registratie: April 2000
  • Laatst online: 29-10-2025

[FrEEzEr]

Topicstarter
En weer bedankt :)

Tsja ben net pas begonnen met js dus moet het nog ff door krijgen :D

iMac i7, 8GB | MacMini (2,0-GHz/4GB) | Playstation3 | Wii | Panasonic 42pz85

zaterdag 28 augustus 2004 00:19

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 01:12

crisp

Devver

Pixelated

[FrEEzEr] schreef op 27 augustus 2004 @ 23:59:
En weer bedankt :)

Tsja ben net pas begonnen met js dus moet het nog ff door krijgen :D
NP; doet me denken aan hoe ik begon zo'n 2-3 jaar geleden - mijn oude scripts puilden ook uit van de eval's :o

Intentionally left blank

Pagina: 1
Reageer