Naar beneden scrollen
Ik ben met de webite bezig en ik wil alle dingen op 1 pagina hebben.
Ik heb een menu en nu wil ik als ik op een menu balk klik dat hij naar beneden scrolt ik heb al vanalles geprobeerd maar het lukt maar niet.
Groetjes,
Matthijs
$('a#portfolio').click(function(){
pHeight = $("div.portfolioindex").height();
$('div.container').animate({scrollTop: pHeight}, 2500);
return false;
});
});
Gewijzigd op 10/06/2014 20:21:24 door - Ariën -
<script type="text/JavaScript">
$(document).ready(function() {
$('a#portfolio').click(function(){
pHeight = $("div.portfolioindex").height();
$('div.container').animate({scrollTop: pHeight}, 2500);
return false;
});
});
</script>
Gewijzigd op 10/06/2014 21:18:47 door - Ariën -
<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>
dit is mijn head
Gewijzigd op 10/06/2014 21:32:04 door - Ariën -
<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>
<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>
<body>
<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 idclass="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>
<div class="Overmij">
<h1 class="wit" id="midden">Over mij</h1>
<p class="ondertitel" id="midden">Kom hier meer over mij te weten!</p>
<div class="">
</div>
<br/>
<br/>
<div class="tekstovermij">
<p class="wit">
</div>
</div>
</div>
</body>
</html>
dit is alles
<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">
is trouwens de header de andere was verkeerd
De code-tags zijn bedoeld om je scripts op het forum in een leesbaar wit vlak te plaatsen met regelnummering erbij.
Ik zou het op prijs stellen dat je deze tags voortaan om script in het forum heen plaatst.
Gebruik deze tags om je script heen, als je ze op het forum plaatst, en alles wordt duidelijker leesbaarder. je kan je bestaande berichten aanpassen door op
te klikken.Gewijzigd op 10/06/2014 21:41:30 door - Ariën -
Mijn exucces daarvoor
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
92
93
94
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
<!DOCTYPE>
<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>
<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>
<body>
<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 idclass="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>
<div class="Overmij">
<h1 class="wit" id="midden">Over mij</h1>
<p class="ondertitel" id="midden">Kom hier meer over mij te weten!</p>
<div class="">
</div>
<br/>
<br/>
<div class="tekstovermij">
<p class="wit">
</div>
</div>
</div>
</body>
</html>
hopelijk is dit beter
idclass bestaat niet, dit moet class zijn.
Tevens je HTML is echt belabberd, ga eens even goed HTML leren ;-)
- Je sluit veel element niet af.
- Ene keer gebruik je ' en andere keer "
- header hoort in de body
- id's gebruik je dubbel, mag maar 1 keer voor komen per pagina
- volgens mij veel overbodige elementen en classes
- ene keer nederlandse class namen andere keer weer engels
pHeight = $("div.portfolioindex").height();
$('div.container').animate({scrollTop: pHeight}, 2500);
gaat sowieso verkeerd. Je wilt dat hij scrollt naar de hoogte van het element? Ik denk eerder naar de position van het element.
$("div.portfolioindex").position().top; komt meer in de buurt
Zo kan ik nog wel even door gaan. Fix je HTML om fouten te voorkomen
Gewijzigd op 10/06/2014 22:02:30 door Joakim Broden
Matthijs P op 10/06/2014 21:52:19:
<div idclass="portfolioindex" id="midden">
Code (php)
1
2
2
<div idclass="portfolioindex" id="midden">
Klopt dat idclass?
Verder een tip: spring je code in, zodat je bv. kunt zien welke <div> bij </div> hoort.
Verder kan er toch maar 1x een id op een pagina voorkomen? Zie meerdere keren id="midden" staan.
Gewijzigd op 10/06/2014 22:01:56 door Obelix Idefix
Zorg eerst dat je HTML-code gewoon valid is.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
<body>
<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>
</body>
<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>
<body>
<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>
</body>
Daarnaast heb ik een vraag, waarom gebruik je een <span> element binnen een anchor <a> element ? Je kan hem ook weg laten en er een display:inline-block; aan meegeven (aan de anchor) in de css.
Verder is je html niet helemaal zoals het hoort maar oefening baart kunst en zo ben ik ook begonnen een aantal jaar geleden, wat helemaal niet erg is!
Je javascript klopt ook niet helemaal bovenaan, je sluit ze niet goed af en dergelijke, ik heb helaas geen tijd om al je code te verbeteren, sorry.
Zoek eens een aantal voorbeelden op van w3schools of kijk her en der eens in de broncode als je op een website komt waarvan je vind dat die er interessant uit ziet. Daarbij moet je wel op letten dat sommige websites automatisch worden aangevuld door opensource CMS systemen en de broncode er dan niet echt bepaald netjes uit ziet!
Heel veel succes ermee !
Gewijzigd op 11/06/2014 15:43:06 door Eschwin Moerkerken