Toon posts:

[dhtm/js] scrollen van een div

Pagina: 1
Acties:

maandag 17 november 2003 20:19

Acties:
  • bakakaizoku
  • Registratie: Januari 2002
  • Laatst online: 14:43

bakakaizoku

ja

Topicstarter
Als ik een iframe wil scrollen dmv. een "eigen scrollfunctie" (dus bv. tekst "beneden" en "boven" ipv de scrollbars) dan kan ik dat simpel doen dmv. scrollBy(0,xx);

Maar met een DIV lukt mij dit niet. Het enige wat tot nu toe werkte was scrollTop=xx; maar dat werkte alleen met IE en niet met FB/Opera..

Hoe doe ik het wel crossbrowser compatible?:\

rm -rf ~/.signature

maandag 17 november 2003 20:46

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 15:32

crisp

Devver

Pixelated

Dit werkt bij mij prima in Mozilla 1.5, Firebird 0.7 en Opera 7.21:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>scrollable div</title>
<script type="text/javascript">

function test() {

  var d = document.getElementById('divje');
  d.scrollTop = 100;

}

</script>
</head>
<body onload="test()">
<div id="divje" style="width:100px;height:100px;overflow:auto;border:1px solid red">
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
</div>
</body>
</html>

Intentionally left blank

maandag 17 november 2003 22:56

Acties:
  • bakakaizoku
  • Registratie: Januari 2002
  • Laatst online: 14:43

bakakaizoku

ja

Topicstarter
Hmm... Met overflow: auto; doet hij het inderdaad, maar dan krijg ik wel de scrollbalken te zien, en dat wou ik dus net voorkomen..

Oplossing?

rm -rf ~/.signature

maandag 17 november 2003 22:59

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 15:32

crisp

Devver

Pixelated

mattttt schreef op 17 november 2003 @ 22:56:
Hmm... Met overflow: auto; doet hij het inderdaad, maar dan krijg ik wel de scrollbalken te zien, en dat wou ik dus net voorkomen..

Oplossing?
Een div in een div:

HTML:
1
2
3
4
5
6
7
8
9
10

<div id="container" style="position:relative;width:100px;height:100px;overflow:hidden;border:1px solid red">
<div id="divje" style="position:absolute;top:0px;left:0px">
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
</div>
</div>


nu kan je de binnenste div 'scrollen' in de buitenste div door de style.top waarde aan te passen :)

Intentionally left blank

maandag 17 november 2003 23:38

Acties:
  • bakakaizoku
  • Registratie: Januari 2002
  • Laatst online: 14:43

bakakaizoku

ja

Topicstarter
Bah ik zuig met JS, ik krijg het steeds voor elkaar om hem 1 keer te laten scrollen, en daarna vertikt hij het gewoon!

De code

Java:
1
2
3
4
5

 
 function scroll(hoeveel) {
  var bla = document.getElementById('tekst').style.top=hoeveel+'px';
  scrolling = setInterval(bla,50);
 }


Wordt aangeroepen met

onClick="scroll(-10);"

Geeft als melding:

Error: missing ; before statement
Source File: js.js
Line: 17, Column: 3
Source Code:
-10px

Word er moedeloos van :'(

rm -rf ~/.signature

maandag 17 november 2003 23:44

Acties:
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Misschien wel spam, maar zeker het vermelden waard. Toen ik bij mijn vorige werkgever zat heb ik aan de site voor DAF gewerkt. Een <geniale ;) > collega van me heeft toen voor het grootste gedeelte de DIV-scroller geschreven en op zijn geweten. Ik heb her en der wat aanpassingen gemaakt en het uiteindelijke resultaat mag er zijn denk ik...

Ga naar DAF.nl, klik daar in het menu op (bijvoorbeeld) "Onderdelen en accessoires" en dan op "TRP". Ik weet overigens niet hoe cross-browser compatible dat ding is. We hebben het toendertijd op IE geschreven en weet echt niet meer op welke browsers dat ding getest is.

Ik weet wel dat we toendertijd het scrollwieltje aan de praat hebben gekregen, maar nu (momenteel?) doet 't niks :?

De scrollbalk resized ook netjes enzo en was geloof ik functioneel hetzelfde als een "normale" scrollbar.

Het javascriptje erachter heb je zo te pakken...Ter uwer lering en vermaek uiteraard :Y)

[ Voor 31% gewijzigd door RobIII op 17-11-2003 23:46 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

maandag 17 november 2003 23:47

Acties:
  • bakakaizoku
  • Registratie: Januari 2002
  • Laatst online: 14:43

bakakaizoku

ja

Topicstarter
RobIII schreef op 17 november 2003 @ 23:44:
Misschien wel spam, maar zeker het vermelden waard. Toen ik bij mijn vorige werkgever zat heb ik aan de site voor DAF gewerkt. Een <geniale ;) > collega van me heeft toen voor het grootste gedeelte de DIV-scroller geschreven en op zijn geweten. Ik heb her en der wat aanpassingen gemaakt en het uiteindelijke resultaat mag er zijn denk ik...

Ga naar DAF.nl, klik daar in het menu op (bijvoorbeeld) "Onderdelen en accessoires" en dan op "TRP". Ik weet overigens niet hoe cross-browser compatible dat ding is. We hebben het toendertijd op IE geschreven en weet echt niet meer op welke browsers dat ding getest is.

Ik weet wel dat we toendertijd het scrollwieltje aan de praat hebben gekregen, maar nu (momenteel?) doet 't niks :?

De scrollbalk resized ook netjes enzo en was geloof ik functioneel hetzelfde als een "normale" scrollbar.

Het javascriptje erachter heb je zo te pakken...Ter uwer lering en vermaek uiteraard :Y)
Werkt helaas niet in mozilla :)
En daar gaat het mij om, in IE only had ik hem ook wel allang aan de praat gekregen :\

rm -rf ~/.signature

dinsdag 18 november 2003 00:00

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 15:32

crisp

Devver

Pixelated

ok, klein voorbeeldje - details mag je zelf verzinnen:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>scrollable div</title>
<script type="text/javascript">

var scrolling = false;

function scroll(by) {

  if (scrolling) stopscroll();
  scrolling = setInterval('doscroll('+by+')', 100);

}

function stopscroll(by) {

  if (scrolling) clearInterval(scrolling);
  scrolling = false;

}

function doscroll(by) {

  var curtop = parseInt(document.getElementById('divje').style.top, 10);
  curtop += by;
  document.getElementById('divje').style.top = curtop + 'px';

}

</script>
</head>
<body>
<div id="container" style="position:relative;width:100px;height:100px;overflow:hidden;border:1px solid red">
<div id="divje" style="position:absolute;top:0px;left:0px">
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
bla<br />bla<br />bla<br />bla<br />bla<br />
</div>
</div>
<input type="button" value="up" onmousedown="scroll(-10)" onmouseup="stopscroll()" />
<input type="button" value="down" onmousedown="scroll(10)" onmouseup="stopscroll()" />
</body>
</html>


btw, in de GoT Tracker zit ook een aardige DHTML scrollbar, en ook Clay's BeeHive heeft DHTML scrollbar functionaliteit. Zelfs in pumpkins zit een aardige horizontale scroller ;)

Intentionally left blank

dinsdag 18 november 2003 10:24

Acties:
  • bakakaizoku
  • Registratie: Januari 2002
  • Laatst online: 14:43

bakakaizoku

ja

Topicstarter
jaaah et werkt, cheers :)

rm -rf ~/.signature

Pagina: 1
Reageer