[JS] scroll in div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Kalle P

Kalle P

25/03/2008 14:20:00
Quote Anchor link
Ik wil iets a la http://www.zah.nl/result.php, dat je op een linkje klikt (in het voorbeeld een huis in googlemaps) en dan in een div er naar toe wordt gescrolled mbv javascript.

Heeft iemand zoiets liggen toevallig?

edit:
Stuk code die ik al had:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Test</title>
    <style type="text/css" media="screen">

    body
    {
        padding: 0;
        margin: 0;
        background-color: #666;
        color: #000;
        text-align: center;
    }
    
    #contents    
    {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right:auto;
        margin-left:auto;
        width: 700px;
        padding: 10px;
        background-color: #FFF;
        color: #000;
        text-align: center;
    }
    
    em    
    {
        color: #333;
        background-color: transparent;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
    }
    
        fieldset .ol-wrapper {  
                margin: 0 auto;
                text-align: center;
        }
          
        fieldset #attributen{
                float: left;
        }

        fieldset #attributen li{
                list-style: none;
        }
        
        fieldset #links, #rechts, #midden {
                margin: 0;
                padding: 0;
                display: inline;
                float: left;
                text-align: center;  
        }
            
        #midden {
                margin: 40px 25px;
        }
        
    fieldset #links li, #rechts li {
        color: #fff;
        background-color: #333;
                padding: 5px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.8em;
                width: 70px;
                margin: 5px 0;
                text-align: center;
                vertical-align: top;
                
    }
        fieldset #links li img, #rechts li img{
                width: 70px;
                height: 70px;
                
        }
        
        .clearfloat {
            clear:both;
            font-size:1px;
            height:0pt;
            line-height:0px;
        }
        li{
            list-style: none;
        }


</style>
<script type="text/javascript">
    function scrollTo(id){
        document.getElementById('scroll').scrollTop = document.getElementById(id).offsetTop;
    }
</script>
</head>
<body>
<div id="contents">
        <fieldset>
            <legend> <em>Maak je keuze</em> </legend>
            <strong>25 punten</strong>
            <div class="ol-wrapper">              
                <ol class="players" style="float:left;text-align:left" >
                     <li>
                         <label for="naam" onmouseover="scrollTo('1')" >to 1</label>
                     </li>
                     <li>
                         <label for="naam" onmouseover="scrollTo('2')">to 2</label>
                     </li>
                     <li>
                         <label for="naam" onmouseover="scrollTo('3')">to 3</label>
                     </li>
                     <li>
                         <label for="naam" onmouseover="scrollTo('4')">to 4</label>
                     </li>
                     <li>
                         <label for="naam" onmouseover="scrollTo('5')">to 5</label>
                     </li>
                     <li>
                         <label for="naam" onmouseover="scrollTo('6')">to 6</label>
                     </li>
                     <li>
                         <label for="naam" onmouseover="scrollTo('7')">to 7</label>
                     </li>
                     <li>
                         <label for="naam" onmouseover="scrollTo('8')">to 8</label>
                     </li>                
                 </ol>                
                 <div id="links">
                          <h4 style="background-color:#FFAE00;">
                            H4
                         </h4>
                         <ol style="overflow:auto;height:400px;margin: 0;padding:0px;" id="scroll">
                             <li>
                                 <img src="images/block.gif" alt="" />
                                 <label for="naam" id="1" >Block</label>
                             </li>
                             <li>
                                 <img src="images/block.gif" alt="" />
                                 <label for="naam" id="2">Block</label>
                             </li>
                             <li>
                                 <img src="images/block.gif" alt="" />
                                 <label for="naam" id="3">Block</label>
                             </li>
                             <li>
                                 <img src="images/block.gif" alt="" />
                                 <label for="naam" id="4">Block</label>
                             </li>
                             <li>
                                 <img src="images/block.gif" alt="" />
                                 <label for="naam" id="5" >Block</label>
                             </li>
                             <li>
                                 <img src="images/block.gif" alt="" />
                                 <label for="naam" id="6">Block</label>
                             </li>
                             <li>
                                 <img src="images/block.gif" alt="" />
                                 <label for="naam" id="7">Block</label>
                             </li>
                             <li>
                                 <img src="images/block.gif" alt="" />
                                 <label for="naam" id="8">Block</label>
                             </li>
                         </ol>
                 </div>
                 <br class="clearfloat"/>
             </div>
         </fieldset>
        
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Kalle P
 
PHP hulp

PHP hulp

28/03/2024 22:07:59
 
Wouter K

Wouter K

25/03/2008 14:36:00
Quote Anchor link
Kun je iets duidelijker zijn ?
Of wil je iets hebben ZOALS googlemaps ?
 
Kalle P

Kalle P

25/03/2008 14:42:00
Quote Anchor link
Nee googlemaps niet. Zie geposte voorbeeld.

Alleen een linkje waar je overheen gaat (onmouseover) waar je dan naar het bijhorende id gaat in de scrollende div.
 
Wouter K

Wouter K

25/03/2008 14:47:00
Quote Anchor link
Euhm , Dus je hebt een link. En eens je op dat linkje met de muis komt schiet hij naar de bijpassende DIV ?

Is zoiets niet op te lossen door euhm ja ik kan het niet van buiten maar vaak zie je staan Terug naar boven en bij een klik springt hij naar boven. dus ik denk op zo'n manier dat het wel kan lukken maar dan geef je gewoon elk div'je zoiets mee !

Begrijp je wat ik bedoel ?

(ofja hoe je het ook wilt)
 
Kalle P

Kalle P

25/03/2008 14:55:00
Quote Anchor link
Nee het is geen anchor. Het is een div waar gescrolled wordt. Zie geposte code van opmaak...
 
Jesper Diovo

Jesper Diovo

25/03/2008 15:15:00
Quote Anchor link
Je hebt toch scroll() in JavaScript?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
document.getElementById("div").scroll(0, document.getElementById("doel").scrollTop);


Zoiets?..
 
Kalle P

Kalle P

25/03/2008 15:16:00
Quote Anchor link
Inmiddels toch nog wat gevonden.

jQuery.

Alleen wanneer ik local de 2 js files neerzet werkt het niet. Wanneer ik naar de 2 js files op het web refereer dan doet ie het wel.

Iemand ervaring met jQuery?

edit:
@Djemo
Zo heb je nooit een mooie scroll met vertraging e.d. Iig bedankt voor je moeite.
Gewijzigd op 01/01/1970 01:00:00 door Kalle P
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.