Naar beneden scrollen
Pagina: « vorige 1 2 3 volgende »
Matthijs P op 11/06/2014 16:29:12:
Mijn html script hoeft niet geordend te zijn als hij het maar doet vind ik zelf :D
Rare instelling...... met een 'houtje-touwtje'-constructie is de kans op fouten maken veel groter.
Gewijzigd op 11/06/2014 16:31:01 door - Ariën -
Maar hoe moet ik die scroll down nu maken?
Code (php)
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
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
<html>
<head>
<title>Matthijs</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function() {
$('a#portfolio').click(function(){
pHeight = $("div.portfolioindex").height();
$('div.container').animate({scrollTop: pHeight}, 2500);
return false;
});
});
</script>
</head>
<body>
<header class="menu">
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub' id="bottom"><a href='#'><span>Portfolio</span></a></li>
<li><a href='' onclick="overmij"><span>Over mij</span></a></li>
<li><a href='' onclick="downloads"><span>downloads</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</header>
<div class="container">
<div class="top" id="midden">
<h1 class="wit ">Hiya!</h1>
<p class="ondertitel">Welkom op mijn site!</p>
<a href=""><img id="mac" src="images/mac.png" width="600" height="300"></a>
</div>
<div class="portfolioindex" id="midden">
<br/>
<h1 class="algemeen">Portfolio</h1>
<p class="ondertitel">Lees en bekijk hier al mijn projecten!</p>
</div>
<div id="box1">
<div id="overlay1">
<span id="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div id="box2">
<div id="overlay2">
<span id="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div id="box3">
<div id="overlay3">
<span id="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div class="Overmij">
<h1 class="wit" id="midden">Over mij</h1>
<p class="ondertitel" id="midden">Kom hier meer over mij te weten!</p>
<br/>
<br/>
</div>
<div class="tekstovermij">
<p class="wit">
</div>
</div>
</body>
</html>
- Ook mist er een DOCTYPE. Gebruik HTML5's: <!DOCTYPE html>
Hoe kan ik die scroll doen?
Mogelijk dat dit dan werkt? In ieder geval moet je dan een debug-alert zien.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(document).ready(function() {
$('a#portfolio').click(function(){
pHeight = $("div.portfolioindex").position().top;
alert(pHeight+' is de hoogte.'); // stukje debug.
$('div.container').animate({scrollTop: pHeight}, 2500);
return false;
});
});
$('a#portfolio').click(function(){
pHeight = $("div.portfolioindex").position().top;
alert(pHeight+' is de hoogte.'); // stukje debug.
$('div.container').animate({scrollTop: pHeight}, 2500);
return false;
});
});
Ik heb je code even onder de loep genomen omdat ik je er graag mee wil helpen, maar wat jij doet in je Jquery is eerst de hoogte berekenen van het element waar je naartoe wil scrollen, maar wat je wilt weten is de hoogte vanaf bovenaan het document, dus je moet de positie bepalen van dat element.
Verder heb ik alle Id's weggehaald welke er meerdere keren in stonden en veranderd in classes. Dit zou je dan moeten aanpassen in je CSS bestandje door simpelweg de hekjes te veranderen in puntjes.
Ook heb ik dingen uit gecommentarieerd welke niet nodig zijn in de html tenzij niet anders kan, en volgens mij kun je zo'n <br /> best met css oplossen in jouw geval !
Hier uiteindelijk je code, welke ik heb getest in laatste versie van chrome:
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<title>Matthijs</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function() {
$('a.selector').click(function(e){
e.preventDefault();
pHeight = $("div.portfolioindex").position();
$('body,html').animate({scrollTop: pHeight.top}, 2500);
return false;
});
});
</script>
</head>
<body>
<header id="navigation">
<ul class="navbar">
<li class='active'><a href='index.html'>Home</a></li>
<li class='has-sub bottom'><a class="selector" href=''>Portfolio</a></li>
<li><a href='' onclick="overmij">Over mij</a></li>
<li><a href='' onclick="downloads">downloads</a></li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</header>
<div class="container">
<div class="top midden">
<h1 class="wit">Hiya!</h1>
<p class="ondertitel">Welkom op mijn site!</p>
<a href=""><img class="mac" src="images/mac.png" width="600" height="300"></a>
</div>
<div class="portfolioindex midden">
<!-- <br/> -->
<h1 class="algemeen">Portfolio</h1>
<p class="ondertitel">Lees en bekijk hier al mijn projecten!</p>
</div>
<div id="box1">
<div id="overlay1">
<span class="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div id="box2">
<div id="overlay2">
<span class="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div id="box3">
<div id="overlay3">
<span class="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div class="Overmij">
<h1 class="wit midden">Over mij</h1>
<p class="ondertitel midden">Kom hier meer over mij te weten!</p>
<!-- <br/> -->
<!-- <br/> -->
</div>
<div class="tekstovermij">
<p class="wit">
lorem ipsum
</p>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Matthijs</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function() {
$('a.selector').click(function(e){
e.preventDefault();
pHeight = $("div.portfolioindex").position();
$('body,html').animate({scrollTop: pHeight.top}, 2500);
return false;
});
});
</script>
</head>
<body>
<header id="navigation">
<ul class="navbar">
<li class='active'><a href='index.html'>Home</a></li>
<li class='has-sub bottom'><a class="selector" href=''>Portfolio</a></li>
<li><a href='' onclick="overmij">Over mij</a></li>
<li><a href='' onclick="downloads">downloads</a></li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</header>
<div class="container">
<div class="top midden">
<h1 class="wit">Hiya!</h1>
<p class="ondertitel">Welkom op mijn site!</p>
<a href=""><img class="mac" src="images/mac.png" width="600" height="300"></a>
</div>
<div class="portfolioindex midden">
<!-- <br/> -->
<h1 class="algemeen">Portfolio</h1>
<p class="ondertitel">Lees en bekijk hier al mijn projecten!</p>
</div>
<div id="box1">
<div id="overlay1">
<span class="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div id="box2">
<div id="overlay2">
<span class="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div id="box3">
<div id="overlay3">
<span class="plus"><a href="portfolio/"><img src="images/hover.png" width="130" height="135"></a></span>
</div>
</div>
<div class="Overmij">
<h1 class="wit midden">Over mij</h1>
<p class="ondertitel midden">Kom hier meer over mij te weten!</p>
<!-- <br/> -->
<!-- <br/> -->
</div>
<div class="tekstovermij">
<p class="wit">
lorem ipsum
</p>
</div>
</div>
</body>
</html>
http://jsbin.com/zudis/1/watch
Gewijzigd op 12/06/2014 10:54:22 door Eschwin Moerkerken
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<header>
<ul class="navbar">
<li><a href="#top">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#overmij">Over mij</a></li>
<li><a href="#downloads">Downloads</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
<div id="portfolio">
<h2>Portfolio</h2>
</div>
<div id="overmij">
<h2>Over mij</h2>
</div>
<ul class="navbar">
<li><a href="#top">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#overmij">Over mij</a></li>
<li><a href="#downloads">Downloads</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
<div id="portfolio">
<h2>Portfolio</h2>
</div>
<div id="overmij">
<h2>Over mij</h2>
</div>
Nog even een CSS3-animatie eroverheen als je het scrollen wat visueel effect wilt meegeven en klaar.
Gewijzigd op 12/06/2014 11:06:21 door Ward van der Put
Nu nog een uitzoeken hoe je vervolgens smooth kan scrollen met CSS naar dat element.
Ik heb de css code maar aan wat moet ik die koppelen? aan de #portfolio?
Gewijzigd op 12/06/2014 15:45:47 door Ward van der Put
Wie doet wat niet en wat doet wat wel?
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
-webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
-moz-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
-o-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */
-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000);
-moz-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000);
-o-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000);
transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */
-moz-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
-o-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */
-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000);
-moz-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000);
-o-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000);
transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */
Pagina: « vorige 1 2 3 volgende »